/* ===========================================================================
   AUDRIIX shared "world" stylesheet — every section page loads this so they all
   stay in the same neon-synthwave aesthetic as the stage homepage.
   =========================================================================== */
:root{
  --bg:#07030f; --pink:#ff2fae; --hot:#ff79d9; --purple:#b14bff; --cyan:#36e6ff;
  --ink:#f6ecff; --muted:#b9a7d6;
  --glow:0 0 10px var(--pink),0 0 26px rgba(177,75,255,.5);
  --card:rgba(20,7,34,.62);
  --maxw:1100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100%;background:var(--bg);color:var(--ink);
  font-family:'Poppins',sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== the living world background (fixed, content scrolls over it) ===== */
.world-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(130% 90% at 50% -15%,#2c0b46 0%,#140428 48%,#07030f 100%)}
.world-bg::after{content:"";position:absolute;left:50%;top:6%;transform:translateX(-50%);
  width:min(560px,72vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#ff6ad0 0%,#b14bff 52%,transparent 70%);
  filter:blur(10px);opacity:.4;animation:sunPulse 5s ease-in-out infinite}
@keyframes sunPulse{0%,100%{opacity:.36}50%{opacity:.62}}

/* retrowave perspective grid floor */
.grid-floor{position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:-2;
  perspective:340px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent);
  mask-image:linear-gradient(to top,#000 35%,transparent)}
.grid-floor::before{content:"";position:absolute;left:-60%;right:-60%;bottom:-2px;height:240%;
  background-image:linear-gradient(rgba(255,47,174,.55) 2px,transparent 2px),
    linear-gradient(90deg,rgba(54,230,255,.45) 2px,transparent 2px);
  background-size:64px 64px;transform:rotateX(74deg);transform-origin:bottom;
  animation:gridmove 7s linear infinite}
@keyframes gridmove{from{background-position:0 0}to{background-position:0 64px}}

.sparkles{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background-image:
    radial-gradient(2px 2px at 20% 35%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 70% 55%,#ffd6f1,transparent),
    radial-gradient(2px 2px at 40% 82%,#bfefff,transparent),
    radial-gradient(1.6px 1.6px at 85% 28%,#fff,transparent),
    radial-gradient(2px 2px at 56% 18%,#ffd6f1,transparent),
    radial-gradient(1.6px 1.6px at 12% 72%,#fff,transparent);
  opacity:.5;animation:drift 13s linear infinite}
@keyframes drift{0%{transform:translateY(8px);opacity:.3}50%{opacity:.6}100%{transform:translateY(-30px);opacity:.3}}

/* ===== top navigation bar ===== */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(to bottom,rgba(7,3,15,.92),rgba(7,3,15,.45) 70%,transparent);
  backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:30px;filter:drop-shadow(0 0 10px var(--pink))}
.nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;color:var(--muted);transition:.2s}
.nav a:hover,.nav a.active{color:#fff;text-shadow:var(--glow)}
.nav a.active{background:rgba(255,47,174,.12)}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,121,217,.4);
  display:grid;place-items:center;background:rgba(20,7,34,.5);cursor:pointer;transition:.2s}
.iconbtn:hover{border-color:var(--hot);box-shadow:0 0 16px var(--pink)}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2}

/* hamburger menu toggle — hidden on desktop, shown on mobile (far right) */
.menu-toggle{display:none;width:40px;height:40px;flex:0 0 auto;padding:0;cursor:pointer;
  border-radius:10px;border:1.5px solid rgba(255,121,217,.42);background:rgba(20,7,34,.55);
  place-items:center;transition:.2s}
.menu-toggle:hover{border-color:var(--hot);box-shadow:0 0 16px var(--pink)}
.menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;
  box-shadow:0 6px 0 #fff,0 -6px 0 #fff}

/* social link bar (top-right). 8 neon circles linking to her platforms */
.socialbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.social{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,121,217,.42);
  display:grid;place-items:center;background:rgba(20,7,34,.5);transition:.2s}
@media(hover:hover){.social:hover{border-color:var(--hot);box-shadow:0 0 14px var(--pink);transform:translateY(-1px)}}
.social:active{border-color:var(--hot);box-shadow:0 0 14px var(--pink)}
.social svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}

/* ===== page scaffold ===== */
.page{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,6vw,72px) clamp(16px,4vw,40px) 120px}
.eyebrow{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--hot);
  text-shadow:0 0 12px var(--pink);margin-bottom:10px}
.page-title{font-size:clamp(40px,8vw,92px);font-weight:700;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;text-shadow:0 0 14px var(--pink),0 0 40px var(--purple);margin-bottom:8px}
.lede{font-size:clamp(15px,2vw,19px);color:var(--muted);max-width:60ch;margin-bottom:38px}
.section-title{font-size:clamp(22px,3.4vw,32px);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;margin:54px 0 22px;text-shadow:0 0 12px var(--purple)}

/* neon panels / cards */
.card{background:var(--card);border:1.5px solid rgba(255,121,217,.28);border-radius:16px;
  padding:22px;box-shadow:0 0 0 1px rgba(177,75,255,.12),0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);transition:.25s}
@media(hover:hover){.card:hover{border-color:var(--hot);box-shadow:0 0 26px rgba(255,47,174,.35),0 18px 50px rgba(0,0,0,.5)}}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;padding:13px 24px;border-radius:999px;
  border:1.6px solid var(--hot);color:#fff;cursor:pointer;transition:.22s;
  background:rgba(255,47,174,.08)}
@media(hover:hover){.btn:hover{background:var(--pink);box-shadow:0 0 26px var(--pink);transform:translateY(-1px)}}
/* tap feedback that works on touch: pink only while pressed, clears on release */
.btn:active{background:var(--pink);box-shadow:0 0 26px var(--pink)}
.btn.ghost{border-color:rgba(255,121,217,.4);background:transparent;color:var(--muted)}
.btn.ghost:hover{color:#fff;border-color:var(--hot);background:rgba(255,47,174,.1);box-shadow:0 0 18px rgba(255,47,174,.4)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* media embeds keep aspect + neon frame */
.embed{position:relative;border-radius:14px;overflow:hidden;border:1.5px solid rgba(54,230,255,.3);
  box-shadow:0 0 22px rgba(54,230,255,.18)}
.embed.r16x9{aspect-ratio:16/9}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* footer */
.foot{max-width:var(--maxw);margin:0 auto;padding:40px clamp(16px,4vw,40px);
  border-top:1px solid rgba(255,121,217,.18);display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.foot .socials{display:flex;gap:16px}
.foot .socials a{letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.foot .socials a:hover{color:#fff;text-shadow:var(--glow)}

.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:26px;transition:.2s}
.back:hover{color:#fff;text-shadow:var(--glow)}

@media(max-width:760px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}

  /* topbar: social icons across the top, then logo left + hamburger right */
  .topbar{flex-wrap:wrap;gap:10px}
  .socialbar{order:1;width:100%;justify-content:center;gap:6px;flex-wrap:nowrap}
  .social{width:32px;height:32px;border-width:1.5px}
  .social svg{width:16px;height:16px}
  .brand{order:2}
  .menu-toggle{display:grid;order:3;margin-left:auto}

  /* nav collapses into a dropdown panel toggled by the hamburger */
  .nav{display:none;order:4;width:100%;flex-direction:column;flex-wrap:nowrap;gap:2px;
    margin:2px 0 0;padding:8px;border-radius:14px;
    background:rgba(13,4,30,.97);border:1.5px solid rgba(255,121,217,.3);
    box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .topbar.open .nav{display:flex}
  .nav a{font-size:14px;padding:11px 14px;border-radius:10px}

  /* platform / link buttons: continuous 2-up grid on mobile. the feature/release
     text column becomes a 2-col grid — heading, meta and blurb span the full width,
     and EVERY button (across all btn-row groups) flows into the two columns in DOM
     order. so buttons always pair up evenly, every button is the same half-width,
     and a lone odd button only ever lands on the LAST line. */
  .feature > div:not(.cover), .release > div:not(.cover){
    display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:8px}
  .feature > div:not(.cover) > :not(.btn-row),
  .release > div:not(.cover) > :not(.btn-row){grid-column:1 / -1}
  .feature .btn-row, .release .btn-row{display:contents}
  .btn-row .btn{min-width:0;justify-content:center;text-align:center;
    white-space:normal;overflow-wrap:break-word;line-height:1.2;
    padding:13px 10px;font-size:13px;letter-spacing:.03em}

  /* single-release pages (.release): the cover + text run full-width (~343px),
     wider than the music-page card whose content is inset by the card's 22px
     padding (~296px). Inset the .release block ~24px each side on mobile so the
     image + text match the music page's narrower footprint. Scoped to .release
     so the music page (.feature) is never affected. */
  .release{padding-left:24px;padding-right:24px}

  /* single-release blurb: 16px reads too big on mobile, shrink it */
  .release .blurb{font-size:14px;line-height:1.5}
}