/* ==========================================================================
   Heard That — Concept 1 "Encore"
   Warm paper, brand typography (Bricolage Grotesque + Inter), indigo and
   coral from the approved tokens. Layered album-art compositions, a floating
   pill navigation and a floating mini-player.
   ========================================================================== */
:root{
  --bg:#FBF7F1; --surface:#FFFFFF; --surface-2:#F4EEE3; --line:#E8E0D0;
  --ink:#211B15; --muted:#726A5C;
  --coral:#FF5A45; --coral-btn:#D23A26; --coral-btn-h:#B52F1C; --coral-ink:#C9331F; --coral-tint:#FF5A4514;
  --indigo:#241F49; --indigo-2:#3A3170; --sun:#F4B942;
  --good:#3F8F5F; --bad:#D1483B;
  --display:'Bricolage Grotesque','Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r-sm:.625rem; --r:1rem; --r-lg:1.5rem;
  --shadow-sm:0 1px 2px rgba(33,27,21,.06),0 1px 1px rgba(33,27,21,.04);
  --shadow:0 8px 24px rgba(33,27,21,.08),0 2px 6px rgba(33,27,21,.04);
  --shadow-lg:0 20px 50px rgba(33,27,21,.14);
  --wrap:76rem; --gut:clamp(1.1rem,4vw,2.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --a11y-accent:#241F49; --a11y-bottom:1.25rem;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--coral-ink); text-underline-offset:.18em; }
a:hover{ color:var(--ink); }
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.1rem,4vw,3rem); }
h2{ font-size:clamp(1.6rem,3vw,2.25rem); }
h3{ font-size:1.1rem; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; border-radius:6px; }
.sr,.ht-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:1rem; top:-4rem; z-index:9999; background:var(--indigo); color:#fff; padding:.8rem 1.1rem; border-radius:var(--r-sm); font-weight:700; transition:top .2s; }
.skip:focus{ top:1rem; color:#fff; }
main:focus{ outline:none; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.hp{ position:absolute; left:-9999px; }
.kicker{ display:inline-flex; align-items:center; gap:.55rem; font:600 .8rem/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink); margin-bottom:1rem; }
.kicker::before{ content:""; width:1.6rem; height:2px; background:currentColor; border-radius:2px; }
.ico{ width:1.25em; height:1.25em; flex:none; }
.ico-flip{ transform:scaleX(-1); }

/* ---------- Buttons ---------- */
.btn,.ht-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.9rem; padding:.7rem 1.35rem; border-radius:100px; border:1.5px solid transparent; font:600 .95rem/1 var(--body); text-decoration:none; white-space:nowrap; transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s; }
.btn:hover,.ht-btn:hover{ transform:translateY(-1px); }
.btn--sm{ min-height:2.5rem; padding:.55rem 1rem; font-size:.875rem; }
.btn--lg{ min-height:3.4rem; padding:.9rem 1.7rem; font-size:1rem; }
.btn--block{ width:100%; }
.btn--coral,.ht-btn--primary{ background:var(--coral-btn); color:#fff; box-shadow:0 10px 24px -12px rgba(210,58,38,.8); }
.btn--coral:hover,.ht-btn--primary:hover{ background:var(--coral-btn-h); color:#fff; }
.btn--dark{ background:var(--indigo); color:#fff; }
.btn--dark:hover{ background:var(--indigo-2); color:#fff; }
.btn--ghost,.ht-btn--ghost{ border-color:var(--line); background:var(--surface); color:var(--ink); }
.btn--ghost:hover,.ht-btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn--light{ background:#fff; color:var(--indigo); }
.btn--light:hover{ background:var(--sun); color:var(--ink); }
.ht-btn--danger{ background:none; border-color:var(--bad); color:#B23A2F; }
.ht-btn--danger:hover{ background:#B23A2F; color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.icon-btn{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; border:0; background:transparent; color:var(--muted); transition:color .2s,background-color .2s; }
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.icon-btn--line{ border:1.5px solid var(--line); color:var(--ink); background:var(--surface); }
.icon-btn[aria-pressed="true"], .trow__btn[aria-pressed="true"]{ color:var(--coral-ink); }
[data-like][aria-pressed="true"] svg, [data-player-like][aria-pressed="true"] svg{ fill:currentColor; }
.round-btn{ display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; border:0; background:var(--indigo); color:#fff; flex:none; }
.round-btn:hover{ background:var(--coral-btn); }
.ico-pause{ display:none; }
.is-current .ico-play, [aria-pressed="true"] > .ico-play{ display:none; }
.is-current .ico-pause, [aria-pressed="true"] > .ico-pause{ display:block; }

/* ---------- Navigation: floating pill ---------- */
.nav{ position:sticky; top:0; z-index:100; padding:.75rem var(--gut) 0; }
.nav__pill{ max-width:var(--wrap); margin-inline:auto; display:flex; align-items:center; gap:1rem; padding:.55rem .6rem .55rem 1.1rem; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border:1px solid var(--line); border-radius:100px; box-shadow:var(--shadow-sm); transition:box-shadow .3s; }
.nav.is-stuck .nav__pill{ box-shadow:var(--shadow); }
.nav__brand{ flex:none; }
.nav__brand img{ height:1.75rem; width:auto; }
.nav__links{ flex:1; }
.nav__links ul{ display:flex; justify-content:center; gap:.15rem; }
.nav__links a{ display:block; padding:.55rem .75rem; border-radius:100px; color:var(--ink); text-decoration:none; font-weight:500; font-size:.9rem; transition:background-color .2s; white-space:nowrap; }
.nav__links a:hover{ background:var(--surface-2); color:var(--ink); }
.nav__links a[aria-current="page"]{ background:var(--indigo); color:#fff; }
.nav__tools{ display:flex; align-items:center; gap:.3rem; margin-left:auto; }
.nav__icon{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; color:var(--ink); }
.nav__icon:hover,.nav__icon[aria-current="page"]{ background:var(--surface-2); color:var(--coral-ink); }
.nav__menu{ display:none; width:2.75rem; height:2.75rem; border-radius:50%; border:0; background:var(--indigo); color:#fff; place-items:center; }
@media (max-width:1180px){ .nav__links a{ padding:.5rem .55rem; font-size:.85rem; } }
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__menu{ display:grid; }
  .nav__pill{ padding-left:.9rem; }
}
@media (max-width:520px){ .nav__cta{ display:none; } .nav__brand img{ height:1.45rem; } }

/* Full-screen sheet menu */
.sheet{ position:fixed; inset:0; z-index:200; background:var(--indigo); color:#fff; padding:1rem var(--gut) 2rem; overflow-y:auto; display:flex; flex-direction:column; gap:1.5rem; opacity:0; transform:translateY(-8px); transition:opacity .25s,transform .3s var(--ease); }
.sheet.is-open{ opacity:1; transform:none; }
.sheet__top{ display:flex; align-items:center; justify-content:space-between; }
.sheet__logo{ height:1.6rem; width:auto; }
.sheet__close{ width:2.9rem; height:2.9rem; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); background:none; color:#fff; display:grid; place-items:center; }
.sheet__links{ display:grid; }
.sheet__links a{ display:block; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; text-decoration:none; font:700 clamp(1.5rem,6vw,2rem)/1.15 var(--display); letter-spacing:-.02em; }
.sheet__links a[aria-current="page"]{ color:var(--sun); }
.sheet :focus-visible{ outline-color:var(--sun); }
body.menu-open{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; width:46rem; height:46rem; right:-12rem; top:-14rem; border-radius:50%; background:radial-gradient(circle, rgba(255,90,69,.16), transparent 62%); pointer-events:none; }
.hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__title{ font-size:clamp(2.6rem,5.4vw,4.25rem); font-weight:800; line-height:.98; letter-spacing:-.035em; margin-bottom:1.25rem; }
.hero__lede{ font-size:clamp(1.02rem,1.5vw,1.1rem); color:var(--muted); max-width:34rem; margin-bottom:1.75rem; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.75rem; font-weight:600; font-size:.92rem; }
.hero__facts li{ display:flex; align-items:center; gap:.4rem; }
.hero__facts .ico{ color:var(--good); }

.hero__stage{ position:relative; aspect-ratio:1 / .96; max-width:34rem; width:100%; justify-self:center; }
.stack{ position:absolute; margin:0; width:56%; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .8s var(--ease); }
.stack img{ width:100%; aspect-ratio:1; object-fit:cover; }
.stack--1{ left:18%; top:4%; width:64%; z-index:3; transform:rotate(-2deg); }
.stack--2{ left:0; top:26%; z-index:2; transform:rotate(-9deg); }
.stack--3{ right:0; top:14%; z-index:1; transform:rotate(8deg); }
.stack--4{ right:6%; bottom:0; width:34%; z-index:2; transform:rotate(4deg); }
.hero__stage:hover .stack--2{ transform:rotate(-12deg) translateX(-10px); }
.hero__stage:hover .stack--3{ transform:rotate(11deg) translateX(10px); }
.nowcard{ position:absolute; z-index:5; left:4%; bottom:4%; display:flex; align-items:center; gap:.85rem; padding:.8rem .8rem .8rem 1rem; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.7); border-radius:var(--r); box-shadow:var(--shadow-lg); max-width:min(21rem, 92%); }
.nowcard__meta{ min-width:0; }
.nowcard__meta p{ margin:0; }
.nowcard__label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-ink); }
.nowcard__title{ font:700 1.05rem/1.2 var(--display); }
.nowcard__artist{ font-size:.82rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nowcard__play{ flex:none; width:3rem; height:3rem; border-radius:50%; border:0; background:var(--coral-btn); color:#fff; display:grid; place-items:center; }
.nowcard__play:hover{ background:var(--indigo); }
.eq{ display:flex; align-items:flex-end; gap:3px; height:1.6rem; flex:none; }
.eq i{ width:4px; border-radius:3px; background:linear-gradient(var(--coral),#B06BFF); height:40%; animation:eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:-.4s; } .eq i:nth-child(3){ animation-delay:-.8s; } .eq i:nth-child(4){ animation-delay:-.2s; } .eq i:nth-child(5){ animation-delay:-.6s; }
@keyframes eq{ 0%,100%{ height:25%; } 50%{ height:100%; } }
.seal{ position:absolute; z-index:4; right:-2%; top:-2%; width:6.2rem; height:6.2rem; border-radius:50%; background:var(--sun); color:var(--ink); display:grid; place-content:center; text-align:center; margin:0; line-height:1; transform:rotate(10deg); box-shadow:var(--shadow); animation:float 6s ease-in-out infinite; }
.seal b{ font:800 2rem/1 var(--display); }
.seal span{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
@keyframes float{ 50%{ transform:rotate(4deg) translateY(-8px); } }

/* ---------- Marquee ---------- */
.marquee{ background:var(--indigo); color:#fff; padding:1.1rem 0; display:flex; align-items:center; gap:1.5rem; overflow:hidden; }
.marquee__label{ flex:none; margin:0 0 0 var(--gut); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sun); }
.marquee__track{ flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee__row{ display:flex; width:max-content; animation:marq 32s linear infinite; }
.marquee__row span{ font:700 clamp(1.15rem,2vw,1.5rem)/1 var(--display); padding-inline:1.4rem; white-space:nowrap; display:flex; align-items:center; gap:2.8rem; }
.marquee__row span::after{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--coral); margin-left:1.4rem; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (max-width:640px){ .marquee{ flex-direction:column; align-items:flex-start; gap:.7rem; } .marquee__track{ width:100%; } }

/* ---------- Sections ---------- */
.section{ padding-block:clamp(3rem,7vw,5.5rem); }
.section--tight{ padding-block:clamp(2rem,4vw,3rem); }
.section--panel{ background:var(--surface-2); }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.head h2{ margin:0; }
.head--sm h2{ font-size:1.5rem; }
.head__note{ margin:0; color:var(--muted); font-size:.9rem; }
.more{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--coral); padding-bottom:2px; }
.more .ico{ transition:transform .2s var(--ease); }
.more:hover .ico{ transform:translateX(3px); }

/* AI DJ promo */
.djpromo{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2rem; align-items:center; padding:clamp(1.75rem,4vw,3rem); border-radius:var(--r-lg); background:var(--indigo); color:#fff; }
.djpromo::after{ content:""; position:absolute; right:-6rem; bottom:-9rem; width:26rem; height:26rem; border-radius:50%; background:conic-gradient(from 90deg, #6F9BFF, #B06BFF, #FF6FD8, #FF5A45, #6F9BFF); opacity:.35; filter:blur(40px); }
.djpromo__copy{ position:relative; z-index:1; }
.djpromo h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); }
.djpromo p{ color:#DCD8F0; max-width:32rem; }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:100px; background:rgba(244,185,66,.18); color:var(--sun); font-weight:700; font-size:.8rem; }
.djpromo__chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.6rem; }
.djpromo__chips a{ display:inline-block; padding:.65rem 1.05rem; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; transition:background-color .2s,transform .2s; }
.djpromo__chips a:hover{ background:#fff; color:var(--indigo); transform:translateY(-2px); }
.djpromo :focus-visible{ outline-color:var(--sun); }

/* Genre bento */
.bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(10.5rem,auto); gap:1rem; }
.bento__item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.bento__item:nth-child(4), .bento__item:nth-child(5), .bento__item:nth-child(6){ grid-column:span 2; }
.genre{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:1.25rem; border-radius:var(--r-lg); color:#fff; text-decoration:none; background:linear-gradient(135deg,var(--c1),var(--c2)); isolation:isolate; transition:transform .35s var(--ease), box-shadow .35s; }
.genre::before{ content:""; position:absolute; z-index:-1; right:-2.5rem; top:-2.5rem; width:9rem; height:9rem; border-radius:50%; border:18px solid rgba(255,255,255,.14); transition:transform .5s var(--ease); }
.genre::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(0,0,0,.28), transparent 60%); }
.genre:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); color:#fff; }
.genre:hover::before{ transform:scale(1.25); }
.genre__name{ font:800 clamp(1.4rem,2.2vw,1.9rem)/1 var(--display); letter-spacing:-.02em; }
.bento__item:nth-child(1) .genre__name{ font-size:clamp(2rem,4vw,3.2rem); }
.genre__desc{ margin-top:.35rem; font-size:.92rem; opacity:.95; max-width:22rem; }
.genre__count{ margin-top:.8rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.bento__item:nth-child(5) .genre{ color:var(--ink); }
.bento__item:nth-child(5) .genre::after{ background:none; }

/* Song cards */
.cards{ display:grid; gap:1.25rem; }
.cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.7rem; transition:transform .3s var(--ease), box-shadow .3s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card__art{ position:relative; border-radius:calc(var(--r) - .3rem); overflow:hidden; }
.card__art img{ width:100%; aspect-ratio:1; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card__art img{ transform:scale(1.05); }
.card__play{ position:absolute; right:.7rem; bottom:.7rem; width:3.1rem; height:3.1rem; border-radius:50%; border:0; background:var(--coral-btn); color:#fff; display:grid; place-items:center; box-shadow:0 10px 20px -8px rgba(0,0,0,.5); transform:translateY(6px); opacity:.95; transition:transform .3s var(--ease), background-color .2s; }
.card:hover .card__play, .card__play:focus-visible, .card__play.is-current{ transform:none; }
.card__play:hover{ background:var(--indigo); }
.card__body{ padding:.85rem .35rem .2rem; flex:1; }
.card__title{ font-size:1.05rem; margin:0 0 .15rem; }
.card__artist{ margin:0; color:var(--muted); font-size:.9rem; }
.card__meta{ display:flex; gap:.6rem; margin:.5rem 0 0; font-size:.78rem; color:var(--muted); }
.card__meta span:first-child{ padding:.1rem .5rem; border-radius:100px; background:var(--surface-2); color:var(--ink); font-weight:600; }
.card__acts{ position:absolute; top:1.1rem; right:1.1rem; display:flex; flex-direction:column; gap:.35rem; opacity:0; transition:opacity .25s; }
.card__acts .icon-btn{ background:rgba(255,255,255,.92); color:var(--ink); box-shadow:var(--shadow-sm); }
.card:hover .card__acts, .card:focus-within .card__acts{ opacity:1; }
.card__acts .icon-btn[aria-pressed="true"]{ color:var(--coral-ink); }
@media (hover:none){ .card__acts{ opacity:1; } .card__play{ transform:none; } }

/* Duo: chart + fresh */
.duo{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); }
.chart{ counter-reset:none; display:grid; gap:.35rem; }
.chart__row{ display:grid; grid-template-columns:2rem 3.5rem 1fr auto; align-items:center; gap:.9rem; padding:.55rem .75rem .55rem .5rem; border-radius:var(--r); transition:background-color .2s; }
.chart__row:hover, .chart__row.is-current{ background:var(--surface); box-shadow:var(--shadow-sm); }
.chart__rank{ font:800 1.35rem/1 var(--display); color:var(--muted); text-align:center; }
.chart__row:nth-child(-n+3) .chart__rank{ color:var(--coral-ink); }
.chart__play{ position:relative; width:3.5rem; height:3.5rem; padding:0; border:0; border-radius:.75rem; overflow:hidden; background:none; }
.chart__play img{ width:100%; height:100%; object-fit:cover; }
.chart__icon, .trow__icon{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(33,27,21,.45); opacity:0; transition:opacity .2s; }
.chart__icon::before, .trow__icon::before{ content:""; border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.chart__play:hover .chart__icon, .chart__play:focus-visible .chart__icon, .trow__play:hover .trow__icon, .trow__play:focus-visible .trow__icon, .is-current .chart__icon, .is-current .trow__icon{ opacity:1; }
.is-current .chart__play[aria-pressed="true"] .chart__icon::before, .is-current .trow__play[aria-pressed="true"] .trow__icon::before{ border:0; width:12px; height:14px; margin:0; background:linear-gradient(90deg,#fff 0 4px,transparent 4px 8px,#fff 8px); }
.chart__meta{ min-width:0; display:grid; }
.chart__title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart__artist{ font-size:.88rem; color:var(--muted); }
.chart__plays{ font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.fresh{ display:grid; gap:1rem; }
.fresh__item{ display:grid; grid-template-columns:5.5rem 1fr auto; gap:1rem; align-items:center; padding:.75rem; background:var(--surface); border-radius:var(--r); border:1px solid var(--line); }
.fresh__item img{ width:5.5rem; height:5.5rem; border-radius:.75rem; object-fit:cover; }
.fresh__item p{ margin:0; }
.fresh__date{ font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--coral-ink); }
.fresh__title{ font:700 1.1rem/1.2 var(--display); margin:.15rem 0 !important; }
.fresh__artist{ font-size:.86rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Rail */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(13rem, calc((100% - 3.75rem) / 4)); gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.25rem .1rem 1rem; scrollbar-width:thin; overscroll-behavior-x:contain; }
.rail > *{ scroll-snap-align:start; }
.rail-nav{ display:flex; gap:.5rem; }

/* Story */
.story{ overflow:hidden; }
.story__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.story__media{ position:relative; aspect-ratio:1 / .92; }
.story__media img{ position:absolute; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); object-fit:cover; aspect-ratio:1; }
.story__a{ left:0; top:0; width:62%; }
.story__b{ right:0; top:22%; width:48%; border:6px solid var(--bg); }
.story__c{ left:22%; bottom:0; width:36%; border:6px solid var(--bg); }
.story__stat{ position:absolute; right:2%; bottom:6%; margin:0; max-width:12rem; padding:1rem 1.1rem; background:var(--indigo); color:#fff; border-radius:var(--r); box-shadow:var(--shadow-lg); line-height:1.3; font-size:.85rem; }
.story__stat b{ display:block; font:800 2.4rem/1 var(--display); color:var(--sun); }
.values{ display:grid; gap:.9rem; margin:1.5rem 0 2rem; }
.values li{ display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; padding-top:.9rem; border-top:1px solid var(--line); }
.values li::before{ content:""; grid-row:span 2; width:.7rem; height:.7rem; margin-top:.45rem; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px var(--coral-tint); }
.values b{ font-family:var(--display); font-size:1.1rem; }
.values span{ color:var(--muted); }

/* Plan banner */
.plan{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,3rem); border-radius:var(--r-lg); background:linear-gradient(115deg, var(--coral-btn) 0%, #C43A66 55%, var(--indigo) 100%); color:#fff; }
.plan h2{ color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.35rem; }
.plan p{ margin:0; color:#FFE9E3; }
.plan__price{ display:flex; align-items:flex-start; gap:.2rem; line-height:1; }
.plan__price b{ font:800 clamp(4rem,8vw,5.5rem)/.85 var(--display); letter-spacing:-.05em; }
.plan__cur{ font:700 1.6rem/1 var(--display); margin-top:.3rem; }
.plan__per{ align-self:flex-end; font-size:.8rem; font-weight:600; opacity:.9; }
.plan__cta{ display:grid; gap:.6rem; justify-items:center; }
.plan__link{ color:#fff; font-weight:600; font-size:.9rem; }
.plan__link:hover{ color:var(--sun); }
.plan :focus-visible{ outline-color:#fff; }

/* Posts */
.posts{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:auto auto; gap:1.25rem; }
.post{ display:grid; grid-template-columns:10rem 1fr; gap:1rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.75rem; transition:box-shadow .3s; }
.post:hover{ box-shadow:var(--shadow); }
.post--lead{ grid-row:span 2; grid-template-columns:1fr; align-items:start; padding:0; overflow:hidden; }
.post__img{ display:block; overflow:hidden; border-radius:.7rem; }
.post--lead .post__img{ border-radius:0; }
.post__img img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s var(--ease); }
.post:hover .post__img img{ transform:scale(1.04); }
.post--lead .post__body{ padding:1.25rem 1.5rem 1.5rem; }
.post__meta{ display:flex; gap:.75rem; font-size:.78rem; color:var(--muted); margin-bottom:.4rem; }
.post__meta span{ font-weight:700; color:var(--coral-ink); text-transform:uppercase; letter-spacing:.05em; }
.post__title{ font-size:1.1rem; margin-bottom:.4rem; }
.post--lead .post__title{ font-size:clamp(1.35rem,2.2vw,1.7rem); }
.post__title a{ color:var(--ink); text-decoration:none; }
.post__title a:hover{ color:var(--coral-ink); text-decoration:underline; }
.post__ex{ color:var(--muted); font-size:.92rem; margin:0; }
.post:not(.post--lead) .post__ex{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Inner-page hero ---------- */
.phero{ position:relative; overflow:hidden; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); }
.phero__in{ position:relative; z-index:1; }
.phero h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:800; letter-spacing:-.03em; max-width:22ch; }
.phero__text{ color:var(--muted); font-size:1.05rem; max-width:40rem; margin:0; }
.phero__eq{ position:absolute; right:var(--gut); bottom:0; display:flex; align-items:flex-end; gap:6px; height:65%; opacity:.9; }
.phero__eq i{ width:10px; border-radius:6px 6px 0 0; background:linear-gradient(var(--coral), #B06BFF); animation:eq 1.6s ease-in-out infinite; height:40%; }
.phero__eq i:nth-child(3n){ animation-delay:-.5s; } .phero__eq i:nth-child(3n+1){ animation-delay:-1s; } .phero__eq i:nth-child(4n){ animation-duration:2s; }
@media (max-width:760px){ .phero__eq{ display:none; } }

/* ---------- Library ---------- */
.lib-bar{ position:sticky; top:4.9rem; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem 1rem; align-items:center; padding:.8rem; margin-bottom:1.5rem; background:rgba(251,247,241,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--r-lg); }
.search{ position:relative; }
.search .ico{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); }
.search input{ width:100%; min-height:3rem; padding:.7rem 1rem .7rem 2.8rem; border-radius:100px; border:1.5px solid var(--line); background:var(--surface); }
.search input:focus{ border-color:var(--indigo); outline:none; box-shadow:0 0 0 4px rgba(36,31,73,.12); }
.select{ min-height:3rem; padding:.6rem 2.4rem .6rem 1rem; border-radius:100px; border:1.5px solid var(--line); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211B15' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1rem no-repeat; appearance:none; }
.chips{ grid-column:1 / -1; display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.15rem; scrollbar-width:none; }
.chip{ flex:none; min-height:2.5rem; padding:.5rem 1rem; border-radius:100px; border:1.5px solid var(--line); background:var(--surface); font-weight:600; font-size:.88rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; }
.chip i{ width:.6rem; height:.6rem; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); }
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.lib-count{ margin:0 0 1rem; color:var(--muted); font-weight:600; }
.cards--lib{ grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); }
.empty{ padding:3rem 1rem; text-align:center; color:var(--muted); border:2px dashed var(--line); border-radius:var(--r-lg); }

/* ---------- Track list (JS + PHP) ---------- */
.tlist{ display:grid; gap:.4rem; }
.trow{ display:grid; grid-template-columns:3rem 1fr auto auto auto; align-items:center; gap:.8rem; padding:.45rem .5rem; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); }
.trow:has(.pl-move){ grid-template-columns:3rem 1fr auto auto auto auto; }
.trow.is-current{ border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-tint); }
.trow__play{ position:relative; width:3rem; height:3rem; padding:0; border:0; border-radius:.55rem; overflow:hidden; background:none; }
.trow__play img{ width:100%; height:100%; object-fit:cover; }
.trow__meta{ min-width:0; display:grid; }
.trow__title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow__artist{ font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow__dur{ font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.trow__btn{ width:2.5rem; height:2.5rem; border-radius:50%; border:0; background:none; color:var(--muted); display:grid; place-items:center; }
.trow__btn:hover{ background:var(--surface-2); color:var(--ink); }
.trow__btn:disabled{ opacity:.3; cursor:default; }
.trow__btn svg{ width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pl-move{ display:flex; }
@media (max-width:560px){ .trow__dur{ display:none; } .trow{ grid-template-columns:3rem 1fr auto auto; gap:.5rem; } .trow:has(.pl-move){ grid-template-columns:3rem 1fr auto; } .trow:has(.pl-move) .trow__btn[data-like], .trow:has(.pl-move) .trow__btn[data-add]{ display:none; } }

/* ---------- Playlists ---------- */
.pl-bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.pl-count{ margin:0; font-weight:600; color:var(--muted); }
.pl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:1.25rem; }
.pl-card__link{ display:block; padding:.7rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s; }
.pl-card__link:hover{ transform:translateY(-4px); box-shadow:var(--shadow); color:var(--ink); }
.pl-card__cover{ display:grid; grid-template-columns:1fr 1fr; aspect-ratio:1; border-radius:.7rem; overflow:hidden; margin-bottom:.8rem; }
.pl-card__cover img{ width:100%; height:100%; object-fit:cover; }
.pl-card__name{ display:block; font:700 1.1rem/1.2 var(--display); }
.pl-card__meta{ display:block; font-size:.85rem; color:var(--muted); margin-top:.2rem; }
.pl-empty{ text-align:center; padding:clamp(2.5rem,6vw,4rem) 1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.pl-empty__title{ font:800 1.6rem/1.2 var(--display); margin-bottom:.4rem; }
.pl-empty__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.25rem; }
.pl-back{ display:inline-block; margin-bottom:1.25rem; font-weight:600; }
.pl-head{ display:grid; grid-template-columns:clamp(8rem,20vw,13rem) 1fr; gap:clamp(1.25rem,3vw,2rem); align-items:end; margin-bottom:2rem; }
.pl-head__cover{ aspect-ratio:1; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.pl-head__kicker{ margin:0 0 .3rem; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-ink); }
.pl-head__name{ font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:.3rem; }
.pl-head__desc{ color:var(--muted); margin-bottom:.3rem; }
.pl-head__meta{ color:var(--muted); font-size:.9rem; }
.pl-head__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pl-none{ padding:1.5rem; background:var(--surface); border-radius:var(--r); border:1px dashed var(--line); }
.pl-collab{ margin-top:2rem; padding:1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.pl-collab h3{ font-size:1.2rem; }
.pl-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.pl-chip{ padding:.4rem .85rem; border-radius:100px; background:var(--surface-2); font-size:.88rem; }
.pl-chip em{ font-style:normal; font-weight:700; color:var(--coral-ink); margin-left:.3rem; }
.pl-chip--muted{ color:var(--muted); }
.pl-invite label{ display:block; font-weight:600; margin-bottom:.35rem; }
.pl-invite__row{ display:flex; gap:.5rem; }
.pl-invite__row input{ flex:1; min-width:0; }
@media (max-width:560px){ .pl-head{ grid-template-columns:1fr; } .pl-head__cover{ width:9rem; } }

/* ---------- AI DJ page ---------- */
.dj{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.dj__panel{ position:sticky; top:6rem; padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--r-lg); background:var(--indigo); color:#fff; overflow:hidden; }
.dj__panel::after{ content:""; position:absolute; left:-5rem; bottom:-8rem; width:20rem; height:20rem; border-radius:50%; background:conic-gradient(#6F9BFF,#B06BFF,#FF6FD8,#FF5A45,#6F9BFF); filter:blur(46px); opacity:.35; pointer-events:none; }
.dj__panel > *{ position:relative; z-index:1; }
.dj__panel h2{ color:#fff; }
.dj__panel label{ display:block; font-weight:600; margin-bottom:.45rem; color:#DCD8F0; }
.dj__row{ display:grid; gap:.6rem; }
.dj__row input{ flex:1; min-width:0; min-height:3.2rem; padding:.7rem 1.1rem; border-radius:100px; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; }
.dj__row input::placeholder{ color:#B8B2DC; }
.dj__row input:focus{ outline:none; border-color:var(--sun); }
.dj__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.dj__chips button{ padding:.55rem .95rem; border-radius:100px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; font-weight:600; font-size:.88rem; }
.dj__chips button:hover{ background:#fff; color:var(--indigo); }
.dj__panel :focus-visible{ outline-color:var(--sun); }
.dj-hint, .dj-loading{ padding:2rem; border-radius:var(--r-lg); background:var(--surface); border:1px dashed var(--line); color:var(--muted); display:flex; align-items:center; gap:.9rem; }
.dj-eq{ display:flex; align-items:flex-end; gap:3px; height:1.4rem; }
.dj-eq i{ width:4px; border-radius:2px; background:var(--coral); height:30%; animation:eq 1s ease-in-out infinite; }
.dj-eq i:nth-child(2){ animation-delay:-.3s; } .dj-eq i:nth-child(3){ animation-delay:-.6s; } .dj-eq i:nth-child(4){ animation-delay:-.9s; }
.dj-result__title{ font-size:1.8rem; }
.dj-result__title:focus{ outline:none; }
.dj-result__blurb{ padding:1rem 1.2rem; border-radius:var(--r); background:var(--coral-tint); border-left:4px solid var(--coral); }
.dj-result__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.dj-idle{ padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.dj-idle ol{ display:grid; gap:1rem; counter-reset:s; margin-top:1rem; }
.dj-idle li{ counter-increment:s; display:grid; grid-template-columns:2.4rem 1fr; gap:.8rem; align-items:start; }
.dj-idle li::before{ content:counter(s); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--indigo); color:#fff; font:800 1rem/1 var(--display); }

/* ---------- Membership ---------- */
.price{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.price__card{ position:relative; overflow:hidden; padding:clamp(1.75rem,4vw,2.75rem); border-radius:var(--r-lg); background:var(--indigo); color:#fff; box-shadow:var(--shadow-lg); }
.price__card::before{ content:""; position:absolute; right:-4rem; top:-4rem; width:16rem; height:16rem; border-radius:50%; border:28px solid rgba(255,255,255,.06); }
.price__trial{ display:inline-block; padding:.35rem .8rem; border-radius:100px; background:var(--sun); color:var(--ink); font-weight:700; font-size:.82rem; }
.price__num{ display:flex; align-items:flex-start; gap:.2rem; margin:1.1rem 0 .4rem; line-height:1; }
.price__num b{ font:800 3.5rem/1 var(--display); letter-spacing:-.04em; }
.price__num span{ align-self:flex-end; font-size:1rem; color:#C8C2E8; margin-bottom:.4rem; }
.price__card p{ color:#DCD8F0; }
.ticks{ display:grid; gap:.7rem; margin:1.5rem 0 2rem; }
.ticks li{ display:flex; gap:.7rem; align-items:flex-start; }
.ticks .ico{ color:var(--sun); margin-top:.15rem; }
.price__card :focus-visible{ outline-color:var(--sun); }
.timeline{ display:grid; gap:1rem; }
.phase{ padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.phase h2{ font-size:1.3rem; display:flex; align-items:center; gap:.6rem; }
.phase h2 span{ display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--coral-tint); color:var(--coral-ink); font-size:1rem; }
.phase ul{ display:grid; gap:.45rem; }
.phase li{ padding-left:1.1rem; position:relative; color:var(--muted); }
.phase li::before{ content:""; position:absolute; left:0; top:.65em; width:.4rem; height:.4rem; border-radius:50%; background:var(--coral); }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.about__lead{ font:500 clamp(1.25rem,2.2vw,1.6rem)/1.4 var(--display); letter-spacing:-.01em; color:var(--ink); }
.about__text p{ color:var(--muted); font-size:1.05rem; }
.about__art{ position:sticky; top:6rem; display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.about__art img{ border-radius:var(--r); aspect-ratio:1; object-fit:cover; box-shadow:var(--shadow); }
.about__art img:nth-child(2){ transform:translateY(2rem); }
.about__art img:nth-child(4){ transform:translateY(2rem); }
.pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.pillar{ padding:1.75rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.pillar__num{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; margin-bottom:1rem; color:#fff; }
.pillar:nth-child(1) .pillar__num{ background:var(--coral-btn); }
.pillar:nth-child(2) .pillar__num{ background:var(--indigo); }
.pillar:nth-child(3) .pillar__num{ background:var(--good); }
.pillar h3{ font-size:1.3rem; }
.pillar p{ color:var(--muted); margin:0; }
.albums{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:1.25rem; }
@media (min-width:1100px){ .albums{ grid-template-columns:repeat(7,minmax(0,1fr)); } }
.album{ margin:0; }
.album img{ border-radius:var(--r); box-shadow:var(--shadow); aspect-ratio:1; object-fit:cover; transition:transform .4s var(--ease); }
.album:hover img{ transform:translateY(-4px) rotate(-1deg); }
.album figcaption{ margin-top:.6rem; font-size:.88rem; color:var(--muted); }
.album figcaption b{ display:block; color:var(--ink); font-family:var(--display); font-size:1rem; }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.blog-grid .post{ grid-template-columns:1fr; padding:0; overflow:hidden; align-items:start; }
.blog-grid .post__img{ border-radius:0; }
.blog-grid .post__body{ padding:1.25rem 1.5rem 1.5rem; }
.blog-grid .post:first-child{ grid-column:1 / -1; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; }
.blog-grid .post:first-child .post__title{ font-size:clamp(1.5rem,2.6vw,2rem); }
.article{ max-width:46rem; margin-inline:auto; }
.article__hero{ margin:0 0 2rem; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:2rem; }
.article__body p{ font-size:1.1rem; line-height:1.75; }
.article__body p:first-child::first-letter{ float:left; font:800 3.6rem/.85 var(--display); margin:.3rem .5rem 0 0; color:var(--coral-ink); }
.article__foot{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.crumb{ font-size:.9rem; margin-bottom:1rem; }
.crumb a{ color:var(--muted); }

/* ---------- Forms ---------- */
.ht-form, .form{ display:grid; gap:1.1rem; }
.field, .ht-field{ display:grid; gap:.4rem; border:0; padding:0; margin:0; }
.field label, .ht-field label, .ht-field legend{ font-weight:600; font-size:.92rem; padding:0; }
.field input, .field textarea, .ht-field input, .ht-field textarea, .pl-invite input{ width:100%; min-height:3rem; padding:.7rem 1rem; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface); }
.field textarea, .ht-field textarea{ min-height:9rem; resize:vertical; }
.field input:focus, .field textarea:focus, .ht-field input:focus, .ht-field textarea:focus, .pl-invite input:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(36,31,73,.12); }
.field [aria-invalid="true"], .ht-field [aria-invalid="true"], .pl-invite [aria-invalid="true"], [data-dj-input][aria-invalid="true"]{ border-color:var(--bad) !important; }
.error, .ht-error{ margin:0; color:#B23A2F; font-size:.88rem; font-weight:600; display:flex; gap:.35rem; align-items:center; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.alert{ padding:1rem 1.2rem; border-radius:var(--r); font-weight:600; }
.alert--ok{ background:#3F8F5F1A; color:#2B6B45; border:1px solid #3F8F5F55; }
.alert--err{ background:#D1483B1A; color:#9E3127; border:1px solid #D1483B55; }
.alert ul{ margin:.5rem 0 0; padding-left:1.1rem; list-style:disc; font-weight:500; }
.contact{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.contact__form{ padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.contact__side{ display:grid; gap:1rem; }
.infocard{ display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.25rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.infocard .ico-wrap{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--coral-tint); color:var(--coral-ink); }
.infocard h2{ font-size:1rem; margin:0 0 .2rem; font-family:var(--body); font-weight:700; letter-spacing:0; }
.infocard p{ margin:0; color:var(--muted); }
.infocard--dark{ background:var(--indigo); color:#fff; border-color:var(--indigo); }
.infocard--dark p{ color:#DCD8F0; }
.infocard--dark .ico-wrap{ background:rgba(255,255,255,.1); color:var(--sun); }

/* ---------- Account ---------- */
.auth{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:64rem; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.auth__art{ position:relative; background:var(--indigo); color:#fff; padding:clamp(1.75rem,4vw,2.75rem); display:flex; flex-direction:column; justify-content:flex-end; min-height:26rem; overflow:hidden; }
.auth__art .grid4{ position:absolute; inset:-10% -20% auto auto; width:90%; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; transform:rotate(-10deg); opacity:.85; }
.auth__art .grid4 img{ border-radius:.8rem; }
.auth__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--indigo) 30%, rgba(36,31,73,.2) 75%, transparent); }
.auth__art h2, .auth__art p{ z-index:1; }
.auth__art h2{ position:relative; color:#fff; font-size:1.7rem; }
.auth__art p{ position:relative; color:#DCD8F0; margin:0; }
.auth__form{ padding:clamp(1.75rem,4vw,2.75rem); }
.tabs{ display:flex; gap:.4rem; padding:.3rem; border-radius:100px; background:var(--surface-2); margin-bottom:1.5rem; }
.tabs a{ flex:1; text-align:center; padding:.6rem; border-radius:100px; text-decoration:none; color:var(--ink); font-weight:600; }
.tabs a[aria-current="page"]{ background:var(--surface); box-shadow:var(--shadow-sm); }
.dash{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1.5rem; align-items:start; }
.dash__card{ padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.dash__card h2{ font-size:1.3rem; }
.status{ display:flex; gap:1.25rem; align-items:center; }
.ring{ --p:50; width:6.5rem; height:6.5rem; border-radius:50%; background:conic-gradient(var(--coral) calc(var(--p) * 1%), var(--surface-2) 0); display:grid; place-items:center; flex:none; }
.ring span{ width:5rem; height:5rem; border-radius:50%; background:var(--surface); display:grid; place-content:center; text-align:center; line-height:1.1; font-size:.72rem; color:var(--muted); }
.ring b{ font:800 1.6rem/1 var(--display); color:var(--ink); }
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.kpi{ padding:1.1rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
.kpi b{ display:block; font:800 1.65rem/1 var(--display); }
.kpi span{ font-size:.85rem; color:var(--muted); }
.ht-note, .note{ color:var(--muted); }

/* ---------- Legal ---------- */
.legal{ display:grid; grid-template-columns:15rem minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.legal__nav{ position:sticky; top:6rem; display:grid; gap:.3rem; }
.legal__nav a{ display:block; padding:.7rem 1rem; border-radius:var(--r-sm); color:var(--ink); text-decoration:none; font-weight:600; }
.legal__nav a:hover{ background:var(--surface-2); }
.legal__nav a[aria-current="page"]{ background:var(--indigo); color:#fff; }
.legal__doc{ padding:clamp(1.5rem,3vw,2.5rem); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); max-width:48rem; }
.legal__doc h3{ font-size:1.2rem; margin-top:1.75rem; }
.legal__doc h3:first-child{ margin-top:0; }
.legal__doc p{ color:var(--muted); }
.legal-note{ margin-top:1.5rem !important; padding:1rem; border-radius:var(--r-sm); background:var(--surface-2); font-size:.92rem; }
.eff{ color:var(--muted); font-weight:600; margin-bottom:1.5rem; }

/* ---------- 404 ---------- */
.lost{ text-align:center; padding-block:clamp(4rem,10vw,7rem); }
.lost__num{ font:800 clamp(6rem,18vw,11rem)/.9 var(--display); letter-spacing:-.06em; background:linear-gradient(135deg,#1F5BFF,#B06BFF,#FF5A45); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; }

/* ---------- Footer ---------- */
.foot{ background:var(--indigo); color:#C8C2E8; padding:clamp(3rem,6vw,4.5rem) 0 1.5rem; margin-top:clamp(2rem,5vw,4rem); }
.foot__top{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1.3fr; gap:2rem; }
.foot__icon{ width:3.2rem; height:auto; margin-bottom:.8rem; }
.foot__name{ font:800 1.3rem/1 var(--display); color:#fff; margin-bottom:.6rem; }
.foot h2{ font:700 .8rem/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:1rem; }
.foot__col ul{ display:grid; gap:.55rem; }
.foot a{ color:#DCD8F0; text-decoration:none; }
.foot a:hover{ color:var(--sun); text-decoration:underline; }
.news{ display:flex; gap:.5rem; margin-top:1rem; }
.news input{ flex:1; min-width:0; min-height:3rem; padding:.7rem 1.1rem; border-radius:100px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:#fff; }
.news input::placeholder{ color:#B8B2DC; }
.news input:focus{ outline:none; border-color:var(--sun); }
.news__msg{ margin-top:.75rem; font-weight:600; }
.news__msg--ok{ color:#9FE0B5; } .news__msg--error{ color:#FFB4A8; }
.foot :focus-visible{ outline-color:var(--sun); }
.foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 2rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#B8B2DC; }
.foot__base p{ margin:0; }

/* ---------- Floating mini-player ---------- */
.player{ position:fixed; z-index:90; left:50%; bottom:max(1rem, env(safe-area-inset-bottom)); transform:translate(-50%, 140%); width:min(52rem, calc(100% - 2rem - 9.5rem)); margin-left:0; display:grid; grid-template-columns:3.25rem minmax(0,1fr) auto minmax(0,1.3fr) auto; gap:.9rem; align-items:center; padding:.55rem 1rem .55rem .55rem; border-radius:100px; background:rgba(36,31,73,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#fff; box-shadow:0 18px 44px rgba(20,16,50,.4); visibility:hidden; transition:transform .5s var(--ease), visibility 0s linear .5s; }
.player.has-track{ transform:translate(-50%, 0); visibility:visible; transition:transform .5s var(--ease), visibility 0s; }
html:has(.player.has-track) .foot{ padding-bottom:7rem; }
html:has(.player.has-track){ --a11y-bottom:6.25rem; }
.player__art{ width:3.25rem; height:3.25rem; border-radius:50%; object-fit:cover; }
.is-playing .player__art{ animation:spin 8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.player__meta{ min-width:0; }
.player__meta p{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__title{ font:700 .98rem/1.2 var(--display); }
.player__artist{ font-size:.8rem; color:#C8C2E8; }
.player__ctrl{ display:flex; align-items:center; gap:.2rem; }
.player__btn{ width:2.5rem; height:2.5rem; border-radius:50%; border:0; background:none; color:#fff; display:grid; place-items:center; }
.player__btn:hover{ background:rgba(255,255,255,.12); }
.player__btn--main{ width:2.9rem; height:2.9rem; background:#fff; color:var(--indigo); }
.player__btn--main:hover{ background:var(--sun); }
.player__btn--main.is-playing .ico-play{ display:none; }
.player__btn--main.is-playing .ico-pause{ display:block; }
.player__bar{ display:flex; align-items:center; gap:.6rem; font-size:.75rem; color:#C8C2E8; font-variant-numeric:tabular-nums; }
.player__bar input{ flex:1; min-width:0; appearance:none; height:1.5rem; background:none; }
.player__bar input::-webkit-slider-runnable-track{ height:4px; border-radius:4px; background:linear-gradient(90deg, var(--coral) var(--pct,0%), rgba(255,255,255,.2) var(--pct,0%)); }
.player__bar input::-moz-range-track{ height:4px; border-radius:4px; background:linear-gradient(90deg, var(--coral) var(--pct,0%), rgba(255,255,255,.2) var(--pct,0%)); }
.player__bar input::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:#fff; }
.player__bar input::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.player__like[aria-pressed="true"]{ color:var(--coral); }
.player__note{ position:absolute; left:4.4rem; top:-1.55rem; margin:0; padding:.15rem .6rem; border-radius:100px; background:var(--sun); color:var(--ink); font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.player :focus-visible{ outline-color:var(--sun); }
@media (max-width:760px){
  .player{ grid-template-columns:3rem minmax(0,1fr) auto auto; border-radius:1.25rem; width:calc(100% - 1.5rem - 8.6rem); margin-left:0; padding:.5rem .6rem; gap:.6rem; }
  .player__bar{ position:absolute; left:1.1rem; right:1.1rem; bottom:.1rem; }
  .player__bar span{ display:none; }
  .player__bar input{ height:.6rem; }
  .player__art{ width:3rem; height:3rem; border-radius:.75rem; }
  .player__ctrl [data-player-prev]{ display:none; }
  .player__note{ display:none; }
}

/* ---------- Dialog, toasts, cookie ---------- */
.ht-dialog{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1rem; }
.ht-dialog__scrim{ position:absolute; inset:0; background:rgba(22,18,40,.55); opacity:0; transition:opacity .25s; }
.ht-dialog__box{ position:relative; width:min(30rem,100%); max-height:calc(100vh - 2rem); overflow-y:auto; padding:1.75rem; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-lg); transform:translateY(12px) scale(.98); opacity:0; transition:transform .3s var(--ease), opacity .25s; }
.ht-dialog.is-open .ht-dialog__scrim{ opacity:1; }
.ht-dialog.is-open .ht-dialog__box{ transform:none; opacity:1; }
.ht-dialog__x{ position:absolute; right:1rem; top:1rem; width:2.5rem; height:2.5rem; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); font-size:1.4rem; line-height:1; }
.ht-dialog__title{ font-size:1.5rem; padding-right:2.5rem; }
.ht-dialog__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.ht-swatches{ display:flex; gap:.6rem; flex-wrap:wrap; }
.ht-swatch{ position:relative; }
.ht-swatch input{ position:absolute; opacity:0; width:2.5rem; height:2.5rem; margin:0; cursor:pointer; }
.ht-swatch span:first-of-type{ display:block; width:2.5rem; height:2.5rem; border-radius:50%; border:3px solid transparent; box-shadow:0 0 0 1px var(--line); }
.ht-swatch input:checked + span{ border-color:var(--surface); box-shadow:0 0 0 3px var(--ink); }
.ht-swatch input:focus-visible + span{ outline:3px solid var(--indigo); outline-offset:3px; }
.ht-check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; }
.ht-check input{ width:1.2rem; height:1.2rem; margin-top:.2rem; accent-color:var(--indigo); }
.ht-picklist{ display:grid; gap:.4rem; }
.ht-pick{ width:100%; display:flex; align-items:center; gap:.8rem; padding:.7rem; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface); text-align:left; font-weight:600; }
.ht-pick:hover:not(:disabled){ border-color:var(--ink); }
.ht-pick:disabled{ opacity:.55; cursor:default; }
.ht-pick__sw{ width:2rem; height:2rem; border-radius:.5rem; flex:none; }
.ht-share{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.ht-share a{ display:inline-block; padding:.55rem 1rem; border-radius:100px; background:var(--surface-2); color:var(--ink); font-weight:600; text-decoration:none; }
.ht-share a:hover{ background:var(--indigo); color:#fff; }
.ht-toasts{ position:fixed; z-index:1100; left:50%; top:5.5rem; transform:translateX(-50%); display:grid; gap:.5rem; justify-items:center; pointer-events:none; }
.ht-toast{ padding:.7rem 1.2rem; border-radius:100px; background:var(--ink); color:#fff; font-weight:600; font-size:.9rem; box-shadow:var(--shadow-lg); animation:toast .3s var(--ease); }
.ht-toast.is-out{ opacity:0; transform:translateY(-6px); transition:.3s; }
@keyframes toast{ from{ opacity:0; transform:translateY(-8px); } }
body.has-dialog{ overflow:hidden; }
.cookie{ position:fixed; z-index:95; left:1rem; bottom:calc(var(--a11y-bottom, 1.25rem) + 4.25rem); width:min(24rem, calc(100% - 6rem)); padding:1.1rem 1.2rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); font-size:.88rem; }
.cookie p{ margin-bottom:.8rem; color:var(--muted); }
.cookie__btns{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---------- Reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
html.a11y-still .reveal{ opacity:1 !important; transform:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail{ grid-auto-columns:minmax(13rem, calc((100% - 2.5rem) / 3)); }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .plan{ grid-template-columns:auto 1fr; }
  .plan__cta{ grid-column:1 / -1; justify-items:start; grid-auto-flow:column; align-items:center; gap:1.25rem; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .hero__grid, .duo, .story__grid, .djpromo, .dj, .price, .about, .contact, .dash, .legal{ grid-template-columns:1fr; }
  .hero__stage{ max-width:28rem; }
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento__item:nth-child(1){ grid-column:span 2; grid-row:span 1; min-height:13rem; }
  .bento__item:nth-child(4){ grid-column:span 2; }   /* four tiles: 1 wide, 2+3, 4 wide */
  .bento__item:nth-child(5), .bento__item:nth-child(6){ grid-column:span 1; }
  .posts{ grid-template-columns:1fr; }
  .post--lead{ grid-row:auto; }
  .dj__panel, .about__art, .legal__nav{ position:static; }
  .about__art{ grid-template-columns:repeat(4,1fr); }
  .about__art img:nth-child(2n){ transform:none; }
  .pillars{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid .post:first-child{ grid-template-columns:1fr; }
  .auth{ grid-template-columns:1fr; }
  .auth__art{ min-height:13rem; }
  .legal__nav{ grid-auto-flow:column; overflow-x:auto; }
  .lib-bar{ top:4.7rem; }
}
@media (max-width:600px){
  .cards--4{ gap:.8rem; }
  .card{ padding:.5rem; }
  .card__body{ padding:.6rem .2rem 0; }
  .card__title{ font-size:.95rem; }
  .card__meta{ display:none; }
  .card__play{ width:2.6rem; height:2.6rem; right:.5rem; bottom:.5rem; }
  .card__acts{ top:.8rem; right:.8rem; }
  .rail{ grid-auto-columns:72%; }
  .cards--lib{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .bento{ grid-template-columns:1fr 1fr; grid-auto-rows:minmax(8.5rem,auto); gap:.7rem; }
  .genre{ padding:1rem; }
  .genre__desc{ display:none; }
  .bento__item:nth-child(1) .genre__desc{ display:block; }
  .chart__row{ grid-template-columns:1.5rem 3rem 1fr; gap:.7rem; }
  .chart__play{ width:3rem; height:3rem; }
  .chart__plays{ display:none; }
  .fresh__item{ grid-template-columns:4.2rem 1fr auto; gap:.75rem; }
  .fresh__item img{ width:4.2rem; height:4.2rem; }
  .plan{ grid-template-columns:1fr; text-align:left; }
  .plan__cta{ grid-auto-flow:row; justify-items:stretch; }
  .post{ grid-template-columns:6.5rem 1fr; }
  .post--lead{ grid-template-columns:1fr; }
  .post__ex{ display:none !important; }
  .post--lead .post__ex{ display:block !important; }
  .foot__top{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .lib-bar{ grid-template-columns:1fr; position:static; }
  .kpis{ gap:.6rem; }
  .story__stat{ max-width:10rem; padding:.8rem; }
  .story__stat b{ font-size:1.9rem; }
  .seal{ width:5rem; height:5rem; }
  .seal b{ font-size:1.6rem; }
  .nowcard{ left:0; bottom:0; }
  .hero__facts{ gap:.5rem 1rem; }
  .btn--lg{ flex:1 1 auto; }
  .about__art{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
}
body.menu-open .a11y, body.menu-open .chat{ display:none; }

/* ==========================================================================
   Light / dark theme
   partials/theme-boot.php sets html[data-theme] before first paint. Colors
   are tokens, so most of the site switches through the variables below;
   the rules after them cover the few places that used fixed colors.
   ========================================================================== */
:root{ --foot-bg:var(--indigo); --nav-glass:rgba(255,255,255,.86); --bar-glass:rgba(251,247,241,.92); --on-sun:#211B15; --focus:#241F49; --field-focus:rgba(36,31,73,.12); }
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#14112A; --surface:#1D1938; --surface-2:#272246; --line:#393259;
  --ink:#F4EFE6; --muted:#ADA6C8;
  --coral-ink:#FF8D7B; --coral-tint:rgba(255,90,69,.16);
  --indigo:#342C76; --indigo-2:#473D9B;
  --good:#5CC689; --bad:#FF7B6C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 10px 28px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.25);
  --shadow-lg:0 22px 54px rgba(0,0,0,.5);
  --foot-bg:#0E0C1F; --nav-glass:rgba(29,25,56,.82); --bar-glass:rgba(20,17,42,.9);
  --focus:#FFD36E; --field-focus:rgba(255,211,110,.18);
  --a11y-accent:#473D9B; --a11y-bg:#1D1938; --a11y-ink:#F4EFE6;
}
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}
:focus-visible{ outline-color:var(--focus); }
.foot{ background:var(--foot-bg); }
html[data-theme="dark"] .foot{ border-top:1px solid var(--line); }
.nav__pill{ background:var(--nav-glass); }
.lib-bar{ background:var(--bar-glass); }
.search input:focus, .field input:focus, .field textarea:focus, .ht-field input:focus, .ht-field textarea:focus, .pl-invite input:focus{ border-color:var(--focus); box-shadow:0 0 0 4px var(--field-focus); }
.seal, .price__trial, .player__note, .btn--light:hover, .bento__item:nth-child(5) .genre{ color:var(--on-sun); }
.logo-on-dark{ display:none !important; }
html[data-theme="dark"] .logo-on-light{ display:none !important; }
html[data-theme="dark"] .logo-on-dark{ display:block !important; }
html[data-theme="dark"] .nowcard{ background:rgba(29,25,56,.9); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .card__acts .icon-btn{ background:rgba(29,25,56,.92); }
html[data-theme="dark"] .select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EFE6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ht-toast{ background:#F4EFE6; color:#14112A; }
html[data-theme="dark"] .alert--ok{ color:#A6E6BF; background:rgba(92,198,137,.12); border-color:rgba(92,198,137,.4); }
html[data-theme="dark"] .alert--err{ color:#FFB3A8; background:rgba(255,123,108,.12); border-color:rgba(255,123,108,.45); }
html[data-theme="dark"] .error, html[data-theme="dark"] .ht-error{ color:#FFA396; }
html[data-theme="dark"] .ht-btn--danger{ color:#FF9C8F; border-color:#FF9C8F; }
html[data-theme="dark"] .ht-btn--danger:hover{ background:#FF9C8F; color:#14112A; }
html[data-theme="dark"] .player{ background:rgba(40,34,88,.95); border:1px solid rgba(255,255,255,.08); }
html[data-theme="dark"] .round-btn{ background:var(--indigo-2); }
html[data-theme="dark"] .hero::before{ background:radial-gradient(circle, rgba(255,90,69,.2), transparent 62%); }
html[data-theme="dark"] .story__stat, html[data-theme="dark"] .djpromo, html[data-theme="dark"] .price__card, html[data-theme="dark"] .dj__panel, html[data-theme="dark"] .auth__art{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="dark"] .ht-dialog__scrim{ background:rgba(6,5,16,.7); }
html[data-theme="dark"] .empty{ border-color:var(--line); }
html[data-theme="dark"] img[src$=".svg"]{ filter:none; }

/* The switch */
.theme-toggle{ flex:none; display:inline-grid; place-items:center; height:2.6rem; padding:0 .15rem; border:0; background:none; border-radius:100px; color:var(--ink); cursor:pointer; }
.theme-toggle__track{ position:relative; display:block; width:3.3rem; height:1.95rem; border-radius:100px; background:var(--surface-2); border:1px solid var(--line); transition:background-color .35s ease, border-color .35s ease; }
.theme-toggle__thumb{ position:absolute; top:.17rem; left:.17rem; width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; background:#fff; color:#C98A0C; box-shadow:0 1px 3px rgba(33,27,21,.25); transition:transform .45s var(--ease), background-color .35s ease, color .35s ease; }
.theme-toggle__thumb .ico{ position:absolute; width:.95rem; height:.95rem; transition:opacity .3s ease, transform .45s var(--ease); }
.theme-toggle__moon{ opacity:0; transform:rotate(-70deg) scale(.5); }
.theme-toggle:hover .theme-toggle__track{ border-color:var(--muted); }
html[data-theme="dark"] .theme-toggle__track{ background:var(--indigo-2); border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .theme-toggle__thumb{ transform:translateX(1.33rem); background:#15122C; color:var(--sun); box-shadow:0 1px 3px rgba(0,0,0,.5); }
html[data-theme="dark"] .theme-toggle__sun{ opacity:0; transform:rotate(70deg) scale(.5); }
html[data-theme="dark"] .theme-toggle__moon{ opacity:1; transform:none; }
.theme-toggle:focus-visible{ outline-offset:1px; }

/* ==========================================================================
   Mobile / tablet tab bar + "More" sheet (below 1081px, where the desktop
   links are hidden). Same pattern as Concept 2, drawn in Encore's style.
   ========================================================================== */
:root{ --tabbar-h:4.4rem; }
.tabbar, .moresheet{ display:none; }
@media (max-width:1080px){
  .nav__menu, .nav__icon--dj{ display:none !important; }
  .tabbar{ position:fixed; z-index:85; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding:0 max(.35rem, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(.35rem, env(safe-area-inset-right)); background:var(--nav-glass); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(33,27,21,.06); }
  .tabbar__item{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; min-width:0; padding:0; border:0; background:none; color:var(--muted); text-decoration:none; font:600 .7rem/1.1 var(--body); letter-spacing:.01em; -webkit-tap-highlight-color:transparent; }
  .tabbar__icon{ display:grid; place-items:center; width:3.5rem; height:2rem; border-radius:100px; transition:background-color .25s ease, color .25s ease, transform .25s var(--ease); }
  .tabbar__icon .ico{ width:1.35rem; height:1.35rem; }
  .tabbar__item span:last-child{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabbar__item:hover{ color:var(--ink); }
  .tabbar__item:active .tabbar__icon{ transform:scale(.92); }
  .tabbar__item[aria-current="page"], .tabbar__item.is-active, .tabbar__item[aria-expanded="true"]{ color:var(--ink); }
  .tabbar__item[aria-current="page"] .tabbar__icon, .tabbar__item.is-active .tabbar__icon, .tabbar__item[aria-expanded="true"] .tabbar__icon{ background:var(--coral-tint); color:var(--coral-ink); }
  .tabbar__item--dj .tabbar__icon .ico{ color:var(--coral-ink); }
  .tabbar__item:focus-visible{ outline-offset:-4px; border-radius:.75rem; }
  html[data-theme="dark"] .tabbar{ box-shadow:0 -6px 24px rgba(0,0,0,.35); }

  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  :root{ --a11y-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .9rem); }
  html:has(.player.has-track){ --a11y-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 5.4rem); }
  .player{ bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .7rem); width:min(52rem, calc(100% - 1.5rem)); margin-left:0; }
  html:has(.player.has-track) .foot{ padding-bottom:6.5rem; }
  .cookie{ bottom:calc(var(--a11y-bottom) + 4rem); width:min(24rem, calc(100% - 2rem)); }
  .foot{ margin-bottom:0; }

  .moresheet{ position:fixed; inset:0; z-index:300; display:block; }
  .moresheet[hidden]{ display:none !important; }
  .moresheet__scrim{ position:absolute; inset:0; background:rgba(22,18,40,.5); opacity:0; transition:opacity .3s ease; }
  .moresheet__panel{ position:absolute; left:0; right:0; bottom:0; max-height:calc(100dvh - 3rem); overflow-y:auto; overscroll-behavior:contain; padding:.6rem var(--gut) calc(1.25rem + env(safe-area-inset-bottom)); background:var(--surface); border-radius:1.5rem 1.5rem 0 0; box-shadow:0 -18px 50px rgba(20,16,50,.25); transform:translateY(100%); transition:transform .4s var(--ease); }
  .moresheet.is-open .moresheet__scrim{ opacity:1; }
  .moresheet.is-open .moresheet__panel{ transform:none; }
  .moresheet__grab{ width:2.6rem; height:.3rem; margin:0 auto .8rem; border-radius:3px; background:var(--line); }
  .moresheet__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
  .moresheet__head h2{ margin:0; font-size:1.6rem; }
  .moresheet__links{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:.5rem 0 1rem; }
  .moresheet__links a{ display:flex; align-items:center; gap:.7rem; min-height:3.4rem; padding:.7rem .9rem; border-radius:var(--r); background:var(--surface-2); color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem; transition:background-color .2s, transform .2s var(--ease); }
  .moresheet__links a .ico{ color:var(--coral-ink); width:1.2rem; height:1.2rem; }
  .moresheet__links a:hover{ background:var(--line); }
  .moresheet__links a:active{ transform:scale(.98); }
  .moresheet__links a[aria-current="page"]{ background:var(--indigo); color:#fff; }
  .moresheet__links a[aria-current="page"] .ico{ color:var(--sun); }
  .moresheet__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .9rem; border-radius:var(--r); border:1px solid var(--line); margin-bottom:1rem; }
  .moresheet__row p{ margin:0; font-weight:600; }
  .moresheet__row small{ display:block; font-weight:400; color:var(--muted); font-size:.82rem; }
  .moresheet__legal{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin:0 0 1rem; font-size:.88rem; }
  .moresheet__legal a{ color:var(--muted); }
  body.more-open{ overflow:hidden; }
  body.more-open .a11y, body.more-open .chat{ display:none; }
}
@media (max-width:360px){
  .tabbar__icon{ width:3rem; }
  .tabbar__item{ font-size:.66rem; }
  .moresheet__links{ grid-template-columns:1fr; }
}
@media (min-width:1081px){ .tabbar, .moresheet{ display:none !important; } }
@media print{ .tabbar, .moresheet, .theme-toggle{ display:none !important; } }

/* ==========================================================================
   Member billing (account page)
   ========================================================================== */
.bill__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin-bottom:1rem; }
.bill__head h2{ margin:0; }
.bill__demo{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .75rem; border-radius:99px; background:var(--surface-2); color:var(--muted); font-size:.8rem; font-weight:600; }
.bill__demo::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--sun); }
.bill__demo--stripe::before{ display:none; }
.bill__demo--stripe .ico{ width:.95rem; height:.95rem; color:#635BFF; }
html[data-theme="dark"] .bill__demo--stripe .ico{ color:#A7A2FF; }
.bill__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:1.25rem; }
.bill__plan,.bill__method{ min-width:0; padding:1.25rem; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line); }
.bill__label{ margin:0 0 .4rem; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bill__price{ margin:0 0 .2rem; font-family:var(--display); font-size:1.1rem; }
.bill__price b{ font-size:2.2rem; letter-spacing:-.03em; }
.bill__status{ display:inline-flex; margin:.2rem 0 .8rem; padding:.25rem .7rem; border-radius:99px; font-size:.82rem; font-weight:700; background:var(--line); color:var(--ink); }
.bill__status--active{ background:#3F8F5F22; color:#2C6B45; }
.bill__status--trial{ background:#F4B94233; color:#7A5610; }
.bill__status--cancelled,.bill__status--expired{ background:#D1483B1A; color:#9E3127; }
.bill__plan form,.bill__method .btn-row{ margin-top:.9rem; }
.bill__method .btn-row form{ margin:0; }
.minicard{ position:relative; display:grid; gap:.3rem; max-width:22rem; aspect-ratio:1.7; padding:1.1rem 1.2rem; border-radius:var(--r); color:#fff; background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-2) 60%,#5B3FA0 100%); box-shadow:var(--shadow); overflow:hidden; align-content:end; }
.minicard::after{ content:""; position:absolute; width:12rem; height:12rem; right:-4rem; top:-5rem; border-radius:50%; background:radial-gradient(circle,rgba(255,90,69,.55),transparent 65%); }
.minicard__brand{ position:absolute; top:1rem; left:1.2rem; font-family:var(--display); font-weight:800; font-size:1.1rem; letter-spacing:.02em; }
.minicard__num{ font-family:var(--display); font-size:1.35rem; letter-spacing:.08em; position:relative; z-index:1; }
.minicard__meta{ font-size:.82rem; opacity:.85; position:relative; z-index:1; }
.minicard__default{ position:absolute; top:1rem; right:1rem; z-index:1; padding:.15rem .55rem; border-radius:99px; background:var(--sun); color:#241F49; font-size:.72rem; font-weight:800; }
.cardform{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.bill__sub{ margin:1.6rem 0 .7rem; font-size:1.05rem; }
.bill__tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.bill__table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:34rem; }
.bill__table th,.bill__table td{ padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.bill__table th{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); }
.bill__table tr:last-child td{ border-bottom:0; }
.bill__pill{ display:inline-block; padding:.15rem .6rem; border-radius:99px; font-size:.78rem; font-weight:700; background:#3F8F5F22; color:#2C6B45; }
.bill__pill--refunded,.bill__pill--failed{ background:#D1483B1A; color:#9E3127; }
@media (max-width:860px){ .bill__grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .bill__table{ min-width:0; }
  .bill__table, .bill__table tbody{ display:block; }
  .bill__tablewrap{ overflow:visible; }
  .bill__table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .bill__table tr{ display:grid; grid-template-columns:1fr auto; gap:.2rem .75rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
  .bill__table tr:last-child{ border-bottom:0; }
  .bill__table td{ padding:0; border:0; white-space:normal; }
  .bill__table td:nth-child(2){ grid-column:1 / -1; order:-1; font-weight:600; }
  .bill__table td:nth-child(5){ color:var(--muted); font-size:.82rem; }
  .minicard{ max-width:none; }
}
html[data-theme="dark"] .bill__status--active,html[data-theme="dark"] .bill__pill{ background:rgba(110,210,150,.14); color:#8FE0AE; }
html[data-theme="dark"] .bill__status--trial{ background:rgba(244,185,66,.16); color:#FFD27A; }
html[data-theme="dark"] .bill__status--cancelled,html[data-theme="dark"] .bill__status--expired,html[data-theme="dark"] .bill__pill--refunded,html[data-theme="dark"] .bill__pill--failed{ background:rgba(255,123,108,.12); color:#FFB3A8; }
html[data-theme="dark"] .minicard{ background:linear-gradient(135deg,#2E2766 0%,#46398F 60%,#6A4BB5 100%); }
/* Footer never wider than small phones */
.foot__top > *{ min-width:0; }
@media (max-width:600px){ .foot__top{ grid-template-columns:minmax(0,1fr); } .news{ flex-wrap:wrap; } .news input{ flex:1 1 12rem; } }
.dash > *{ min-width:0; }
.status{ flex-wrap:wrap; } .status > *{ min-width:0; }

/* Adult (18+) song label - small tag after the title, uses the existing coral tokens */
.age-tag{ display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border-radius:6px; border:1.5px solid var(--coral-ink); color:var(--coral-ink); font:700 .68rem/1.3 var(--body); letter-spacing:.02em; vertical-align:.15em; white-space:nowrap; }
html[data-theme="dark"] .age-tag{ border-color:var(--coral); color:var(--coral); }
.field input[type="date"]{ font:inherit; color:inherit; }

/* Developer credit - final footer line, same size/colour as the footer base line */
.foot__credit{ margin-top:1rem; font-size:.85rem; color:#B8B2DC; text-align:center; }
.foot__credit p{ margin:0; overflow-wrap:anywhere; }
.foot__credit a{ white-space:nowrap; }

/* ---------- New Heard That! logo (wide ear + lettering) ---------- */
.nav__brand{ display:flex; align-items:center; line-height:0; }
.nav__brand img{ height:3.5rem; width:auto; max-width:none; margin-block:-.6rem; }
@media (max-width:520px){ .nav__brand img{ height:3rem; margin-block:-.45rem; } }
.foot__logo{ display:inline-block; margin-bottom:.9rem; line-height:0; }
.foot__logo img{ width:min(15rem,100%); height:auto; }
.sheet__logo{ height:2.4rem; }

/* ---------- Legal pages: lists from the policy document ---------- */
.legal__doc ul{ margin:.4rem 0 1.1rem; padding-left:1.3rem; display:grid; gap:.45rem; color:var(--muted); }
.legal__doc li{ padding-left:.2rem; }
.legal__doc li::marker{ color:var(--coral); }
.legal__doc strong{ color:var(--ink); }
.legal__doc a{ color:var(--indigo-2, var(--indigo)); text-decoration:underline; text-underline-offset:.15em; }
html[data-theme="dark"] .legal__doc a{ color:var(--sun); }

/* ---------- Family & Friends access (My Account) ---------- */
.bill__status--friends{ background:#E244871F; color:#A3245C; }
html[data-theme="dark"] .bill__status--friends{ background:rgba(255,124,174,.16); color:#FFB0CE; }

/* ---------- Language switch (EN / ES) ---------- */
.lang-switch{ flex:none; display:inline-flex; align-items:center; padding:.2rem; border:1px solid var(--line); border-radius:100px; background:var(--surface, #fff); }
.lang-switch a{ display:inline-grid; place-items:center; min-width:2.2rem; height:2rem; padding:0 .5rem; border-radius:100px; color:var(--muted); font:700 .78rem/1 var(--body, inherit); letter-spacing:.06em; text-decoration:none; transition:background-color .2s, color .2s; }
.lang-switch a:hover{ color:var(--ink); background:var(--surface-2); }
.lang-switch a[aria-current="true"]{ background:var(--indigo); color:#fff; }
html[data-theme="dark"] .lang-switch{ background:rgba(255,255,255,.04); }
html[data-theme="dark"] .lang-switch a[aria-current="true"]{ background:var(--sun); color:#241F49; }
.lang-switch a:focus-visible{ outline:3px solid var(--focus, #3A3170); outline-offset:2px; }
.nav__lang{ margin-right:.15rem; }
@media (max-width:420px){ .nav__lang a{ min-width:1.9rem; padding:0 .35rem; } }
/* Spanish-only notes (e.g. courtesy translation on legal pages) */
[data-lang-only]{ display:none; }
html[data-lang="es"] [data-lang-only="es"]{ display:block; }
.legal__doc [data-lang-only] + h3{ margin-top:0; }
/* Keep the header on one line with the EN/ES switch */
@media (min-width:1081px) and (max-width:1300px){
  .nav__pill{ gap:.6rem; }
  .nav__brand img{ height:2.9rem; margin-block:-.4rem; }
  .nav__links ul{ gap:0; }
  .nav__links a{ padding:.45rem .42rem; font-size:.83rem; }
  .lang-switch a{ min-width:1.85rem; padding:0 .35rem; }
}
/* Small phones: the theme switch lives in the More menu instead */
@media (max-width:430px){ .nav__theme{ display:none; } }

/* ============================================================
   Help chat (bottom-right). The accessibility button is bottom-left.
   ============================================================ */
.chat{ position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:var(--a11y-bottom, 20px); z-index:8990; font-family:var(--body); }
.chat__fab{ width:58px; height:58px; padding:0; border-radius:50%; border:3px solid #fff; background:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.28); transition:transform .2s ease; }
.chat__fab img{ width:38px; height:auto; display:block; }
.chat__fab:hover{ transform:scale(1.06); }
.chat__fab:focus-visible{ outline:3px solid #FFB000; outline-offset:3px; }
.chat.is-open .chat__fab{ box-shadow:0 0 0 3px var(--coral), 0 10px 26px rgba(0,0,0,.28); }
.chat__panel{ position:absolute; right:0; bottom:70px; width:min(370px, calc(100vw - 32px)); height:min(540px, calc(100vh - 140px)); display:flex; flex-direction:column; overflow:hidden; border-radius:20px; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:0 24px 60px rgba(20,16,50,.35); animation:chatIn .22s ease-out; }
.chat__panel[hidden]{ display:none; }
@keyframes chatIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.chat__head{ display:flex; align-items:center; gap:.7rem; padding:.85rem .9rem .85rem 1rem; background:var(--indigo); color:#fff; }
.chat__logo{ width:40px; height:auto; flex:none; padding:4px; border-radius:12px; background:#fff; }
.chat__headtext{ min-width:0; flex:1; }
.chat__head h2{ margin:0; font:700 1rem/1.2 var(--display); color:#fff; letter-spacing:0; text-transform:none; }
.chat__head p{ margin:.15rem 0 0; font-size:.78rem; line-height:1.3; color:#C8C2E8; }
.chat__close{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:none; color:#fff; display:grid; place-items:center; cursor:pointer; }
.chat__close .ico{ width:18px; height:18px; }
.chat__close:focus-visible{ outline:3px solid #FFB000; outline-offset:2px; }
.chat__log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--bg); overscroll-behavior:contain; }
.chat__msg{ max-width:88%; padding:.65rem .85rem; border-radius:16px; font-size:.9rem; line-height:1.5; overflow-wrap:anywhere; }
.chat__msg--bot{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:5px; }
.chat__msg--user{ align-self:flex-end; background:var(--indigo); color:#fff; border-bottom-right-radius:5px; }
.chat__msg a{ color:var(--coral-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.chat__chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chat__chip{ padding:.45rem .75rem; min-height:36px; border-radius:99px; border:1.5px solid var(--indigo-2); background:var(--surface); color:var(--ink); font:600 .8rem/1.25 var(--body); text-align:left; cursor:pointer; transition:background .15s, color .15s; }
.chat__chip:hover{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.chat__chip:focus-visible{ outline:3px solid var(--focus, #241F49); outline-offset:2px; }
.chat__form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--line); background:var(--surface); }
.chat__form input{ flex:1; min-width:0; height:44px; padding:0 .9rem; border-radius:99px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font:400 .92rem var(--body); }
.chat__form input:focus{ outline:none; border-color:var(--indigo-2); box-shadow:0 0 0 3px var(--field-focus, rgba(36,31,73,.12)); }
.chat__send{ flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--coral-btn); color:#fff; display:grid; place-items:center; cursor:pointer; }
.chat__send:hover{ background:var(--coral-btn-h); }
.chat__send .ico{ width:20px; height:20px; }
.chat__send:focus-visible{ outline:3px solid var(--focus, #241F49); outline-offset:2px; }
.chat__typing{ display:inline-flex; gap:4px; padding:.2rem 0; }
.chat__typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:chatDot 1s infinite ease-in-out; }
.chat__typing i:nth-child(2){ animation-delay:.15s; } .chat__typing i:nth-child(3){ animation-delay:.3s; }
@keyframes chatDot{ 0%,80%,100%{ opacity:.3; transform:none; } 40%{ opacity:1; transform:translateY(-3px); } }
html[data-theme="dark"] .chat__chip{ border-color:#6F63C9; }
html[data-theme="dark"] .chat__msg a{ color:#FF9B8C; }
html.a11y-still .chat__panel, html.a11y-still .chat__typing i{ animation:none; }
@media (prefers-reduced-motion:reduce){ .chat__panel, .chat__typing i{ animation:none; } }
@media (max-width:600px){
  .chat__fab{ width:52px; height:52px; } .chat__fab img{ width:34px; }
  .chat__panel{ bottom:62px; height:min(520px, calc(100vh - 190px)); }
}
@media print{ .chat{ display:none; } }

/* ---------- Player status (real audio) ---------- */
.player__note:empty{ display:none; }
.player.is-buffering .player__btn--main{ animation:ht-pulse 1s ease-in-out infinite; }
@keyframes ht-pulse{ 50%{ opacity:.55; } }