:root{--bg:#050505;--text:#f4f1ee;--muted:#a49d99;--accent:#8f171e;--accent2:#e32029;--line:rgba(139,22,29,.5)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:#050505;color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;color:inherit}.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}main{width:min(100%,1480px);margin:auto;background:#060606;box-shadow:0 0 80px #000}

.desktop-hero{position:relative;aspect-ratio:941/545;overflow:hidden;border-bottom:1px solid var(--line);background:#050505}.hero-art{position:absolute;inset:0;background:url('assets/hero-desktop-clean.webp') center/100% 100% no-repeat;transform:translate3d(0,var(--hero-shift,0px),0) scale(1.005);will-change:transform}.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 72% 40%,rgba(126,17,23,.04),transparent 22%),linear-gradient(90deg,rgba(0,0,0,.04),transparent 48%)}
.hero-logo-mask{position:absolute;z-index:4;left:6.5%;top:.7%;width:6.5%;height:13%;background:#050505}.hero-v,.hero-wordmark{position:absolute;z-index:7;pointer-events:none}.hero-v-link{position:absolute;z-index:8;left:7.3%;top:2.5%;width:4.8%;height:9%;display:block}.hero-v-link .hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.hero-v-shadow{left:7.1%;top:2.3%;width:5.2%;height:9.4%;filter:brightness(0);transform:scale(1.08)}.hero-wordmark,.hero-wordmark-shadow{left:8.25%;top:26.1%;width:31.3%;height:33.2%;object-fit:contain}.hero-wordmark-shadow{position:absolute;z-index:6;filter:brightness(0);transform:scale(1.015);transform-origin:center}
.hero-nav-mask{position:absolute;z-index:4;left:15.3%;top:1.2%;width:33%;height:8.5%;background:#050505}.desktop-nav{position:absolute;z-index:8;left:16.7%;top:4.65%;display:flex;gap:3.65vw;align-items:center;transform:translateY(-50%)}.desktop-nav a{position:relative;font-size:clamp(8px,.72vw,12px);font-weight:700;letter-spacing:.29em;color:#efebea;padding:9px 2px 10px;white-space:nowrap}.desktop-nav a.active{color:#ee353d}.desktop-nav a.active::after{content:"";position:absolute;left:0;right:10%;bottom:1px;height:2px;background:#e32b33}
.hero-social-mask{position:absolute;z-index:4;right:5.1%;top:1.2%;width:15%;height:8%;background:#050505}.desktop-socials{position:absolute;z-index:8;right:6.05%;top:4.6%;display:flex;gap:1.55vw;transform:translateY(-50%);align-items:center}.desktop-socials a{width:22px;height:22px;display:grid;place-items:center;color:#f5f2ef}.desktop-socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.desktop-socials .fill{fill:currentColor;stroke:none}.desktop-socials img{width:18px;height:18px;filter:brightness(0) invert(1)}
.hero-explore{position:absolute;z-index:8;left:8.5%;top:76.7%;width:19.1%;height:7.1%;display:flex;align-items:center;justify-content:space-between;padding:0 2.6%;border:1px solid #e32029;background:rgba(5,5,5,.86);font-size:clamp(8px,.76vw,12px);font-weight:700;letter-spacing:.18em}.hero-explore b{font-size:1.4em;color:#e62c34}

.mobile-hero{display:none}
.beats{min-height:326px;padding:34px 43px 28px;background:#060606;border-bottom:1px solid rgba(139,22,29,.34)}.beats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.eyebrow{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:.30em;color:#aaa3a0;text-transform:uppercase}.eyebrow i{display:block;width:19px;height:2px;background:#d7242c}.beats h1{margin:13px 0 0;font-size:17px;letter-spacing:.28em;font-weight:400}.beats-head>a{font-size:9px;letter-spacing:.18em;color:#df383e;border-bottom:1px solid rgba(223,56,62,.65);padding:0 0 5px}.beats-head b{font-size:15px;margin-left:8px}.beatstars-slot{min-height:205px;margin-top:20px;padding-top:24px;border-top:1px solid rgba(255,255,255,.025);position:relative}.beatstars-slot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.018)}.beatstars-player-shell{position:relative;width:100%;max-width:1088px;margin:0 auto;padding:8px;background:linear-gradient(180deg,rgba(17,17,18,.96),rgba(5,5,5,.98));border:1px solid rgba(119,18,24,.54);box-shadow:0 18px 50px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025)}.beatstars-player-shell::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,transparent 0 8%,#761218 25%,#b0232b 50%,#761218 75%,transparent 92%);opacity:.85}.beatstars-player-rail{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 13px 0 12px;border-bottom:1px solid rgba(255,255,255,.055);font-size:8px;letter-spacing:.20em;color:#8f8885}.beatstars-player-rail span{display:flex;align-items:center;gap:9px;white-space:nowrap}.beatstars-player-rail span:first-child{color:#d8d1ce}.beatstars-player-rail i{display:block;width:15px;height:1px;background:#a61d24;box-shadow:0 0 8px rgba(166,29,36,.28)}.beatstars-player{display:block;width:100%;max-width:none;height:450px;margin:0;border:0;background:#030303}
.about{display:grid;grid-template-columns:56.4% 43.6%;min-height:320px;background:#070707;border-bottom:0}.about-photo{min-height:320px;position:relative;overflow:hidden;background:#070707}.about-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.about-copy{padding:39px 54px 34px 28px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#080808 0%,#060606 100%)}.about-copy .eyebrow{font-size:9px}.about h2{font-size:19px;letter-spacing:.23em;font-weight:400;margin:12px 0 20px}.about p{font-size:12px;line-height:1.72;color:#d2ccc8;margin:0 0 8px;max-width:410px;letter-spacing:.025em}.outlined-btn{display:inline-flex;align-items:center;justify-content:center;gap:32px;width:max-content;min-width:165px;height:40px;border:1px solid #e32029;margin-top:18px;padding:0 20px;font-size:9px;letter-spacing:.18em;font-weight:700;transition:.25s ease}.outlined-btn b{font-size:16px;color:#e3333a}
.beatstars-banner{position:relative;aspect-ratio:941/190;overflow:hidden;background:#050505;border-top:1px solid rgba(139,22,29,.28);border-bottom:1px solid rgba(255,255,255,.04)}.beatstars-art{position:absolute;inset:0;background:url('assets/beatstars-strip.webp') center/100% 100% no-repeat;transition:transform .7s ease}.beatstars-copy-panel{position:absolute;z-index:2;left:48%;right:0;top:18%;bottom:14%;background:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.82) 70%,rgba(5,5,5,.35));filter:blur(.1px)}.beatstars-copy{position:absolute;z-index:4;left:52.7%;top:24%;width:39%}.beatstars-copy h3{font-size:clamp(11px,1.02vw,16px);letter-spacing:.16em;font-weight:700;margin:0 0 9px}.beatstars-copy p{font-size:clamp(7px,.62vw,10px);letter-spacing:.18em;color:#c9c3c0;margin:0 0 18px}.beatstars-copy .outlined-btn{margin-top:0;min-width:210px}
.site-footer{position:relative;min-height:287px;background:#040404;padding:52px 6% 28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.footer-redline{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent 0 3%,#6e1218 8%,#401014 17%,transparent 27%,transparent 44%,#481014 50%,transparent 58%,transparent 80%,#541117 88%,transparent 96%);opacity:.9}.footer-v{width:58px;height:68px;object-fit:contain}.footer-tagline{margin:9px 0 22px;font-size:13px;letter-spacing:.43em;color:#f4f1ee}.footer-socials{display:flex;gap:24px;align-items:center}.footer-socials a{width:28px;height:28px;display:grid;place-items:center;color:#f3f0ee;transition:.2s ease}.footer-socials svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.footer-socials .fill{fill:currentColor;stroke:none}.footer-socials img{width:21px;height:21px;filter:brightness(0) invert(1)}.footer-bottom{position:absolute;left:5%;right:5%;bottom:28px;display:flex;justify-content:space-between;align-items:center;color:#b1aba8}.footer-bottom small,.footer-links{font-size:8px;letter-spacing:.16em}.footer-links{display:flex;gap:42px}.footer-links a{transition:.2s ease}

.desktop-nav a:hover,.footer-links a:hover,.beats-head>a:hover{color:#fff}.outlined-btn:hover,.hero-explore:hover{background:rgba(119,18,24,.28);border-color:#bd2a31;box-shadow:0 9px 26px rgba(94,8,13,.22)}.footer-socials a:hover,.desktop-socials a:hover{transform:translateY(-1px);filter:drop-shadow(0 0 7px rgba(143,23,30,.45))}.about-photo>img{transition:transform 1.2s cubic-bezier(.2,.72,.2,1),filter .8s ease}.about:hover .about-photo>img{transform:scale(1.012);filter:contrast(1.02)}.beatstars-banner:hover .beatstars-art{transform:scale(1.012)}

.motion-in.motion-rise{animation:motionRise .72s cubic-bezier(.2,.72,.2,1) both}.motion-in.motion-scale{animation:motionScale .8s cubic-bezier(.2,.72,.2,1) both}@keyframes motionRise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes motionScale{from{opacity:.45;transform:scale(.985)}to{opacity:1;transform:scale(1)}}

@media(max-width:780px){
  main{width:100%;box-shadow:none}.desktop-hero{display:none}.mobile-hero{display:block;position:relative;min-height:680px;overflow:hidden;background:#050505;border-bottom:1px solid var(--line)}.mobile-header{position:absolute;z-index:20;left:0;right:0;top:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:14px 19px;background:linear-gradient(#040404 10%,rgba(4,4,4,.18) 78%,transparent)}.mobile-v{width:48px;height:55px;object-fit:contain}.menu-toggle{position:relative;width:44px;height:44px;border:0;background:transparent;z-index:22}.menu-toggle span{position:absolute;right:6px;width:23px;height:1px;background:#eee;transition:transform .24s ease,top .24s ease}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}.menu-toggle.active span:first-child{top:21px;transform:rotate(45deg)}.menu-toggle.active span:last-child{top:21px;transform:rotate(-45deg)}.mobile-menu{display:none;position:absolute;top:68px;right:14px;min-width:170px;padding:14px 18px;background:rgba(8,8,8,.96);border:1px solid rgba(143,23,30,.5);backdrop-filter:blur(10px)}.mobile-menu.open{display:grid}.mobile-menu a{padding:10px 4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.04)}.mobile-portrait{position:absolute;right:-14%;top:0;width:112%;height:100%;object-fit:cover;object-position:64% center;opacity:.96}.mobile-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0 17%,rgba(5,5,5,.92) 28%,rgba(5,5,5,.18) 68%,rgba(5,5,5,.28)),linear-gradient(0deg,#050505 0,transparent 26%);z-index:2}.mobile-smoke{position:absolute;z-index:3;inset:20% -20% 0;background:radial-gradient(circle at 18% 56%,rgba(122,17,23,.19),transparent 28%),radial-gradient(circle at 62% 50%,rgba(86,12,16,.12),transparent 30%);filter:blur(18px);pointer-events:none}.mobile-copy{position:absolute;z-index:5;left:22px;right:24px;bottom:64px}.mobile-wordmark{width:min(82vw,330px);height:auto;filter:none}.mobile-copy p{margin:5px 0 5px;font-size:12px;letter-spacing:.28em}.mobile-copy span{display:block;font-size:8px;letter-spacing:.24em;color:#a69f9c}.mobile-copy .outlined-btn{margin-top:23px;min-width:182px;height:44px}
  .beats{min-height:300px;padding:33px 22px}.beats-head{display:block}.beats h1{font-size:16px;line-height:1.5;letter-spacing:.17em;margin-top:12px;max-width:290px}.beats-head>a{display:inline-block;margin-top:18px}.beatstars-slot{min-height:175px;padding-top:20px}.beatstars-player-shell{padding:5px}.beatstars-player-rail{height:30px;padding:0 9px;font-size:7px;letter-spacing:.14em}.beatstars-player-rail span:last-child{display:none}.beatstars-player{height:450px}
  .about{grid-template-columns:1fr;min-height:auto}.about-photo{min-height:0;aspect-ratio:530/320;border-top:0}.about-photo>img{position:absolute;inset:0;object-position:center}.about-copy{padding:34px 22px 39px}.about h2{font-size:18px}.about p{font-size:12px}.beatstars-banner{aspect-ratio:auto;min-height:230px}.beatstars-art{background-position:left center;background-size:auto 100%;opacity:.65}.beatstars-copy-panel{left:25%;top:0;bottom:0;background:linear-gradient(90deg,rgba(5,5,5,0),rgba(5,5,5,.92) 38%,#050505 78%)}.beatstars-copy{left:auto;right:22px;top:50%;transform:translateY(-50%);width:68%;max-width:300px;text-align:right}.beatstars-copy h3{font-size:13px;line-height:1.4}.beatstars-copy p{font-size:7px;line-height:1.65}.beatstars-copy .outlined-btn{margin-left:auto;min-width:172px}
  .site-footer{min-height:330px;padding:42px 20px 78px}.footer-v{width:50px;height:58px}.footer-tagline{font-size:10px;letter-spacing:.34em}.footer-socials{gap:17px}.footer-socials a{width:38px;height:38px}.footer-socials svg,.footer-socials img{width:21px;height:21px}.footer-bottom{position:static;margin-top:28px;display:flex;flex-direction:column-reverse;gap:17px}.footer-links{gap:20px}.footer-bottom small,.footer-links{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.motion-in,.hero-art{animation:none!important}.hero-art{transform:none!important}.about-photo>img,.outlined-btn,.hero-explore{transition:none!important}}


/* Production 1.1 — remove desktop text duplication from baked mockup artwork */
.beatstars-desktop-hotspot{display:none}

@media(min-width:781px){
  /* The desktop BeatStars strip already contains its typography/button. */
  .beatstars-copy-panel,.beatstars-copy{display:none!important}
  .beatstars-desktop-hotspot{
    display:block;
    position:absolute;
    z-index:8;
    left:53.2%;
    top:52%;
    width:23.8%;
    height:21%;
  }
}

/* On mobile we redraw the BeatStars copy and cover the copy baked into the raster. */
@media(max-width:780px){
  .beatstars-desktop-hotspot{display:none!important}
  .beatstars-copy-panel{
    display:block!important;
    left:20%!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    background:linear-gradient(90deg,rgba(5,5,5,0) 0%,rgba(5,5,5,.98) 29%,#050505 58%,#050505 100%)!important;
  }
  .beatstars-copy{display:block!important}
}


/* 1.2 FIX — remove only the hand artifact coming from the top of the BeatStars banner.
   No changes to profile image, banner text, typography or layout. */
.beatstars-banner::before{
  content:"";
  position:absolute;
  z-index:3;
  left:21%;
  top:0;
  width:23%;
  height:6.4%;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(5,5,5,0) 0%,
    #050505 10%,
    #050505 90%,
    rgba(5,5,5,0) 100%
  );
}

@media(max-width:780px){
  .beatstars-banner::before{
    left:18%;
    width:36%;
    height:7.5%;
  }
}


/* BeatStars CTA hover FIX
   Exact overlay on the baked button: no external border and no click/focus rectangle. */
@media(min-width:781px){
  .beatstars-desktop-hotspot{
    display:block!important;
    position:absolute;
    z-index:10;
    left:53.24%;
    top:62.11%;
    width:22.28%;
    height:18.77%;
    border:0!important;
    outline:0!important;
    background:transparent;
    box-shadow:none;
    transition:background-color .25s ease, box-shadow .25s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .beatstars-desktop-hotspot:hover{
    background:rgba(119,18,24,.28);
    box-shadow:inset 0 0 0 1px rgba(189,42,49,.75),
               0 9px 26px rgba(94,8,13,.22);
  }

  .beatstars-desktop-hotspot:focus,
  .beatstars-desktop-hotspot:active{
    outline:0!important;
  }

  .beatstars-desktop-hotspot:focus-visible{
    box-shadow:inset 0 0 0 1px rgba(189,42,49,.75),
               0 9px 26px rgba(94,8,13,.22);
  }
}


/* Legal pages — scoped; does not alter the home page */
.legal-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 4%,rgba(111,16,22,.13),transparent 24%),
    linear-gradient(180deg,#050505 0%,#070707 55%,#040404 100%);
}
.legal-shell{width:min(100% - 40px,980px);margin:0 auto}
.legal-header{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(143,23,30,.38);
}
.legal-brand{display:flex;align-items:center;gap:15px}
.legal-brand img{width:42px;height:48px;object-fit:contain}
.legal-brand span{font-size:11px;letter-spacing:.34em;font-weight:700}
.legal-back{
  font-size:9px;
  letter-spacing:.20em;
  font-weight:700;
  border:1px solid #e32029;
  padding:12px 16px;
  transition:.25s ease;
}
.legal-back:hover{background:rgba(119,18,24,.28);border-color:#bd2a31}
.legal-main{padding:70px 0 82px}
.legal-kicker{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.28em;color:#aaa3a0}
.legal-kicker::before{content:"";width:22px;height:2px;background:#d7242c}
.legal-main h1{font-size:clamp(27px,4.5vw,54px);letter-spacing:.08em;margin:16px 0 10px;font-weight:700}
.legal-updated{font-size:10px;letter-spacing:.17em;color:#8f8884;margin:0 0 46px}
.legal-content{border-top:1px solid rgba(255,255,255,.06);padding-top:15px}
.legal-section{padding:28px 0 26px;border-bottom:1px solid rgba(255,255,255,.055)}
.legal-section h2{margin:0 0 14px;font-size:14px;letter-spacing:.16em;font-weight:700}
.legal-section p,.legal-section li{
  color:#cfc9c5;
  font-size:12px;
  line-height:1.78;
  letter-spacing:.015em;
}
.legal-section p{margin:0 0 12px}
.legal-section ul{margin:8px 0 0;padding-left:19px}
.legal-section a{color:#f1eeee;border-bottom:1px solid rgba(227,32,41,.65)}
.legal-note{
  margin-top:34px;
  padding:18px 20px;
  border:1px solid rgba(143,23,30,.42);
  background:rgba(92,14,19,.08);
  color:#a8a09d;
  font-size:10px;
  line-height:1.7;
}
.legal-footer{
  border-top:1px solid rgba(143,23,30,.38);
  padding:28px 0 34px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:#8f8884;
  font-size:8px;
  letter-spacing:.14em;
}
.legal-footer nav{display:flex;gap:24px}
.legal-footer a:hover{color:#fff}
@media(max-width:640px){
  .legal-shell{width:min(100% - 34px,980px)}
  .legal-header{min-height:78px}
  .legal-brand img{width:36px;height:42px}
  .legal-brand span{display:none}
  .legal-back{padding:10px 12px;font-size:8px}
  .legal-main{padding:50px 0 62px}
  .legal-main h1{font-size:31px}
  .legal-updated{margin-bottom:34px}
  .legal-section{padding:23px 0}
  .legal-section p,.legal-section li{font-size:12px}
  .legal-footer{flex-direction:column;align-items:flex-start}
}

/* DESKTOP HERO — logo, wordmark, menu, icons and button are live elements over a clean background.
   Positions come from the original artwork (2823 x 1635); sizes use cqw so everything scales with the hero. */
@font-face{font-family:"VeynePoppins";src:url("assets/poppins-medium-subset.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
.desktop-hero{container-type:inline-size}
@media(min-width:781px){
  .desktop-hero .hero-v-link{left:7.19%;top:1.041%;width:5.376%;height:12.539%}
  .desktop-hero .hero-v-link .hero-v{object-fit:fill}
  .desktop-hero .hero-wordmark{left:8.401%;top:25.689%;width:34.746%;height:33.193%;object-fit:fill}

  .desktop-hero .desktop-nav{inset:0;transform:none;display:block;gap:0;pointer-events:none}
  .desktop-hero .desktop-nav a{position:absolute;padding:0.8cqw 0.9cqw;margin:-0.8cqw -0.9cqw;font-family:VeynePoppins,Poppins,Arial,Helvetica,sans-serif;font-size:1.1vw;font-size:1.15cqw;font-weight:500;line-height:1;letter-spacing:0.135em;-webkit-text-stroke:.035cqw currentColor;pointer-events:auto}
  .desktop-hero .desktop-nav a:nth-child(1){left:16.983%;top:5.292%}
  .desktop-hero .desktop-nav a:nth-child(2){left:24.673%;top:5.292%}
  .desktop-hero .desktop-nav a:nth-child(3){left:32.622%;top:5.292%}
  .desktop-hero .desktop-nav a:nth-child(4){left:41.025%;top:5.292%}
  .desktop-hero .desktop-nav a.active::after{left:0.293cqw;right:auto;width:4.877cqw;top:2.539cqw;bottom:auto;height:0.128cqw;background:#b3302f}

  .desktop-hero .desktop-socials{inset:0;transform:none;display:block;gap:0;pointer-events:none}
  .desktop-hero .desktop-socials a{position:absolute;width:2.6cqw;height:2.6cqw;pointer-events:auto}
  .desktop-hero .desktop-socials svg,.desktop-hero .desktop-socials img{width:var(--s);height:var(--s)}
  .desktop-hero .desktop-socials svg{stroke-width:2}
  .desktop-hero .desktop-socials a:nth-child(2) svg>path:first-child{fill:currentColor}
  .desktop-hero .desktop-socials a:nth-child(2) svg>path.fill{fill:#080808;stroke:none}
  .desktop-hero .desktop-socials a:nth-child(3) svg>rect{fill:currentColor}
  .desktop-hero .desktop-socials a:nth-child(3) svg>path{stroke:#080808;stroke-width:1.6}
  .desktop-hero .desktop-socials a:nth-child(1){left:calc(87.292% - 1.3cqw);top:calc(6.235% - 1.3cqw)}
  .desktop-hero .desktop-socials a:nth-child(1) {--s:1.869cqw}
  .desktop-hero .desktop-socials a:nth-child(2){left:calc(90.905% - 1.3cqw);top:calc(6.235% - 1.3cqw)}
  .desktop-hero .desktop-socials a:nth-child(2) {--s:2.060cqw}
  .desktop-hero .desktop-socials a:nth-child(3){left:calc(94.679% - 1.3cqw);top:calc(6.296% - 1.3cqw)}
  .desktop-hero .desktop-socials a:nth-child(3) {--s:1.849cqw}

  .desktop-hero .hero-explore{left:8.721%;top:78.244%;width:18.975%;height:6.761%;padding:0;justify-content:center;gap:0.94cqw;border:0.141cqw solid #c94a52;background:#000;font-family:VeynePoppins,Poppins,Arial,Helvetica,sans-serif;font-size:1.1vw;font-size:1.15cqw;font-weight:500;line-height:1;letter-spacing:0.135em;-webkit-text-stroke:.035cqw currentColor;color:#f4f1ee}
  .desktop-hero .hero-explore:hover{background:#210507;border-color:#bd2a31}
  .desktop-hero .hero-arrow{flex:none;width:1.317cqw;height:0.57cqw;fill:none;stroke:#e8434b;stroke-width:2.6;stroke-linecap:butt;stroke-linejoin:miter}
  .desktop-hero a:focus-visible{outline:2px solid #ee353d;outline-offset:3px}
}


/* ==========================================================================
   MOTION — one system for the whole site
   Everything below is gated by <html class="motion">, which the inline script in index.html adds only when the
   visitor has NOT asked for reduced motion. Without it (or without JS) the site is fully visible and static.
   Global knobs (change these first):  --m-speed  1 = normal, 1.3 = slower, .8 = faster
                                       --m-dist   how far things rise in
   ========================================================================== */
:root{--ease:cubic-bezier(.16,.84,.3,1);--ease-io:cubic-bezier(.65,0,.2,1);--m-speed:1;--m-dist:22px;--btn-fill:linear-gradient(rgba(119,18,24,.36),rgba(119,18,24,.36))}
@property --mx{syntax:"<percentage>";inherits:true;initial-value:72%}
@property --my{syntax:"<percentage>";inherits:true;initial-value:40%}

@keyframes mRise{from{opacity:0;transform:translate3d(0,var(--m-dist),0)}}
@keyframes mFade{from{opacity:0}}
@keyframes mLine{from{opacity:0;transform:scaleX(0)}}
@keyframes mDraw{from{transform:scaleX(0)}}
@keyframes mWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mWipeDown{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes mZoomOut{from{scale:1.14}}
@keyframes mWord{from{transform:translate3d(0,110%,0)}}
@keyframes mTrack{from{opacity:0;letter-spacing:.75em}}
@keyframes mShine{0%{left:-30%;opacity:0}15%{opacity:1}100%{left:125%;opacity:0}}
@keyframes wmIn{from{clip-path:inset(0 100% 0 0);filter:blur(6px)}to{clip-path:inset(0 0 0 0);filter:blur(0)}}
@keyframes heroDrop{from{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes arrowIn{from{opacity:0;transform:translate3d(-14px,0,0)}}
@keyframes breathe{from{opacity:.15}to{opacity:.85}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.045) translate3d(-1%,0,0)}}
@keyframes smokeDrift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(3%,-2%,0)}}
@keyframes grain{0%{background-position:0 0}20%{background-position:-42px 27px}40%{background-position:31px -58px}60%{background-position:-67px -21px}80%{background-position:48px 40px}}

/* ---- 1. Hero intro: plays once, after the hero image is decoded (paused until <html> gets .intro-go) ---- */
.intro .hero-art,
.intro .mobile-hero::before{animation:heroFade calc(var(--m-speed)*1.2s) ease-out backwards paused,
                                  heroSettle calc(var(--m-speed)*2.8s) var(--ease) backwards paused}
.intro .mobile-hero::before{animation:heroFade calc(var(--m-speed)*1.2s) ease-out backwards paused,
                                  heroSettle calc(var(--m-speed)*2.8s) var(--ease) backwards paused,
                                  kenburns 26s ease-in-out infinite alternate paused}
.intro .hero-shade{animation:heroFade 1.8s ease .4s backwards paused}
.intro .mobile-header{animation:heroFade 1s ease .2s backwards paused}
.intro .mobile-smoke{animation:heroFade 2.2s ease .3s backwards paused,smokeDrift 14s ease-in-out infinite alternate paused}
.intro .mobile-copy>*{animation:heroRise .9s var(--ease) backwards paused}
.intro .mobile-copy>:nth-child(1){animation-delay:.55s}
.intro .mobile-copy>:nth-child(2){animation-delay:.75s}
.intro .mobile-copy>:nth-child(3){animation-delay:.9s}
.intro .mobile-copy>:nth-child(4){animation-delay:1.05s}
.intro .hero-v-link{animation:heroRise 1s var(--ease) .3s backwards paused}
.intro .hero-wordmark{animation:heroFade .6s ease .5s backwards paused,wmIn calc(var(--m-speed)*1.25s) var(--ease-io) .5s backwards paused}
.intro .desktop-nav a{animation:heroDrop .8s var(--ease) backwards paused}
.intro .desktop-nav a:nth-child(1){animation-delay:.85s}
.intro .desktop-nav a:nth-child(2){animation-delay:.93s}
.intro .desktop-nav a:nth-child(3){animation-delay:1.01s}
.intro .desktop-nav a:nth-child(4){animation-delay:1.09s}
.intro .desktop-nav a.active::after{animation:mDraw 1s var(--ease-io) 1.2s backwards paused;transform-origin:left center}
.intro .desktop-socials a{animation:heroDrop .8s var(--ease) backwards paused}
.intro .desktop-socials a:nth-child(1){animation-delay:1.05s}
.intro .desktop-socials a:nth-child(2){animation-delay:1.13s}
.intro .desktop-socials a:nth-child(3){animation-delay:1.21s}
.intro .hero-explore{animation:heroRise 1s var(--ease) 1.25s backwards paused}
.intro .hero-arrow{animation:arrowIn .9s var(--ease) 1.6s backwards paused}
.intro-go .hero-art,.intro-go .hero-shade,.intro-go .mobile-hero::before,.intro-go .mobile-header,.intro-go .mobile-smoke,.intro-go .mobile-copy>*,
.intro-go .hero-v-link,.intro-go .hero-wordmark,.intro-go .desktop-nav a,.intro-go .desktop-nav a.active::after,
.intro-go .desktop-socials a,.intro-go .hero-explore,.intro-go .hero-arrow{animation-play-state:running}
@keyframes heroFade{from{opacity:0}}
@keyframes heroSettle{from{scale:1.05}}
@keyframes heroRise{from{opacity:0;transform:translate3d(0,14px,0)}}

/* ---- 2. Scroll reveals: hidden until the section enters the viewport (JS adds .in) ---- */
[data-r="line"]{transform-origin:left center}
[data-r="draw"]{transform-origin:center}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}

.motion [data-io]:not(.in) [data-r]{opacity:0}
.motion [data-io]:not(.in) [data-r="rise"]{transform:translate3d(0,var(--m-dist),0)}
.motion [data-io]:not(.in) [data-r="line"],
.motion [data-io]:not(.in) [data-r="draw"]{transform:scaleX(0)}
.motion [data-io]:not(.in) [data-r="wipe"]{clip-path:inset(0 0 100% 0)}
.motion [data-io]:not(.in) [data-r="track"]{letter-spacing:.75em}
.motion [data-io]:not(.in) .w>span{transform:translate3d(0,110%,0)}
.motion .about-photo[data-io]:not(.in)>img{clip-path:inset(0 100% 0 0);scale:1.14}
.motion .beatstars-banner[data-io]:not(.in) .beatstars-art{clip-path:inset(0 100% 0 0);scale:1.08}
.motion .beatstars-slot[data-io]:not(.in) .beatstars-player-shell::before{transform:scaleX(0)}

.motion [data-io].in [data-r]{animation:mRise calc(var(--m-speed)*1s) var(--ease) var(--d,0s) backwards}
.motion [data-io].in [data-r="line"]{animation-name:mLine;animation-duration:calc(var(--m-speed)*.9s);animation-timing-function:var(--ease-io)}
.motion [data-io].in [data-r="draw"]{animation-name:mDraw;animation-duration:calc(var(--m-speed)*1.6s);animation-timing-function:var(--ease-io)}
.motion [data-io].in [data-r="wipe"]{animation-name:mWipeDown;animation-duration:calc(var(--m-speed)*1.2s);animation-timing-function:var(--ease-io)}
.motion [data-io].in [data-r="track"]{animation-name:mTrack;animation-duration:calc(var(--m-speed)*1.6s)}
.motion [data-io].in [data-r="fade"]{animation-name:mFade;animation-duration:calc(var(--m-speed)*1.2s)}
.motion [data-io].in .w>span{animation:mWord calc(var(--m-speed)*1s) var(--ease) calc(var(--d,0s) + var(--i,0)*.06s) backwards}
.motion .about-photo[data-io].in>img,
.motion .beatstars-banner[data-io].in .beatstars-art{animation:mWipe calc(var(--m-speed)*1.3s) var(--ease-io) backwards,mZoomOut calc(var(--m-speed)*2s) var(--ease) backwards}
.motion .beatstars-slot[data-io].in .beatstars-player-shell::before{transform-origin:left center;animation:mDraw calc(var(--m-speed)*1.8s) var(--ease-io) calc(var(--d,0s) + .4s) backwards}
.motion .beatstars-banner::after{content:"";position:absolute;z-index:5;top:0;bottom:0;left:-30%;width:22%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.075) 50%,transparent);transform:skewX(-18deg);opacity:0}
.motion .beatstars-banner[data-io].in::after{animation:mShine 1.7s var(--ease-io) .9s both}

/* ---- 3. Idle life: things that keep gently moving ---- */
.motion .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.04),transparent 48%);transition:--mx 1s var(--ease),--my 1s var(--ease)}
.motion .hero-shade::before,.motion .hero-shade::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
.motion .hero-shade::before{background:radial-gradient(circle at var(--mx) var(--my),rgba(170,26,34,.16),transparent 24%)}
.motion .hero-shade::after{background:radial-gradient(48% 60% at 44% 44%,rgba(120,16,22,.30),transparent 72%);animation:breathe 9s ease-in-out infinite alternate}
.motion .grain{animation:grain 1s steps(1,end) infinite}
/* mouse parallax on the separate hero layers (values set by script.js) */
.motion .desktop-hero .hero-wordmark{translate:calc(var(--px,0)*-9px) calc(var(--py,0)*-5px);transition:translate .9s var(--ease)}
.motion .desktop-hero .hero-v-link{translate:calc(var(--px,0)*-5px) calc(var(--py,0)*-3px);transition:translate .9s var(--ease)}
.motion .desktop-hero .hero-art{translate:calc(var(--px,0)*1.5px) calc(var(--py,0)*1px);transition:translate .9s var(--ease)}

/* ---- 4. Interactions ---- */
.motion .outlined-btn,.motion .hero-explore{background-image:var(--btn-fill);background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .55s var(--ease),border-color .3s ease,box-shadow .35s ease}
.motion .outlined-btn b,.motion .hero-arrow,.motion .beats-head b{transition:transform .5s var(--ease)}
.motion .beats-head b{display:inline-block}
.motion .desktop-socials a,.motion .footer-socials a{transition:transform .35s var(--ease),filter .35s ease,color .2s ease}
.motion .desktop-hero .desktop-nav a:not(.active)::after{content:"";position:absolute;left:.9cqw;right:.9cqw;top:2.539cqw;height:.128cqw;background:#e32b33;transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
@media(hover:hover){
  .motion .outlined-btn:hover,.motion .hero-explore:hover{background-image:var(--btn-fill);background-size:100% 100%;background-color:transparent}
  .motion .desktop-hero .hero-explore:hover{background-color:#000}
  .motion .outlined-btn:hover b,.motion .hero-explore:hover .hero-arrow,.motion .beats-head>a:hover b{transform:translate3d(6px,0,0)}
  .motion .desktop-hero .desktop-nav a:not(.active):hover::after{transform:scaleX(1)}
}

/* ---- 5. Mobile menu: opens with a soft drop instead of popping in ---- */
@media(max-width:780px){
  .motion .mobile-menu{display:grid;visibility:hidden;opacity:0;transform:translate3d(0,-8px,0);pointer-events:none;transition:opacity .3s ease,transform .5s var(--ease),visibility 0s linear .5s}
  .motion .mobile-menu.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .motion .mobile-menu a{opacity:0;transform:translate3d(0,8px,0);transition:opacity .4s ease,transform .55s var(--ease)}
  .motion .mobile-menu.open a{opacity:1;transform:none}
  .motion .mobile-menu.open a:nth-child(1){transition-delay:.08s}
  .motion .mobile-menu.open a:nth-child(2){transition-delay:.13s}
  .motion .mobile-menu.open a:nth-child(3){transition-delay:.18s}
  .motion .mobile-menu.open a:nth-child(4){transition-delay:.23s}
}

/* ---- 6. Privacy / Terms pages: CSS-only entrance ---- */
@media(prefers-reduced-motion:no-preference){
  .legal-header{animation:mFade 1s ease backwards}
  .legal-main>*{animation:mRise .9s var(--ease) backwards}
  .legal-main>:nth-child(1){animation-delay:.1s}
  .legal-main>:nth-child(2){animation-delay:.18s}
  .legal-main>:nth-child(3){animation-delay:.26s}
  .legal-main>:nth-child(4){animation-delay:.36s}
}

/* ==========================================================================
   MOBILE HERO — the same world as the desktop: the clean artwork kept whole (sized by height, so the face stays sharp),
   dark space above it for the header and the wordmark.
   ========================================================================== */
@media(max-width:780px){
  .mobile-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:url(assets/hero-desktop-clean.webp) 71% 100%/auto 62.5% no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 36%,#000 49%);mask-image:linear-gradient(180deg,transparent 36%,#000 49%)}
  .mobile-hero::after{background:linear-gradient(90deg,rgba(5,5,5,.6) 0,rgba(5,5,5,.14) 46%,rgba(5,5,5,.08)),linear-gradient(0deg,#050505 0,rgba(5,5,5,.62) 13%,transparent 36%)}
  /* wordmark sits in the dark area above the face; tagline and button stay low */
  .mobile-copy{top:0;bottom:60px;display:flex;flex-direction:column;align-items:flex-start}
  .mobile-wordmark{margin-top:84px}
  .mobile-copy p{margin-top:auto}
}

/* ==========================================================================
   STICKY BAR — appears after the hero, highlights the section you are in, shows scroll progress
   ========================================================================== */
html{scroll-padding-top:58px}
.site-bar{position:fixed;z-index:60;top:0;left:0;right:0;width:min(100%,1480px);margin-inline:auto;height:58px;display:flex;align-items:center;gap:34px;padding:0 43px;
  background:rgba(5,5,5,.8);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(139,22,29,.42);box-shadow:0 12px 34px rgba(0,0,0,.38);
  transform:translate3d(0,-110%,0);visibility:hidden;transition:transform .55s var(--ease),visibility 0s linear .55s}
.site-bar.show{transform:none;visibility:visible;transition-delay:0s}
.bar-brand{display:block;flex:none}
.bar-brand img{height:34px;width:auto}
.bar-nav{display:flex;gap:30px;margin-left:10px}
.bar-nav a,.bar-cta{font-family:VeynePoppins,Poppins,Arial,Helvetica,sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;line-height:1}
.bar-nav a{position:relative;padding:22px 0;color:#efebea;transition:color .25s ease}
.bar-nav a::after{content:"";position:absolute;left:0;right:.14em;bottom:15px;height:2px;background:#e32b33;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.bar-nav a:hover{color:#fff}
.bar-nav a:hover::after,.bar-nav a[aria-current="true"]::after{transform:scaleX(1)}
.bar-nav a[aria-current="true"]{color:#ee353d}
.bar-cta{margin-left:auto;display:inline-flex;align-items:center;gap:14px;height:34px;padding:0 16px;border:1px solid #c94a52;color:#f4f1ee;
  background-image:var(--btn-fill);background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .5s var(--ease),border-color .3s ease}
.bar-cta b{color:#e8434b;font-size:14px;font-weight:400;transition:transform .5s var(--ease)}
.bar-toggle{display:none;position:relative;width:44px;height:44px;border:0;background:transparent;flex:none}
.bar-toggle span{position:absolute;right:9px;width:23px;height:1px;background:#eee;transition:transform .24s ease,top .24s ease}
.bar-toggle span:first-child{top:17px}.bar-toggle span:last-child{top:25px}
.site-bar.open .bar-toggle span:first-child{top:21px;transform:rotate(45deg)}
.site-bar.open .bar-toggle span:last-child{top:21px;transform:rotate(-45deg)}
.bar-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#761218,#d7242c);transform-origin:left center;transform:scaleX(var(--p,0));pointer-events:none}
.site-bar a:focus-visible,.site-bar button:focus-visible{outline:2px solid #ee353d;outline-offset:3px}
@media(hover:hover){.bar-cta:hover{background-size:100% 100%;border-color:#bd2a31}.bar-cta:hover b{transform:translate3d(5px,0,0)}}
@media(max-width:1000px){.site-bar{padding:0 26px;gap:24px}.bar-nav{gap:22px}}
@media(max-width:780px){
  html{scroll-padding-top:52px}
  .site-bar{height:52px;padding:0 8px 0 18px;gap:10px}
  .bar-brand img{height:28px}
  .bar-cta{height:32px;padding:0 12px;font-size:9px;gap:9px}
  .bar-toggle{display:block}
  .bar-nav{position:absolute;top:100%;right:12px;min-width:190px;margin:0;padding:8px 18px;flex-direction:column;gap:0;background:rgba(8,8,8,.97);border:1px solid rgba(143,23,30,.5);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);pointer-events:none;transition:opacity .3s ease,transform .5s var(--ease),visibility 0s linear .5s}
  .site-bar.open .bar-nav{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  .bar-nav a{padding:14px 4px;font-size:10px;border-bottom:1px solid rgba(255,255,255,.04)}
  .bar-nav a::after{display:none}
}
@media(prefers-reduced-motion:reduce){.site-bar,.bar-nav,.bar-nav a,.bar-nav a::after,.bar-cta,.bar-cta b{transition:none!important}}

/* ==========================================================================
   MOBILE READABILITY — the smallest texts (7-9 px) lifted to a comfortable minimum; hierarchy and layout unchanged.
   Three knobs: --t-min (secondary / legal), --t-label (labels and buttons), --t-body (paragraphs).
   ========================================================================== */
@media(max-width:780px){
  :root{--t-min:10px;--t-label:11px;--t-body:14px}
  /* hero */
  .mobile-copy p{font-size:13px;letter-spacing:.26em}
  .mobile-copy span{font-size:var(--t-min);letter-spacing:.2em}
  /* buttons and labels */
  .outlined-btn{font-size:var(--t-label);letter-spacing:.16em}
  .outlined-btn b{font-size:17px}
  .eyebrow,.about-copy .eyebrow{font-size:var(--t-label);letter-spacing:.26em}
  .beats-head>a{font-size:var(--t-label);letter-spacing:.16em}
  /* about + banner */
  .about p{font-size:var(--t-body);line-height:1.65;letter-spacing:.015em}
  .beatstars-copy h3{font-size:14px}
  .beatstars-copy p{font-size:var(--t-min);letter-spacing:.12em;line-height:1.6}
  /* footer */
  .footer-tagline{font-size:11px;letter-spacing:.3em}
  .footer-bottom small,.footer-links{font-size:var(--t-min);letter-spacing:.12em}
  .footer-links{gap:10px}
  .footer-links a{padding:10px 5px}
  /* menus and bar */
  .mobile-menu a,.bar-nav a{font-size:var(--t-label)}
  .bar-cta{font-size:var(--t-min)}
  /* Privacy / Terms */
  .legal-back{font-size:var(--t-min)}
  .legal-kicker{font-size:var(--t-label)}
  .legal-updated{font-size:var(--t-label)}
  .legal-note{font-size:12px}
  .legal-section p,.legal-section li{font-size:var(--t-body);line-height:1.7}
  .legal-footer,.legal-footer a,.legal-footer span{font-size:var(--t-min)}
  .legal-footer nav{gap:10px}
  .legal-footer a{padding:10px 5px}
}

/* 404 page */
.nf-main{min-height:56vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.nf-copy{max-width:460px;margin:6px 0 22px;font-size:14px;line-height:1.7;color:#d2ccc8}

/* ==========================================================================
   ABOUT TAGLINE — "SAME SOUNDS DIFFERENT STORIES" and its red rule are live text now (they were blurry pixels inside the photo).
   It follows the photo: --W is the rendered width of the photo (object-fit: cover), --u0 is "1 px of the original 2120-px photo".
   Positions use --u0; sizes use --u, which never goes below a readable size on phones.
   ========================================================================== */
@font-face{font-family:"VeynePoppins";src:url("assets/poppins-regular-subset.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
.about-stage{position:absolute;inset:0;container-type:size;pointer-events:none}
.about .about-tag{--W:max(100cqw,calc(100cqh * 2120 / 1280));--u0:calc(var(--W) / 2120);--u:max(var(--u0),.252px);
  position:absolute;z-index:2;margin:0;width:0;height:0;pointer-events:none;
  left:max(18px,calc(50cqw - var(--W) / 2 + 165 * var(--u0)));top:calc(50cqh - var(--W) * 1280 / 2120 / 2 + 642 * var(--u0));
  padding-left:calc(49 * var(--u));font-family:VeynePoppins,Poppins,Arial,Helvetica,sans-serif;font-weight:400;color:#ece8e6;
  font-size:calc(43.7 * var(--u));line-height:calc(69 * var(--u));letter-spacing:.15em;white-space:nowrap;max-width:none;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.about .about-tag::before{content:"";position:absolute;left:0;top:calc(16 * var(--u));width:max(2px,calc(6 * var(--u)));height:calc(287 * var(--u));background:#e8323c}

/* Banner button on phones: label exactly centred, arrow at the right edge (desktop art has the same layout baked in) */
@media(max-width:780px){
  .beatstars-copy .outlined-btn{display:inline-grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:6px;padding:0 16px}
  .beatstars-copy .outlined-btn span{grid-column:2}
  .beatstars-copy .outlined-btn b{grid-column:3;justify-self:end}
}

/* Accessibility: keep the "VIEW ALL BEATS" link at least 24 px tall (WCAG 2.2 target size) */
.beats-head>a{padding-top:2px}

/* ==========================================================================
   PLAYER GATE — the BeatStars player is loaded only after the visitor presses the button, so nothing is sent to BeatStars before that.
   Same height as the player (450 px) so the page never jumps when it loads.
   ========================================================================== */
.player-gate{height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#030303}
.player-gate .gate-title{margin:0;font-size:16px;letter-spacing:.28em;font-weight:400;color:#f4f1ee}
.player-gate .gate-note{margin:0;max-width:470px;font-size:12px;line-height:1.7;color:#b1aba8;letter-spacing:.02em}
.player-gate .gate-note a{color:#f1eeee;border-bottom:1px solid rgba(227,32,41,.65)}
.gate-btn{display:none;margin-top:6px;background-color:transparent;cursor:pointer}
.js .gate-btn{display:inline-flex}
.gate-link{font-size:11px;letter-spacing:.14em;color:#df383e;border-bottom:1px solid rgba(223,56,62,.65);padding:6px 0 2px}
.gate-link b{font-size:14px;margin-left:6px}
.gate-link:hover{color:#fff}
@media(max-width:780px){
  .player-gate{padding:20px 16px;gap:12px}
  .player-gate .gate-title{font-size:14px;letter-spacing:.22em}
  .player-gate .gate-note{font-size:13px;line-height:1.6}
  .gate-link{font-size:var(--t-label)}
}