/* LUX MUSIC / ORIGINAL PREMIUM EDITORIAL PAGES / 2026-11-08
   Original Lux artwork is page atmosphere only. Official artist portraits,
   release covers, film posters and videos remain unchanged and uncropped.
*/
.view[data-lux-art="home"]{--luxm-bg:url('/assets/luxm-premium-home-20261108.webp');--luxm-accent:#e8b84b}
.view[data-lux-art="search"]{--luxm-bg:url('/assets/luxm-premium-search-20261108.webp');--luxm-accent:#55bed9}
.view[data-lux-art="releases"]{--luxm-bg:url('/assets/luxm-premium-releases-20261108.webp');--luxm-accent:#e8b84b}
.view[data-lux-art="discover"]{--luxm-bg:url('/assets/luxm-premium-discover-20261108.webp');--luxm-accent:#e4a26e}
.view[data-lux-art="artists"]{--luxm-bg:url('/assets/luxm-premium-artists-20261108.webp');--luxm-accent:#e58cbf}
.view[data-lux-art="playlists"]{--luxm-bg:url('/assets/luxm-premium-playlists-20261108.webp');--luxm-accent:#e8b566}
.view[data-lux-art="movies"]{--luxm-bg:url('/assets/luxm-premium-movies-20261108.webp');--luxm-accent:#5cb9d2}
.view[data-lux-art="podcasts"]{--luxm-bg:url('/assets/luxm-premium-podcasts-20261108.webp');--luxm-accent:#bb9aec}
.view[data-lux-art="videos"]{--luxm-bg:url('/assets/luxm-premium-videos-20261108.webp');--luxm-accent:#ed98d4}
.view[data-lux-art="mixes"]{--luxm-bg:url('/assets/luxm-premium-mixes-20261108.webp');--luxm-accent:#70d5b6}
.view[data-lux-art="audiobooks"]{--luxm-bg:url('/assets/luxm-premium-audiobooks-20261108.webp');--luxm-accent:#f0ca80}
.view[data-lux-art="liked"]{--luxm-bg:url('/assets/luxm-premium-liked-20261108.webp');--luxm-accent:#ef9fa8}
.view[data-lux-art="library"]{--luxm-bg:url('/assets/luxm-premium-library-20261108.webp');--luxm-accent:#eab66c}
.view[data-lux-art="earn"]{--luxm-bg:url('/assets/luxm-premium-earn-20261108.webp');--luxm-accent:#f1d48c}
.view[data-lux-art="creators"]{--luxm-bg:url('/assets/luxm-premium-creators-20261108.webp');--luxm-accent:#7ccee4}
.view[data-lux-art="listener"]{--luxm-bg:url('/assets/luxm-premium-listener-20261108.webp');--luxm-accent:#e4ab75}
.view[data-lux-art]:not([data-lux-art="listener"]){
  position:relative;
  background-color:#121212;
  background-image:linear-gradient(180deg,rgba(11,11,12,.28) 0%,rgba(13,13,14,.76) 360px,#121212 730px),var(--luxm-bg);
  background-size:100% 760px,100% 760px;
  background-position:center top,center top;
  background-repeat:no-repeat;
}
.view[data-lux-art="home"] .lux-brand-hero.compact{
  background-image:linear-gradient(100deg,#0b0b0bed 0%,#0a090acd 45%,#0b0b0b82 100%),var(--luxm-bg)!important;
  background-size:cover!important;
  background-position:center 43%!important;
  border:1px solid #c999514f;
  box-shadow:0 12px 35px #0009,inset 0 0 30px #ffcd8620;
}
.view[data-lux-art="home"]>.greet{color:#f5ebd3;text-shadow:0 2px 13px #000c}
.luxm-art-banner{
  position:relative;
  isolation:isolate;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  overflow:hidden;
  min-height:190px;
  margin:15px 0 28px;
  padding:26px clamp(22px,3vw,40px);
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--luxm-accent) 55%,#1d1b1b);
  background-image:linear-gradient(90deg,#06080bed 2%,#090b0edb 40%,#0607096c 80%),var(--luxm-bg);
  background-size:cover;
  background-position:center;
  box-shadow:0 18px 38px #0009,inset 0 0 0 1px #ffffff0b;
}
.luxm-art-banner::before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--luxm-accent),transparent 74%);opacity:.9}
.luxm-art-banner__copy{max-width:75%;position:relative;z-index:1}
.luxm-art-banner__eyebrow{display:flex;gap:8px;align-items:center;margin:0 0 10px;letter-spacing:.18em;font:900 10px var(--ui);color:var(--luxm-accent);text-transform:uppercase}
.luxm-art-banner__eyebrow i{display:inline-block;width:23px;height:2px;background:var(--luxm-accent)}
.luxm-art-banner h2{font:900 clamp(28px,3.1vw,50px)/1.02 var(--disp);letter-spacing:.01em;margin:0 0 9px;text-shadow:0 3px 12px #000b;color:#fff0da;text-wrap:balance}
.luxm-art-banner p{font-size:clamp(12px,1vw,15px);line-height:1.57;max-width:56ch;margin:0;color:#e0d0bf;text-wrap:pretty}
.luxm-art-banner__stamp{font:900 clamp(28px,3.5vw,57px)/.75 var(--disp);text-align:center;letter-spacing:.1em;color:#e6b86c28;transform:rotate(-7deg);border:2px solid #b3934d35;padding:16px 20px;white-space:nowrap}
.luxm-art-banner__stamp b{display:block;letter-spacing:.07em;font-size:.63em;margin-top:8px}
.view[data-lux-art] .row-h{border-bottom:1px solid #d7ae6140;padding-bottom:8px}
.view[data-lux-art] .row-h .h2{color:#f6ead8}
.view[data-lux-art] .card:not(.adc){border-radius:11px;padding:12px;background:linear-gradient(145deg,#232021df,#121212b8);border:1px solid #d2a55a20;transition:background .17s,box-shadow .17s,transform .17s}
.view[data-lux-art] .card:not(.adc):hover{background:linear-gradient(145deg,#31261fde,#1a1716);border-color:#daa85b77;box-shadow:0 12px 35px #0009;transform:translateY(-3px)}
.view[data-lux-art] .card .cv{background:#171717}
.view[data-lux-art] .card .cv img{width:100%;height:100%;object-fit:contain}
.view[data-lux-art="movies"] .cinema-library{position:relative}
.view[data-lux-art="movies"] .cinema-heading,.view[data-lux-art="movies"] .cinema-collection-title{color:#fce9d1}
.view[data-lux-art="movies"] .cinema-film-card img,.view[data-lux-art="movies"] .cinema-detail-poster img{object-fit:contain}
.view[data-lux-art] .browse{gap:15px;margin-bottom:30px}
.view[data-lux-art] .browse .luxm-original-tile{
  position:relative;
  display:block;
  min-height:160px;
  border:1px solid #cfa46666;
  border-radius:15px;
  overflow:hidden;
  color:#ffeecf;
  font:900 clamp(18px,1.5vw,25px)/1.02 var(--disp);
  text-shadow:0 2px 8px #000e;
  padding:20px;
  box-shadow:0 9px 27px #0009;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.view[data-lux-art] .browse .luxm-original-tile:hover,.view[data-lux-art] .browse .luxm-original-tile:focus-visible{
  transform:translateY(-4px);
  border-color:var(--luxm-accent);
  box-shadow:0 16px 35px #000c;
}
.view[data-lux-art] .browse .luxm-original-tile::before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(130deg,#020305a1,transparent 70%);pointer-events:none}
.view[data-lux-art] .browse .luxm-original-tile img{
  position:absolute;
  right:-3%;
  bottom:-8%;
  width:46%;
  height:70%;
  transform:rotate(7deg);
  object-fit:contain;
  filter:drop-shadow(0 12px 14px #000d);
  border:1px solid #ffffff3a;
}
.view[data-lux-art] .hchips .chip,.view[data-lux-art] .cinema-category-pill{border:1px solid #d6a65443}
.view[data-lux-art] .hchips .chip:hover,.view[data-lux-art] .cinema-category-pill:hover{border-color:var(--luxm-accent)}
.view[data-lux-art] .quick .qt{border:1px solid #bb934524;background:#191511b3}
.view[data-lux-art] .quick .qt:hover{border-color:var(--luxm-accent);background:#29211aeb}
.view[data-lux-art] .lux-discovery-card{border-color:#e8bb5e40;background:linear-gradient(155deg,#211a15,#0e0e10)}
/* Preserve native player, side nav and listener-in-app full-page behavior. */
body.fan-in-app .view[data-lux-art="listener"]{background:linear-gradient(180deg,#201710,#0b0b0b 400px)!important}
@media(max-width:1050px){
  .luxm-art-banner{min-height:165px;padding:20px 22px}
  .luxm-art-banner__copy{max-width:87%}
  .luxm-art-banner__stamp{display:none}
  .view[data-lux-art] .browse{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .luxm-art-banner{margin:10px 0 20px;min-height:140px;border-radius:10px;padding:17px 19px}
  .luxm-art-banner__copy{max-width:100%}
  .luxm-art-banner__eyebrow{font-size:9px;letter-spacing:.11em}
  .luxm-art-banner h2{font-size:clamp(26px,7vw,38px)}
  .luxm-art-banner p{font-size:12px}
  .view[data-lux-art] .browse .luxm-original-tile{padding:14px;min-height:140px;font-size:20px}
  .view[data-lux-art] .card:not(.adc){padding:8px}
  .view[data-lux-art]:not([data-lux-art="listener"]){background-size:auto 660px,auto 660px}
}
@media(prefers-reduced-motion:reduce){
 .view[data-lux-art] .card:not(.adc),.view[data-lux-art] .browse .luxm-original-tile{transition:none}
 .view[data-lux-art] .card:not(.adc):hover,.view[data-lux-art] .browse .luxm-original-tile:hover{transform:none}
}
/* Accessibility: avoid a pseudo-overlay dimming browse category headings. */
.view[data-lux-art] .browse .luxm-original-tile{color:#fff5e1!important;text-shadow:0 2px 7px #000,0 0 18px #000}
.view[data-lux-art] .browse .luxm-original-tile::before{display:none}
.view[data-lux-art] .browse .luxm-original-tile:focus-visible{outline:3px solid var(--luxm-accent);outline-offset:2px}
/* Mobile grid repair: the legacy tile aspect ratio implied a 217px min-width
   when its 140px minimum height was applied in a 173px grid column. */
@media(max-width:620px){
 .view[data-lux-art] .browse{width:100%;min-width:0;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .view[data-lux-art] .browse .luxm-original-tile{aspect-ratio:auto!important;min-width:0!important;max-width:100%;width:100%;height:148px;min-height:0;padding:13px;border-radius:11px}
 .view[data-lux-art] .browse .luxm-original-tile img{max-width:50%;height:66%;right:-2%;bottom:-4%}
}

/* Nov 8: one artwork layer per section. Keep the unique artwork inside the
   featured .luxm-art-banner, not repeated behind the entire listing below.
   This also applies to the Creator Studios page shown in the founder screenshot.
   Pages WITHOUT an editorial banner retain their existing backgrounds. */
.view[data-lux-art]:has(> .luxm-art-banner){
  background-color:#111318;
  background-image:
    radial-gradient(ellipse 85% 350px at 75% 0%,color-mix(in srgb,var(--luxm-accent) 8%,transparent),transparent 70%),
    linear-gradient(180deg,#101318 0%,#141518 290px,#121212 680px);
  background-size:auto;
  background-position:top center;
  background-repeat:no-repeat;
}
/* Mobile art rules later in this file must not resize the background back
   into a second screenshot-like tile. */
@media(max-width:620px){
  .view[data-lux-art]:has(> .luxm-art-banner){background-size:auto}
}
/* The home feature uses the same Lux artwork as its page background.
   Show that artwork once, in the home feature only. */
.view[data-lux-art="home"]:has(.lux-brand-hero.compact){
  background-color:#111318;
  background-image:linear-gradient(180deg,#101318 0%,#141518 290px,#121212 680px);
  background-size:auto;
  background-position:top center;
  background-repeat:no-repeat;
}