:root {
  --accent-1:#27f4ff;
  --accent-2:#ff2bd6;
  --accent-3:#c8ff39;
  --accent-4:#ff7a1a;
  --surface:#111018;
  --surface-2:#191622;
  --ink:#f8f8fb;
  --muted:#c2bbcd;
  --line:rgba(255,255,255,.14);
  --radius:28px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#050507}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#050507;overflow-x:hidden}
a{color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
.scene{position:fixed;inset:0;z-index:0;background:#08070b center/cover no-repeat;transform:translateZ(0)}
.scene::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68),transparent 28%,transparent 72%,rgba(0,0,0,.66)),radial-gradient(circle at 50% 35%,transparent 18%,rgba(0,0,0,.64) 100%)}
#particles-js{position:fixed;inset:0;z-index:1;pointer-events:none!important;overflow:hidden;isolation:isolate}
#particles-js .spray-particle-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none!important;opacity:1;filter:saturate(1.18) contrast(1.05)}
.topbar,.site-shell,footer{position:relative;z-index:2}
.topbar{position:fixed;left:50%;top:18px;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(9,8,12,.58);backdrop-filter:blur(18px);z-index:20;box-shadow:0 18px 60px rgba(0,0,0,.26)}
.brand{text-decoration:none;font-weight:900;letter-spacing:.05em}.topbar nav{display:flex;gap:16px}.topbar nav a{text-decoration:none;color:var(--muted);font-weight:700;font-size:.9rem}.topbar nav a:hover{color:var(--ink)}
.site-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:0 0 80px}
.section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:110px clamp(18px,5vw,70px);scroll-margin-top:20px}
.glass{min-height:auto;margin:14vh 0;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,rgba(12,10,17,.78),rgba(26,20,35,.66));backdrop-filter:blur(22px);box-shadow:0 40px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.05)}
.eyebrow{margin:0 0 14px;color:var(--accent-1);font-size:.78rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
h1,h2,p{max-width:880px}.hero{align-items:flex-start}.artist-title{font-size:clamp(5rem,16vw,13rem);line-height:.72;margin:.08em 0 .16em;letter-spacing:-.075em;transform-style:preserve-3d;text-shadow:0 6px 0 rgba(255,43,214,.34),0 13px 0 rgba(39,244,255,.17),0 28px 60px rgba(0,0,0,.65);transition:transform .18s ease;text-wrap:balance}.hero-tagline{font-size:clamp(1rem,2vw,1.3rem);color:var(--muted);margin:0 0 24px}.platform-links{display:flex;flex-wrap:wrap;gap:10px}.platform-link,.scroll-cue,.primary-button,.preview-button,.back-button{border:1px solid rgba(255,255,255,.16);border-radius:999px;text-decoration:none;font-weight:900}.platform-link{padding:10px 14px;background:rgba(13,12,17,.72);transition:transform .18s ease,box-shadow .18s ease}.platform-link:hover{transform:translateY(-3px);box-shadow:0 10px 40px color-mix(in srgb,var(--accent-2) 30%,transparent)}.scroll-cue{display:inline-flex;margin-top:28px;padding:10px 14px;background:rgba(0,0,0,.42)}
.section h2{font-size:clamp(2.4rem,6vw,5.8rem);line-height:.92;letter-spacing:-.055em;margin:.08em 0 .28em}.section-copy{color:var(--muted);line-height:1.7}
.fan-deck{position:relative;min-height:620px;margin-top:48px;perspective:1600px;display:flex;align-items:center;justify-content:center}.media-card{--offset:0;--rotation:0deg;position:absolute;width:min(290px,72vw);aspect-ratio:3/4;transform:translateX(calc(var(--offset)*72px)) rotate(var(--rotation)) scale(.94);transform-origin:50% 110%;transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .3s,opacity .3s;filter:brightness(.82);z-index:var(--z,1);transform-style:preserve-3d}.media-card:hover{filter:brightness(1);transform:translateX(calc(var(--offset)*72px)) rotate(var(--rotation)) translateY(-18px) scale(.97)}.media-card.is-selected{z-index:50!important;filter:brightness(1.05);transform:translateX(0) rotate(0deg) translateY(-22px) scale(1.08)}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.82,.2,1)}.media-card.is-flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;inset:0;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0b0a0e;box-shadow:0 30px 70px rgba(0,0,0,.5)}.card-front{pointer-events:auto}.card-back{pointer-events:none;transform:rotateY(180deg);display:flex;flex-direction:column;padding:12px;background:linear-gradient(160deg,#09090b,#1c1522)}.media-card.is-flipped .card-front{pointer-events:none}.media-card.is-flipped .card-back{pointer-events:auto}.card-front img{width:100%;height:100%;object-fit:cover;display:block}.card-overlay{position:absolute;inset:auto 0 0;padding:44px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.9));display:flex;flex-direction:column;gap:10px}.track-title{font-weight:950;font-size:1.4rem}.preview-button,.back-button{align-self:flex-start;padding:9px 13px;color:#07070a;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border:0}.back-button{margin-top:10px;position:relative;z-index:10;pointer-events:auto;touch-action:manipulation}.card-back video{width:100%;flex:1;min-height:0;object-fit:contain;background:#000;border-radius:16px}.coming-soon{font-size:.82rem;color:var(--muted);font-weight:800}
.updates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:22px}.update-card{padding:22px;border-radius:20px;border:1px solid var(--line);background:rgba(0,0,0,.28)}.update-card h3{margin:.25em 0;font-size:1.28rem}.update-type{color:var(--accent-3);font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.15em}
.connect-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.88fr);gap:clamp(28px,6vw,90px);align-items:center}.business-email{color:var(--accent-1);font-weight:900}.contact-form{display:grid;gap:14px;padding:26px;border:1px solid var(--line);border-radius:24px;background:rgba(9,8,13,.75)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-form label{display:grid;gap:7px;font-size:.76rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.contact-form label span{color:var(--muted);font-weight:600;text-transform:none}.contact-form input,.contact-form textarea{width:100%;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.045);color:var(--ink);outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-1) 18%,transparent)}.primary-button{padding:14px;color:#09090b;border:0;background:linear-gradient(90deg,var(--accent-1),#a5fbff,var(--accent-2))}.form-status{min-height:1.4em;margin:0;color:var(--muted);font-size:.88rem}.turnstile-slot{min-height:1px}
footer{width:min(1180px,calc(100% - 28px));margin:0 auto 28px;padding:20px;text-align:center;color:var(--muted);font-size:.82rem}.intro{position:fixed;inset:0;z-index:1000;background:#020203;display:grid;place-items:center;overflow:hidden;transition:opacity .9s ease,visibility .9s ease}.intro.is-done{opacity:0;visibility:hidden;pointer-events:none}.intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.intro-shade{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,0,0,.12),rgba(0,0,0,.7))}.intro-copy{position:relative;text-align:center;padding:24px}.intro-copy h1{font-size:clamp(2.6rem,7vw,7rem);line-height:.88;margin:0;text-shadow:0 14px 50px #000;animation:introFloat 2.2s ease-in-out infinite alternate}.skip-intro{position:absolute;right:22px;bottom:22px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff}.reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(8px);transition:opacity .7s,transform .7s,filter .7s}.reveal.is-visible{opacity:1;transform:none;filter:none}@keyframes introFloat{from{transform:translate3d(-4px,-3px,0) rotateX(1deg)}to{transform:translate3d(6px,5px,20px) rotateY(-2deg)}}
@media(max-width:760px){.topbar nav{gap:9px}.topbar nav a{font-size:.78rem}.section{padding:100px 18px}.glass{margin:9vh 0}.artist-title{font-size:clamp(4.2rem,23vw,8.8rem)}.fan-deck{position:relative;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;min-height:520px;padding:34px 8vw}.media-card{position:relative;inset:auto;flex:0 0 min(290px,78vw);transform:none!important;scroll-snap-align:center;filter:none}.media-card.is-selected{transform:translateY(-8px) scale(1.02)!important}.connect-section{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro-copy h1,.reveal,.media-card,.card-inner{animation:none;transition:none}.reveal{opacity:1;transform:none;filter:none}}

/* ==========================================================
   NEW/30 | MEMBER ACCESS v1
   ========================================================== */

.member-section {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(300px, .95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.member-copy h2 {
  margin:
    .35rem 0 1rem;
  font-size:
    clamp(2.4rem, 7vw, 5.8rem);
  line-height: .95;
}

.member-eyebrow {
  margin: 0;
  color: #ff8eaa;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.member-lead {
  max-width: 620px;
  color:
    rgba(255, 247, 249, .72);
  line-height: 1.75;
}

.member-panel {
  padding: 1px;

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 23, 76, .62),
      rgba(255, 142, 170, .15),
      rgba(255, 255, 255, .04)
    );

  box-shadow:
    0 30px 90px
    rgba(70, 0, 15, .42);
}

.member-login-form,
.member-status-card {
  display: grid;
  gap: 1rem;

  padding:
    clamp(1.3rem, 4vw, 2rem);

  border-radius:
    27px;

  background:
    linear-gradient(
      145deg,
      rgba(22, 7, 12, .97),
      rgba(8, 3, 5, .96)
    );

  backdrop-filter:
    blur(20px);
}

.member-login-form label {
  display: grid;
  gap: .45rem;
}

.member-login-form label > span {
  color:
    rgba(255, 247, 249, .72);

  font-size:
    .7rem;

  font-weight:
    900;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}

.member-login-form small {
  color:
    rgba(255, 215, 224, .48);
  font-weight: 600;
}

.member-login-form input {
  width: 100%;

  box-sizing:
    border-box;

  padding:
    .9rem 1rem;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius:
    14px;

  outline:
    none;

  color:
    #fff7f9;

  background:
    rgba(255, 255, 255, .045);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.member-login-form input:focus {
  border-color:
    rgba(255, 66, 109, .75);

  background:
    rgba(255, 23, 76, .05);

  box-shadow:
    0 0 0 3px
    rgba(255, 23, 76, .12);
}

.member-turnstile-slot {
  min-height: 65px;
  overflow: hidden;
  border-radius: 14px;
}

.member-primary-button {
  width: 100%;

  padding:
    .95rem 1.2rem;

  border:
    1px solid
    rgba(255, 142, 170, .4);

  border-radius:
    999px;

  color: white;

  background:
    linear-gradient(
      90deg,
      #ff174c,
      #ff426d
    );

  font-weight:
    900;

  letter-spacing:
    .04em;

  cursor:
    pointer;

  box-shadow:
    0 12px 36px
    rgba(143, 0, 31, .32);

  transition:
    transform 160ms ease,
    opacity 160ms ease,
    box-shadow 160ms ease;
}

.member-primary-button:hover:not(:disabled) {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 44px
    rgba(255, 23, 76, .3);
}

.member-primary-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.member-form-status {
  min-height: 1.4rem;
  margin: 0;

  color:
    rgba(255, 247, 249, .67);

  font-size: .82rem;
  line-height: 1.5;
}

.member-form-status[data-state="success"] {
  color: #b8f5d2;
}

.member-form-status[data-state="error"] {
  color: #ffb1bd;
}

.member-status-card h3 {
  margin: 0;

  font-size:
    clamp(2rem, 5vw, 3.7rem);
}

.member-status-card > p {
  margin: 0;
}

.member-access-state {
  margin:
    .35rem 0 1rem;

  padding:
    .9rem 1rem;

  border:
    1px solid
    rgba(255, 142, 170, .18);

  border-radius:
    14px;

  color:
    #ffd7e0;

  background:
    rgba(255, 23, 76, .055);

  line-height:
    1.5;
}

.member-access-state[data-state="active"] {
  border-color:
    rgba(91, 234, 158, .28);

  color:
    #b8f5d2;

  background:
    rgba(35, 156, 94, .08);
}

@media (max-width: 760px) {
  .member-section {
    grid-template-columns:
      1fr;
  }

  .member-panel {
    width: 100%;
  }
}


/* NEW/30 | AUTH VISIBILITY SAFETY */
#member-signed-out[hidden],
#member-signed-in[hidden] {
  display: none !important;
}



/* ==========================================================
   NEW/30 PUBLIC WELCOME
   ========================================================== */

.hero-welcome-script {
  max-width: 760px;
  margin: .3rem 0 1.25rem;

  font-family:
    "Snell Roundhand",
    "URW Chancery L",
    "Brush Script MT",
    "Segoe Script",
    cursive;

  font-size: clamp(2rem, 4.2vw, 4.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.06;

  letter-spacing: .01em;

  color: #fff1f5;

  text-shadow:
    0 0 16px rgba(255, 23, 76, .34),
    0 10px 35px rgba(0, 0, 0, .46);
}

.member-dashboard-link {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: .8rem;
  text-decoration: none;
}


/* ==========================================================
   NEW/30 VISIBILITY GUARANTEE
   ========================================================== */

[hidden] {
  display: none !important;
}


/* ==========================================================
   NEW/30 MEMBER NAV PROFILE
   ========================================================== */

.nav-member-profile {
  position: relative;
}

.nav-profile-button {
  display: flex;
  align-items: center;
  gap: .6rem;

  padding: .25rem .55rem;

  border: 1px solid rgba(255, 142, 170, .25);
  border-radius: 999px;

  color: #fff7f9;
  background: rgba(18, 8, 13, .66);

  cursor: pointer;
}

.nav-avatar-shell {
  position: relative;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  overflow: hidden;

  border: 1px solid rgba(255, 142, 170, .42);
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ff174c,
      #46000f
    );
}

.nav-profile-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.nav-profile-initial {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  font-weight: 900;
}

.nav-profile-name {
  max-width: 130px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-profile-menu {
  position: absolute;
  z-index: 120;

  top: calc(100% + .65rem);
  right: 0;

  width: 230px;

  padding: .7rem;

  border: 1px solid rgba(255, 142, 170, .22);
  border-radius: 18px;

  background:
    rgba(13, 6, 10, .97);

  box-shadow:
    0 24px 70px rgba(0,0,0,.52);

  backdrop-filter: blur(24px);
}

.nav-profile-menu strong {
  display: block;

  padding:
    .55rem .7rem
    .75rem;

  color: #ff8eaa;

  font-size: .72rem;
  letter-spacing: .12em;
}

.nav-profile-menu a,
.nav-profile-menu button,
.nav-photo-action {
  width: 100%;

  display: block;

  padding: .7rem;

  border: 0;
  border-radius: 11px;

  color: #ffd7e0;

  text-align: left;
  text-decoration: none;

  background: transparent;

  cursor: pointer;
}

.nav-profile-menu a:hover,
.nav-profile-menu button:hover,
.nav-photo-action:hover {
  background:
    rgba(255, 66, 109, .1);
}


/* ==========================================================
   NEW/30 AUTHENTICATED MEMBER EXPLORER
   ========================================================== */

.member-explorer {
  overflow: hidden;
}

.member-explorer-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;

  margin-bottom: 2rem;
}

.member-explorer-heading h2 {
  margin:
    .35rem 0
    .75rem;

  font-size:
    clamp(2.1rem, 5vw, 4.8rem);

  line-height: .95;
}

.member-explorer-dashboard {
  flex: 0 0 auto;

  padding:
    .85rem
    1.2rem;

  border:
    1px solid
    rgba(255, 142, 170, .26);

  border-radius:
    999px;

  color: #fff7f9;

  text-decoration: none;

  background:
    linear-gradient(
      90deg,
      rgba(255, 23, 76, .72),
      rgba(255, 66, 109, .62)
    );
}

.member-explorer-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 1rem;
}

.member-explorer-card {
  min-height: 190px;

  padding: 1.35rem;

  border:
    1px solid
    rgba(255, 142, 170, .13);

  border-radius: 22px;

  color: #fff7f9;

  text-decoration: none;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .045),
      rgba(70, 0, 15, .14)
    );

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.member-explorer-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(255, 142, 170, .38);

  background:
    linear-gradient(
      145deg,
      rgba(255, 23, 76, .12),
      rgba(255, 255, 255, .045)
    );
}

.member-explorer-card span {
  display: block;

  margin-bottom: 2.3rem;

  color: #ff8eaa;

  font-size: .72rem;
  letter-spacing: .17em;
}

.member-explorer-card strong {
  display: block;

  margin-bottom: .5rem;

  font-size: 1.35rem;
}

.member-explorer-card small {
  color:
    rgba(255, 247, 249, .62);

  line-height: 1.5;
}


@media (max-width: 900px) {

  .member-explorer-heading {
    display: block;
  }

  .member-explorer-dashboard {
    display: inline-block;
    margin-top: 1rem;
  }

  .member-explorer-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (max-width: 580px) {

  .member-explorer-grid {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================
   PHASE 16P-1 | UNIFIED MAIN-SITE AVATAR
   ========================================================== */

.nav-avatar-shell {
  position: relative;
}

#nav-profile-image,
#nav-profile-initial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#nav-profile-image {
  display: block;
  object-fit: cover;
  object-position: center;
}

#nav-profile-initial {
  display: grid;
  place-items: center;
}

#nav-profile-image[hidden],
#nav-profile-initial[hidden] {
  display: none !important;
}


/* NEW30 MEMBER TURNSTILE NORMAL-SIZE GUARD */
.member-turnstile-slot {
  width: 100%;
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.member-turnstile-slot > div {
  max-width: 100%;
}