/* arlamusic.com
   One stylesheet for every page so it is downloaded once and cached.
   Menda (c) 2023 Yukita Creative, licensed to ARLA. Menda has no weight
   below Medium (500), so 500 is the display weight and 600 the label weight. */

@font-face{font-family:'Menda';font-style:normal;font-display:swap;font-weight:500;src:url('/assets/fonts/mendamedium.woff2') format('woff2')}
@font-face{font-family:'Menda';font-style:normal;font-display:swap;font-weight:600;src:url('/assets/fonts/mendasemibold.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Theme: dark only, on purpose. The identity is the blue-lit portrait on
   black. The accent is the blue of the shirt in that photograph, so the
   whole site is lit by the same light as the picture. */
:root{
  --ink:#05070c;
  --ink-2:#0b0f17;
  --ink-3:#111724;
  --paper:#eef2f7;
  --blue:#4da9e3;          /* 7.8:1 on --ink */
  --blue-deep:#0e3a66;
  --line:rgba(238,242,247,.12);
  --line-2:rgba(238,242,247,.07);
  /* Muted greys are tuned to pass WCAG AA on --ink: --dim 7.4:1, --dimmer 5.2:1.
     Darkening them for mood breaks the 4.5:1 minimum. Measure before changing. */
  --dim:rgba(238,242,247,.64);
  --dimmer:rgba(238,242,247,.52);
  --nav-h:68px;
  --pad:clamp(20px,4.2vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  /* z-index scale: content 1, nav 200, mobile menu 150, grain 900, skip link 1000 */
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  background:var(--ink);color:var(--paper);
  font-family:'Menda',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;font-weight:500;line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* film grain: fixed, non-interactive layer, never on a scrolling element */
body::after{
  content:'';position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4,strong,b{font-weight:500}
p{max-width:65ch}
.ic{width:1em;height:1em;flex:none;fill:currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--paper);color:var(--ink);padding:12px 20px;font-size:13px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.caps{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* Cross-document view transitions: pages fade into each other and a release
   cover travels from the grid to the top of its own page. Browsers without
   support simply navigate. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .35s var(--ease-io) both}
  ::view-transition-new(root){animation:vt-in .55s var(--ease) both}
  ::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.nav{view-transition-name:nav}

/* ─── NAV ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);pointer-events:none;
}
.nav > *{pointer-events:auto}
.nav::before{
  content:'';position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,7,12,.94),rgba(5,7,12,.7) 60%,transparent);
  opacity:0;
}
.nav.solid::before{opacity:1}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .nav:not(.solid)::before{animation:fadein linear both;animation-timeline:scroll(root);animation-range:0 160px}
  }
  @media (prefers-reduced-motion:reduce){.nav::before{opacity:1}}
}
@keyframes fadein{to{opacity:1}}
.nav-mark{display:flex;align-items:center;text-decoration:none;justify-self:start}
.nav-mark svg{height:15px;width:auto;fill:var(--paper);transition:opacity .25s;filter:drop-shadow(0 1px 2px rgba(5,7,12,.98)) drop-shadow(0 0 9px rgba(5,7,12,.95))}
.nav-mark:hover svg{opacity:.6}
.nav-links{display:flex;gap:34px;list-style:none;justify-self:center}
.nav-links a{
  text-decoration:none;color:var(--dim);transition:color .25s;position:relative;padding:4px 0;
  text-shadow:0 1px 2px rgba(5,7,12,.98),0 0 9px rgba(5,7,12,.95),0 0 20px rgba(5,7,12,.8);
}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--paper)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-end{justify-self:end;display:flex;align-items:center;gap:14px}
.nav-cta{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--paper);padding:10px 18px;
  text-decoration:none;color:var(--ink);background:var(--paper);box-shadow:0 2px 18px rgba(5,7,12,.5);
  transition:background .3s,color .3s,border-color .3s,transform .2s var(--ease);
}
.nav-cta .ic{font-size:12px;transition:transform .4s var(--ease)}
.nav-cta:hover{background:var(--blue);border-color:var(--blue)}
.nav-cta:hover .ic{transform:translate(2px,-2px)}
.nav-cta:active{transform:translateY(1px) scale(.98)}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;padding:0;color:var(--paper);
  align-items:center;justify-content:center;margin-right:-8px;
  filter:drop-shadow(0 1px 2px rgba(5,7,12,.98)) drop-shadow(0 0 9px rgba(5,7,12,.95));
}
.nav-toggle span{display:block;position:relative;width:22px;height:1.5px;background:currentColor;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .3s}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.menu-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:150;background:var(--ink);display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--pad) var(--pad);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
body.menu-open .menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.menu ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.menu ul a{display:block;text-decoration:none;padding:10px 0;font-size:clamp(30px,9vw,44px);letter-spacing:-.035em;line-height:1.1;opacity:0;transform:translateY(14px)}
body.menu-open .menu ul a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
body.menu-open .menu li:nth-child(1) a{transition-delay:.1s}
body.menu-open .menu li:nth-child(2) a{transition-delay:.16s}
body.menu-open .menu li:nth-child(3) a{transition-delay:.22s}
body.menu-open .menu li:nth-child(4) a{transition-delay:.28s}
.menu-foot{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px}

/* ─── BUTTONS (one shape rule: sharp corners everywhere) ─── */
.btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:15px 22px;text-decoration:none;
  border:1px solid var(--line);color:var(--paper);background:rgba(5,7,12,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .3s,color .3s,border-color .3s,transform .2s var(--ease);
}
.btn .ic{font-size:13px;transition:transform .4s var(--ease)}
.btn:hover{border-color:var(--paper)}
.btn:hover .ic{transform:translate(2px,-2px)}
.btn:active,.soc:active{transform:translateY(1px) scale(.98)}
.btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-solid:hover{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.btn-blue{background:var(--blue);color:var(--ink);border-color:var(--blue)}
.btn-blue:hover{background:var(--paper);border-color:var(--paper)}
.soc{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--line);padding:12px 17px;color:var(--dim);transition:color .3s,border-color .3s,background .3s,transform .2s var(--ease)}
.soc .ic{font-size:15px}
.soc:hover{color:var(--ink);background:var(--paper);border-color:var(--paper)}

/* ─── SECTION SHELL ─── */
main{position:relative;z-index:1}
.section{padding:clamp(96px,14vh,168px) var(--pad);position:relative}
.wrap{max-width:1400px;margin:0 auto}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-title{font-size:clamp(38px,5.6vw,80px);line-height:.95;letter-spacing:-.035em}
.sec-link{text-decoration:none;color:var(--dim);display:inline-flex;align-items:center;gap:8px;padding-bottom:6px;transition:color .3s}
.sec-link .ic{font-size:12px;transition:transform .4s var(--ease)}
.sec-link:hover{color:var(--paper)}
.sec-link:hover .ic{transform:translate(2px,-2px)}
.lede{color:var(--dim);font-size:clamp(16px,1.35vw,19px);line-height:1.5;max-width:52ch}

/* ─── HOME HERO ─── */
/* A plain full-height block. On scroll the portrait moves at a slower rate
   than the page (parallax) and dims, so it recedes behind the credits. */
.hero{
  position:relative;z-index:0;height:100svh;min-height:560px;overflow:hidden;
  display:grid;place-items:center;padding:calc(var(--nav-h) + 40px) var(--pad) 96px;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(58% 30% at 50% 52%,rgba(5,7,12,.66) 0%,rgba(5,7,12,.4) 55%,transparent 100%),
    linear-gradient(to bottom,rgba(5,7,12,.7) 0%,transparent 22%,transparent 70%,var(--ink) 100%);
}
/* bottom fade lives on the hero itself, not the moving photo, so the
   parallax never exposes a hard edge against the next section */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--ink))}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1400px;text-align:center}
.hero-title{display:flex;align-items:center;justify-content:center}
.hero-title svg{width:clamp(250px,54vw,760px);height:auto;fill:var(--paper);filter:drop-shadow(0 4px 44px rgba(5,7,12,.75))}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vh,56px);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hero-sub{color:var(--dim);font-size:clamp(15px,1.25vw,18px);line-height:1.45;text-shadow:0 1px 14px rgba(5,7,12,.9)}
.hero-sub b{color:var(--paper)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:settle 2.4s var(--ease) both}
  .hero-title svg{animation:rise 1.3s var(--ease) .2s both}
  .hero-foot{animation:fadeup 1s var(--ease) .6s both}
  @supports (animation-timeline:scroll()){
    /* exit: the wordmark drifts up and fades, the photo trails behind the
       scroll and dims. No overlap, no curtain: the credits simply follow. */
    .hero-inner{animation:heroout linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    .hero-media{animation:mediaout linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .hero-foot{animation:fadeup 1s var(--ease) .6s both,footout linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 30vh}
  }
}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes heroout{to{opacity:0;transform:translateY(-6vh)}}
@keyframes mediaout{to{opacity:.35;transform:translateY(32vh)}}
@keyframes footout{to{opacity:0}}
.over{position:relative;z-index:2;background:var(--ink)}

/* ─── ABOUT / CREDENTIALS ─── */
.about{padding-top:clamp(88px,13vh,150px)}
.about-lede{font-size:clamp(30px,5vw,76px);line-height:1.08;letter-spacing:-.035em;max-width:19ch;color:var(--dimmer)}
.about-lede .k{color:var(--paper)}
/* Each word sits in its own mask and rises into place once, in reading
   order, when the sentence enters the viewport (IntersectionObserver in
   site.js adds .in). Names and stages are lit, the connecting words stay
   dim, so the sentence reads as a list of credits. The padding gives
   descenders (p, g, y) room inside the mask. */
.about-lede .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.about-lede .w > span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .about-lede .w > span{transform:translateY(105%)}
  .js .about-lede.in .w > span{transform:none;transition:transform 1.1s var(--ease) calc(var(--i) * 45ms)}
}
.about-stat{
  display:flex;align-items:baseline;gap:clamp(14px,1.6vw,24px);margin:clamp(48px,7vw,96px) 0 0 auto;width:fit-content;
}
.stat-num{font-size:clamp(64px,9vw,140px);line-height:.85;letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums}
.stat-label{color:var(--dim);font-size:clamp(14px,1.2vw,17px)}

/* ─── RELEASES: horizontal pan driven by vertical scroll ─── */
/* Base state is a swipeable strip (phones, reduced motion, older browsers).
   With scroll-driven animations on a wide screen the wrapper grows tall, the
   panel sticks for its whole height and the strip slides sideways in step
   with the scrollbar. Scroll hijack is never applied on touch-sized screens. */
.pan{view-timeline:--pan block}
.pan-stick{display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4vw,56px)}
.pan-head{max-width:1400px;width:100%;margin:0 auto;padding:0 var(--pad)}
.pan-track{
  display:flex;gap:clamp(16px,2vw,32px);list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:0 var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:none;
}
.pan-track::-webkit-scrollbar{display:none}
.pan-track > li{width:clamp(260px,32vw,440px);flex:none;scroll-snap-align:start}
@supports (animation-timeline:view()){
  @media (min-width:861px) and (prefers-reduced-motion:no-preference){
    .pan{height:220svh}
    .pan-stick{position:sticky;top:0;height:100svh;overflow:hidden}
    .pan-track{overflow:visible;width:max-content;scroll-snap-type:none;animation:pan linear both;animation-timeline:--pan;animation-range:contain 0% contain 100%;will-change:transform}
    .pan-head{animation:headin linear both;animation-timeline:--pan;animation-range:entry 60% entry 100%}
  }
}
@keyframes pan{to{transform:translateX(calc(-100% + 100vw))}}
@keyframes headin{from{opacity:0;transform:translateY(20px)}}

.rel{display:flex;flex-direction:column;text-decoration:none;color:var(--paper);height:100%}
.art{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-2);isolation:isolate}
.art img{width:100%;height:100%;object-fit:cover}
.art::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none}
.rel-go{position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;background:var(--paper);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease)}
.rel-go .ic{font-size:15px}
.rel:hover .rel-go,.rel:focus-visible .rel-go{opacity:1;transform:none}
.rel-name{display:block;font-size:clamp(17px,1.5vw,22px);line-height:1.2;letter-spacing:-.02em;margin-top:16px}
.rel-mix{display:block;color:var(--dim);font-size:13.5px;line-height:1.45;margin-top:4px}
.rel-by{display:block;color:var(--dimmer);font-size:12.5px;line-height:1.45;margin-top:2px}

/* Typographic cover for tracks that ship without artwork (free downloads).
   Built from the wordmark and the title only: no invented artwork. */
.tcover{
  position:relative;aspect-ratio:1;background:
    radial-gradient(70% 55% at 50% 100%,rgba(77,169,227,.28),transparent 70%),
    linear-gradient(160deg,var(--ink-3),var(--ink-2) 60%,var(--ink));
  display:flex;flex-direction:column;justify-content:space-between;padding:8%;overflow:hidden;
}
.tcover::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none}
.tcover svg{width:22%;height:auto;fill:var(--paper);opacity:.9}
.tcover span{display:block;font-size:clamp(20px,2.4vw,34px);line-height:1;letter-spacing:-.035em;transition:transform .7s var(--ease)}
.tcover span small{display:block;font-size:.5em;color:var(--dim);margin-top:.5em;letter-spacing:-.01em}
.tcover .glow{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 50% 60%,rgba(77,169,227,.35),transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none}
.rel:hover .tcover .glow,.rel:focus-visible .tcover .glow{opacity:1}
.rel:hover .tcover span{transform:translateY(-4px)}

/* ─── CONTACT ─── */
#contact{padding-bottom:clamp(64px,9vh,110px)}
.contact-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,3.5vw,44px)}
.contact-note{color:var(--dim);max-width:44ch;font-size:clamp(15px,1.2vw,17px)}
/* The address is a link at reading size, not a billboard: underlined so it
   reads as clickable, turning blue on hover. */
.mail{
  display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:var(--paper);
  font-size:clamp(20px,2.4vw,32px);letter-spacing:-.025em;line-height:1.2;transition:color .3s;
}
.mail span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.12em;transition:background-size .5s var(--ease)}
.mail:hover{color:var(--blue)}
.mail .ic{font-size:.7em;transition:transform .4s var(--ease)}
.mail:hover .ic{transform:translate(2px,-2px)}
.socials{display:flex;flex-wrap:wrap;gap:10px;padding-top:clamp(24px,3vw,36px)}

/* ─── FOOTER ─── */
.foot{padding:0 var(--pad);overflow:hidden;position:relative;z-index:2;background:var(--ink)}
.foot-row{max-width:1400px;margin:0 auto;padding:28px 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--dimmer)}
.foot-row ul{list-style:none;display:flex;gap:24px;flex-wrap:wrap}
.foot-row a{text-decoration:none;transition:color .3s}
.foot-row a:hover{color:var(--paper)}

/* ─── TRACK PAGE ─── */
.track-hero{padding:calc(var(--nav-h) + clamp(40px,8vh,96px)) var(--pad) clamp(64px,9vh,120px)}
.track-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center;max-width:1400px;margin:0 auto}
.track-art{position:relative;isolation:isolate;max-width:640px}
.track-glow{position:absolute;inset:6%;z-index:-1;width:88%;height:88%;object-fit:cover;filter:blur(70px) saturate(1.5);opacity:.45;pointer-events:none;transform:translateZ(0)}
.track-art .art,.track-art .tcover{aspect-ratio:1}
.track-art .tcover span{font-size:clamp(28px,3.4vw,52px)}
.crumb{list-style:none;display:flex;gap:10px;color:var(--dimmer);margin-bottom:clamp(20px,3vw,36px)}
.crumb a{text-decoration:none;transition:color .3s}
.crumb a:hover{color:var(--paper)}
.crumb li+li::before{content:'/';margin-right:10px;color:var(--line)}
.track-title{font-size:clamp(36px,5vw,80px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.track-version{display:block;color:var(--blue);font-size:clamp(18px,1.8vw,26px);letter-spacing:-.02em;margin-top:16px}
.track-by{color:var(--dim);margin-top:22px;font-size:clamp(15px,1.2vw,17px);max-width:44ch}
.track-by b{color:var(--paper)}
.track-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.track-body{color:var(--dim);font-size:clamp(15px,1.2vw,17px);line-height:1.6;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);max-width:52ch}
.track-body b{color:var(--paper)}
/* entrance: cover settles, text follows */
@media (prefers-reduced-motion:no-preference){
  .track-art{animation:rise 1s var(--ease) both}
  .track-copy > *{animation:fadeup .9s var(--ease) both}
  .track-copy > *:nth-child(2){animation-delay:.1s}
  .track-copy > *:nth-child(3){animation-delay:.18s}
  .track-copy > *:nth-child(4){animation-delay:.26s}
  .track-copy > *:nth-child(5){animation-delay:.34s}
  .track-copy > *:nth-child(6){animation-delay:.42s}
}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);list-style:none}

/* ─── HUB PAGE (all remixes / mashups) ─── */
.hub-hero{padding:calc(var(--nav-h) + clamp(40px,8vh,96px)) var(--pad) clamp(40px,6vh,72px)}
.hub-hero .wrap{display:flex;flex-direction:column;gap:22px}
.hub-title{font-size:clamp(44px,7vw,112px);line-height:.92;letter-spacing:-.045em}
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(40px,4vw,56px) clamp(16px,2vw,32px);list-style:none}
.hub-note{border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px);margin-top:clamp(48px,7vw,96px);display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}

/* ─── ARTWORK TILT (same values as pulso-studios.com) ───
   The cover leans up to 2.5deg toward the pointer at its very edge, seen
   through a 1100px perspective, easing back when the pointer leaves.
   site.js sets --rx/--ry, only for fine pointers and without reduced motion. */
.rel,.track-art{perspective:1100px}
.tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease);will-change:transform}

/* ─── 404 ─── */
.nf{min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) var(--pad) 80px}
.nf .wrap{width:100%;display:flex;flex-direction:column;gap:22px}
.nf-code{font-size:clamp(96px,20vw,280px);line-height:.8;letter-spacing:-.06em;color:var(--blue)}
.nf-title{font-size:clamp(32px,4.4vw,64px);line-height:1;letter-spacing:-.035em}

/* ─── REVEAL (hidden only when JS runs; never a blank page without it) ─── */
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}

/* ─── RESPONSIVE ─── */
@media (max-width:1080px){
  .track-grid{grid-template-columns:1fr}
  .track-art{max-width:560px}
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav > nav[aria-label="Primary"]{display:none}
  .nav-cta{padding:9px 14px}
  .nav-toggle{display:flex;justify-self:auto}
  .nav{grid-template-columns:1fr auto}
  .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--nav-h) + 24px) var(--pad) 40px}
  .hero-foot{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .hero-sub{max-width:26ch}
  .hero-cta{justify-content:center}
  .about-stat{margin-left:0}
  .pan{padding:clamp(56px,9vh,96px) 0}
  .pan-track{gap:14px}
  .pan-track > li{width:68vw}
}
@media (max-width:640px){
  .hub-grid{grid-template-columns:1fr}
  .more-grid{grid-template-columns:1fr 1fr}
  .more-grid .rel-by{display:none}
}
@media (max-width:560px){
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;justify-content:center}
  .track-cta .btn{flex:1;justify-content:center}
}