/* Bellissima Tempesta: shared stylesheet (home + album pages) */

:root{
  --bg:#0A0410;
  --bg2:#12071B;
  --pink:#E91E8C;
  --pink-hot:#FF3D9E;
  --pink-pale:#FFC2E2;
  --violet:#7B2FA8;
  --violet-deep:#3D1259;
  --text:#F6EDF4;
  --muted:#B99BB0;
  --faint:#6E5470;
  --line:rgba(255,194,226,.13);
  --e:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--text);
  font-family:'Jost',sans-serif;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden;height:100vh}
/* Deters casual saving: no drag, no long-press "Save Image" sheet on iOS,
   no selection. Not real protection, the files are still fetchable by URL. */
img{display:block;max-width:100%;
  -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--pink);color:#fff}

/* ══════════ ATMOSPHERE ══════════ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.o1{width:70vw;height:70vw;left:-18vw;top:-22vw;
  background:radial-gradient(circle,rgba(233,30,140,.34),transparent 68%)}
.o2{width:62vw;height:62vw;right:-16vw;top:16vh;
  background:radial-gradient(circle,rgba(123,47,168,.40),transparent 68%)}
.o3{width:52vw;height:52vw;left:22vw;bottom:-20vh;
  background:radial-gradient(circle,rgba(255,61,158,.20),transparent 68%)}
.o4{width:40vw;height:40vw;right:12vw;bottom:6vh;
  background:radial-gradient(circle,rgba(61,18,89,.55),transparent 70%)}
#dust{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55}
.mesh{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:linear-gradient(rgba(255,194,226,1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,194,226,1) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%)}
.grain{position:fixed;inset:-150%;z-index:2;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 7s steps(8) infinite}
@keyframes gr{0%,100%{transform:translate(0,0)}12%{transform:translate(-6%,-8%)}
  25%{transform:translate(-12%,6%)}37%{transform:translate(6%,-14%)}
  50%{transform:translate(-8%,14%)}62%{transform:translate(10%,2%)}
  75%{transform:translate(2%,10%)}87%{transform:translate(-10%,4%)}}
.vign{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(6,2,10,.72) 100%)}
.clight{position:fixed;width:520px;height:520px;border-radius:50%;z-index:2;
  pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .6s;filter:blur(50px);
  background:radial-gradient(circle,rgba(233,30,140,.16),transparent 62%)}
body.mouse .clight{opacity:1}

/* ══════════ INTRO ══════════ */
#intro{position:fixed;inset:0;z-index:1000;background:#060209;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  overflow:hidden}
#intro .spark{position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--pink-hot);
  box-shadow:0 0 20px 6px rgba(233,30,140,.9),0 0 60px 20px rgba(233,30,140,.5);
  transform:scale(0);animation:spark 1.5s var(--e) .25s forwards}
@keyframes spark{0%{transform:scale(0);opacity:0}
  22%{transform:scale(1);opacity:1}100%{transform:scale(112);opacity:0}}
#intro .halo{position:absolute;width:130vw;height:130vw;border-radius:50%;
  background:radial-gradient(circle,rgba(233,30,140,.30),rgba(123,47,168,.16) 38%,transparent 66%);
  filter:blur(70px);transform:scale(.2);opacity:0;
  animation:halo 3.4s var(--e) .85s forwards}
@keyframes halo{0%{transform:scale(.2);opacity:0}
  40%{opacity:1}100%{transform:scale(1);opacity:.85}}
#intro .ring{position:absolute;border:1px solid rgba(255,194,226,.22);border-radius:50%;
  width:44vmin;height:44vmin;transform:scale(.3);opacity:0}
#intro .ring.r1{animation:ring 2.6s var(--e) 1.0s forwards}
#intro .ring.r2{animation:ring 2.6s var(--e) 1.25s forwards}
#intro .ring.r3{animation:ring 2.6s var(--e) 1.5s forwards}
@keyframes ring{0%{transform:scale(.3);opacity:0}
  25%{opacity:.6}100%{transform:scale(2.3);opacity:0}}
#intro .stage{position:relative;z-index:5;text-align:center;padding:0 6vw}
#intro .nm{font-family:'Great Vibes',cursive;
  font-size:clamp(2.2rem,8vw,7rem);line-height:1.42;white-space:nowrap;padding:.1em 0}
#intro .nm span{display:inline-block;opacity:0;transform:translateY(46px) rotate(6deg);
  filter:blur(10px);color:#fff}
#intro .nm span.lit{animation:lit 1.5s var(--e) forwards}
@keyframes lit{
  0%{opacity:0;transform:translateY(46px) rotate(6deg);filter:blur(10px);
     text-shadow:0 0 0 rgba(233,30,140,0)}
  60%{text-shadow:0 0 28px rgba(255,61,158,.95),0 0 60px rgba(233,30,140,.6)}
  100%{opacity:1;transform:none;filter:blur(0);
     text-shadow:0 0 16px rgba(255,61,158,.55),0 0 44px rgba(233,30,140,.35)}}
#intro .rule{width:0;height:1px;margin:2.4rem auto 0;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  animation:rule 1.6s var(--e) 2.9s forwards}
@keyframes rule{to{width:min(340px,62vw)}}
#intro .tag{margin-top:1.5rem;font-size:.64rem;letter-spacing:.52em;
  text-transform:uppercase;color:var(--muted);opacity:0;
  animation:fi 1.4s var(--e) 3.25s forwards}
@keyframes fi{to{opacity:1}}
#intro .enter{margin-top:3.4rem;opacity:0;animation:fi 1.2s var(--e) 3.9s forwards;
  font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);padding:.95rem 2.4rem;border-radius:100px;
  cursor:pointer;background:transparent;font-family:inherit;
  transition:color .5s,border-color .5s,background .5s,box-shadow .5s}
#intro .enter:hover{color:#fff;border-color:var(--pink);
  background:rgba(233,30,140,.12);box-shadow:0 0 40px rgba(233,30,140,.35)}
#intro.out{opacity:0;filter:blur(22px);transform:scale(1.09);
  transition:opacity 1.5s var(--e),filter 1.5s var(--e),transform 1.5s var(--e);
  pointer-events:none}

/* ══════════ NAV ══════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:800;
  padding:1.6rem clamp(1.4rem,5vw,4rem);display:flex;
  justify-content:space-between;align-items:center;
  transition:background .6s,backdrop-filter .6s,padding .6s,border-color .6s;
  border-bottom:1px solid transparent}
nav.solid{background:rgba(10,4,16,.62);backdrop-filter:blur(18px);
  padding-top:1.05rem;padding-bottom:1.05rem;border-color:var(--line)}
nav .wm{font-family:'Great Vibes',cursive;font-size:1.6rem;
  text-shadow:0 0 22px rgba(233,30,140,.45)}
nav ul{display:flex;gap:2.5rem;list-style:none}
nav ul a{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);position:relative;padding-bottom:4px;transition:color .45s}
nav ul a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--pink);box-shadow:0 0 10px var(--pink);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e)}
nav ul a:hover{color:#fff}
nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:34px;height:34px;position:relative;
  background:none;border:0;cursor:pointer;z-index:1002}
.burger i{position:absolute;left:5px;right:5px;height:1px;background:var(--text);
  transition:transform .55s var(--e),opacity .35s}
.burger i:nth-child(1){top:12px}.burger i:nth-child(2){top:21px}
body.nav-open .burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:1001;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;
  background:rgba(10,4,16,.94);backdrop-filter:blur(22px);
  opacity:0;pointer-events:none;transition:opacity .6s var(--e)}
#menu a{font-family:'Great Vibes',cursive;font-size:2.5rem;line-height:1.5;
  padding:.1em .2em;color:var(--text);opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--e),transform .6s var(--e),color .4s}
#menu a:active{color:var(--pink)}
/* nav creates its own stacking context, so the burger's z-index can't
   escape it, so lift the whole bar above the overlay while it's open */
body.nav-open nav{z-index:1002;background:none;backdrop-filter:none;border-color:transparent}
body.nav-open #menu{opacity:1;pointer-events:auto}
body.nav-open #menu a{opacity:1;transform:none}
body.nav-open #menu a:nth-child(1){transition-delay:.10s}
body.nav-open #menu a:nth-child(2){transition-delay:.18s}
body.nav-open #menu a:nth-child(3){transition-delay:.26s}
body.nav-open #menu a:nth-child(4){transition-delay:.34s}
body.nav-open #menu a:nth-child(5){transition-delay:.42s}

/* ══════════ SHARED ══════════ */
main{position:relative;z-index:5}
.wrap{max-width:1460px;margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem)}
/* padding-block only. A `padding: X 0` shorthand here would silently
   wipe out .wrap's horizontal padding on elements that carry both */
.pad{padding-block:clamp(6rem,15vh,12rem)}
.pad-s{padding-block:clamp(3.5rem,8vh,6rem)}
.rv{opacity:0;transform:translateY(46px);filter:blur(8px);
  transition:opacity 1.3s var(--e),transform 1.3s var(--e),filter 1.3s var(--e)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv[data-d="1"]{transition-delay:.13s}.rv[data-d="2"]{transition-delay:.26s}
.rv[data-d="3"]{transition-delay:.39s}.rv[data-d="4"]{transition-delay:.52s}

.eyebrow{display:inline-flex;align-items:center;gap:.9rem;font-size:.6rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--pink-pale)}
.eyebrow i{width:38px;height:1px;background:var(--pink);
  box-shadow:0 0 8px var(--pink);display:block}
/* script headings need a roomy line-box: background-clip:text only paints
   inside the element box, so tight line-height shears the swashes off */
.shead{display:flex;align-items:center;gap:1.5rem;margin-bottom:clamp(2.6rem,6vh,4.6rem)}
.shead .n{font-size:.58rem;letter-spacing:.34em;color:var(--pink);flex-shrink:0}
.shead h2{font-family:'Great Vibes',cursive;font-size:clamp(2.1rem,5vw,3.6rem);
  line-height:1.5;padding:.14em .1em;white-space:nowrap;
  background:linear-gradient(170deg,#fff,var(--pink-pale) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(233,30,140,.4))}
.shead .ln{flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.glass{background:linear-gradient(150deg,rgba(255,194,226,.06),rgba(123,47,168,.04));
  border:1px solid var(--line);backdrop-filter:blur(14px);border-radius:20px}
.script-grad{font-family:'Great Vibes',cursive;
  background:linear-gradient(170deg,#fff,#FFD9EE 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(233,30,140,.45))}

/* ══════════ HERO (home) ══════════ */
.hero{min-height:100svh;display:flex;align-items:center;position:relative}
.hero-in{width:100%;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem,6vw,6rem);align-items:center}
.hero h1{font-family:'Great Vibes',cursive;
  font-size:clamp(2.6rem,6.1vw,5.7rem);line-height:1.2;padding:.1em .08em;
  margin:1.35rem -.08em 0;
  background:linear-gradient(172deg,#fff 6%,#FFD9EE 40%,var(--pink) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(233,30,140,.55))}
.hero .sub{margin-top:2rem;display:flex;gap:1.6rem;align-items:center;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  flex-wrap:wrap}
.hero .sub s{width:4px;height:4px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 8px var(--pink);display:block;text-decoration:none}
.cta{margin-top:3rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  padding:1.05rem 2.5rem;border-radius:100px;position:relative;overflow:hidden;
  border:1px solid var(--pink);color:#fff;transition:box-shadow .55s,color .55s;
  display:inline-block}
.btn span{position:relative;z-index:2}
.btn::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--pink),var(--pink-hot));
  transition:transform .7s var(--e);transform-origin:left}
.btn.solid::before{transform:scaleX(1)}
.btn.ghost::before{transform:scaleX(0)}
.btn.ghost{color:var(--pink-pale)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:#fff;box-shadow:0 0 42px rgba(233,30,140,.5)}
.btn.solid:hover{box-shadow:0 0 54px rgba(233,30,140,.65)}

.portal{position:relative;aspect-ratio:4/5;border-radius:200px 200px 24px 24px;
  overflow:hidden;border:1px solid var(--line);
  box-shadow:0 0 90px rgba(233,30,140,.22),inset 0 0 60px rgba(123,47,168,.25);
  clip-path:inset(100% 0 0 0);transition:clip-path 1.7s var(--e) .2s}
.portal.in{clip-path:inset(0 0 0 0)}
.portal img{width:100%;height:100%;object-fit:cover;object-position:center 16%;
  transform:scale(1.1)}
.portal::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,4,16,.9),transparent 46%),
    radial-gradient(ellipse at 50% 0%,rgba(233,30,140,.28),transparent 58%)}
.cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:.53rem;letter-spacing:.4em;text-transform:uppercase;color:var(--faint)}
.cue i{width:1px;height:52px;display:block;
  background:linear-gradient(var(--pink),transparent);animation:cue 2.4s var(--e) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
  48%{transform:scaleY(1);transform-origin:top}
  52%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ══════════ RELEASE / COVER ══════════ */
.rel{display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(2.2rem,6vw,5.4rem);align-items:center;padding:clamp(2rem,4vw,3.4rem);
  border-radius:26px}
.cover{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(233,30,140,.28)}
.cover img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--e)}
.rel:hover .cover img{transform:scale(1.05)}
.cover .sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 48%,transparent 58%);
  transform:translateX(-120%);transition:transform 1.1s var(--e)}
.rel:hover .cover .sheen{transform:translateX(120%)}
.pill{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
  padding:.62rem 1.5rem;border-radius:100px;color:#fff;
  background:linear-gradient(100deg,var(--pink),var(--pink-hot));
  box-shadow:0 0 34px rgba(233,30,140,.6)}
.rel h3{font-family:'Great Vibes',cursive;font-size:clamp(2.6rem,6.4vw,5rem);
  line-height:1.34;padding:.1em .08em;margin:.35rem -.08em 1.5rem;
  background:linear-gradient(170deg,#fff,#FFD9EE 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(233,30,140,.45))}
.cnt{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:2.4rem}
.cnt div{text-align:center;padding:1.05rem .4rem;border-radius:14px;
  background:linear-gradient(160deg,rgba(255,194,226,.07),rgba(123,47,168,.05));
  border:1px solid var(--line)}
.cnt .v{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:400;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--pink-pale);
  text-shadow:0 0 22px rgba(233,30,140,.6)}
.cnt .k{font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);opacity:.8;margin-top:.55rem}
.tk{list-style:none}
.tk li{display:flex;align-items:center;gap:1rem;padding:.72rem .8rem;
  border-radius:10px;transition:background .5s,padding-left .5s var(--e);
  border-bottom:1px solid rgba(255,194,226,.06)}
.tk li:hover{background:rgba(233,30,140,.09);padding-left:1.5rem}
.tk .i{font-size:.55rem;letter-spacing:.16em;color:var(--pink);width:1.5rem;flex-shrink:0}
.tk .t{font-size:.93rem;letter-spacing:.02em}

/* ══════════ ALBUM GRID ══════════ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2.4rem)}
.alw{will-change:transform}
.al{position:relative;display:block;transition:transform .8s var(--e)}
.al .fr{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:box-shadow .8s var(--e),border-color .8s}
.al .fr img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e),filter .8s}
.al .fr::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,4,16,.82),transparent 52%);
  opacity:.85;transition:opacity .7s}
.al .bd{position:absolute;top:.85rem;left:.85rem;z-index:3;
  font-size:.48rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  padding:.4rem .85rem;border-radius:100px;
  background:linear-gradient(100deg,var(--pink),var(--pink-hot));
  box-shadow:0 0 24px rgba(233,30,140,.6)}
.al .cap{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:3}
.al .cap h3{font-size:1rem;font-weight:400;letter-spacing:.01em;
  transition:transform .7s var(--e)}
.al .cap p{font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink-pale);margin-top:.35rem;opacity:.75}
/* declared after .rv.in so the hover transform wins over `transform:none` */
.al:hover{transform:translateY(-9px)}
.al:hover .fr{border-color:rgba(233,30,140,.45);
  box-shadow:0 34px 80px rgba(0,0,0,.62),0 0 60px rgba(233,30,140,.4)}
.al:hover .fr img{transform:scale(1.07)}
.al:hover .fr::after{opacity:.55}
.al:hover .cap h3{transform:translateX(5px)}

/* ══════════ QUOTE ══════════ */
.quote{text-align:center;position:relative}
.quote q{quotes:none;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-weight:300;font-size:clamp(1.6rem,4.4vw,3.4rem);line-height:1.32;
  display:block;max-width:1000px;margin:0 auto;letter-spacing:.005em}
.quote q b{font-weight:300;font-style:normal;font-family:'Great Vibes',cursive;
  color:var(--pink-pale);text-shadow:0 0 26px rgba(233,30,140,.6);font-size:1.16em}
.quote cite{display:block;margin-top:2.6rem;font-style:normal;font-size:.58rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--faint)}

/* ══════════ LISTEN ══════════ */
.plat{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.pl{padding:1.9rem 1.5rem;border-radius:16px;position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,194,226,.05),rgba(123,47,168,.04));
  transition:transform .7s var(--e),border-color .6s,box-shadow .6s}
.pl::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(ellipse at 50% 120%,rgba(233,30,140,.35),transparent 70%)}
.pl:hover{transform:translateY(-6px);border-color:rgba(233,30,140,.5);
  box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 50px rgba(233,30,140,.28)}
.pl:hover::before{opacity:1}
.pl .nm{font-size:1rem;position:relative;z-index:2}
.pl .go{font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);margin-top:.7rem;position:relative;z-index:2;
  transition:color .5s,transform .6s var(--e)}
.pl:hover .go{color:var(--pink-pale);transform:translateX(5px)}

footer{padding:3.4rem 0 4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}

/* ══════════ ALBUM PAGE ══════════ */
.ahero{padding-top:clamp(8rem,18vh,12rem);padding-bottom:clamp(3rem,7vh,5rem);
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.2rem,6vw,5.6rem);align-items:center}
/* flex + max-content, not inline-flex: an inline-flex back link would sit
   on the same line as the eyebrow that follows it */
.aback{display:flex;width:max-content;align-items:center;gap:.7rem;font-size:.56rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.6rem;transition:color .45s,gap .5s var(--e)}
.aback:hover{color:var(--pink-pale);gap:1.1rem}
.aart{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1;
  border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(0,0,0,.66),0 0 90px rgba(233,30,140,.3);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--e) .15s}
.aart.in{clip-path:inset(0 0 0 0)}
.aart img{width:100%;height:100%;object-fit:cover}
.ameta{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-top:1.6rem}
.ameta s{width:4px;height:4px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 8px var(--pink);display:block;text-decoration:none}
.ameta .live{color:var(--pink-pale)}
h1.atitle{font-size:clamp(2.6rem,7vw,6rem);line-height:1.3;
  padding:.1em .08em;margin:.4rem -.08em 0}
.ablurb{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.9vw,1.42rem);line-height:1.62;color:var(--muted);
  max-width:60ch;margin-top:1.9rem}
.apull{margin:clamp(3.5rem,9vh,6.5rem) auto;text-align:center;max-width:1000px}
.apull q{quotes:none;display:block;font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:300;line-height:1.34;
  font-size:clamp(1.35rem,3.6vw,2.7rem)}
.apull cite{display:block;margin-top:1.9rem;font-style:normal;font-size:.55rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--faint)}
.atracks{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem)}
.arow{display:flex;align-items:baseline;gap:1.2rem;padding:1.05rem .8rem;
  border-bottom:1px solid rgba(255,194,226,.07);border-radius:10px;
  transition:background .5s,padding-left .5s var(--e)}
.arow:hover{background:rgba(233,30,140,.09);padding-left:1.5rem}
.arow .i{font-size:.55rem;letter-spacing:.16em;color:var(--pink);
  width:1.6rem;flex-shrink:0}
.arow .t{font-size:1.02rem}
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem)}

/* ══════════ ABOUT PAGE ══════════ */
.abt{padding-top:clamp(8rem,18vh,12rem);display:grid;
  grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.abt-photos{position:relative;padding-bottom:3.5rem}
.abt-main{position:relative;aspect-ratio:3/4;border-radius:180px 180px 22px 22px;
  overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 90px rgba(233,30,140,.26);
  clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--e) .15s}
.abt-main.in{clip-path:inset(0 0 0 0)}
.abt-main img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.abt-main::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,4,16,.72),transparent 48%)}
.abt-sub{position:absolute;right:-1rem;bottom:0;width:46%;aspect-ratio:4/5;
  border-radius:16px;overflow:hidden;border:1px solid rgba(233,30,140,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 44px rgba(233,30,140,.34);
  animation:float 6s var(--e) infinite}
.abt-sub img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
h1.abt-title{font-size:clamp(2.8rem,7vw,5.6rem);line-height:1.28;
  padding:.08em .08em;margin:.35rem -.08em 1.8rem}
.abt-lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2.3vw,1.75rem);line-height:1.5;color:var(--pink-pale);
  margin-bottom:1.9rem}
.abt-body p{font-size:.97rem;line-height:1.85;color:var(--muted);margin-bottom:1.15rem}
.abt-body em{font-style:normal;color:var(--pink-pale)}
.abt-quote{margin:2.4rem 0;padding:1.3rem 0 1.3rem 1.6rem;
  border-left:2px solid var(--pink);
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.5;color:var(--text)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:2.6rem 0}
.stats div{text-align:center;padding:1.4rem .6rem;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,194,226,.06),rgba(123,47,168,.04));
  transition:border-color .6s,box-shadow .6s,transform .6s var(--e)}
.stats div:hover{border-color:rgba(233,30,140,.42);transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 44px rgba(233,30,140,.24)}
.stats .v{font-family:'Great Vibes',cursive;font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.25;color:var(--pink-pale);text-shadow:0 0 24px rgba(233,30,140,.6)}
.stats .k{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);margin-top:.4rem}
.label{display:flex;align-items:center;gap:1.1rem;padding-top:1.9rem;
  border-top:1px solid var(--line)}
.label img{width:58px;height:58px;border-radius:14px;object-fit:cover;
  border:1px solid rgba(255,205,90,.32);flex-shrink:0}
.label .k{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.label .n{font-size:1rem;margin-top:.2rem}
.label .t{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.9rem;color:var(--muted);margin-top:.15rem}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .more{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .portal{display:none}
  .rel{grid-template-columns:1fr}
  .plat{grid-template-columns:repeat(2,1fr)}
  .ahero{grid-template-columns:1fr;padding-top:clamp(6.5rem,14vh,9rem)}
  .atracks{grid-template-columns:1fr}
  .abt{grid-template-columns:1fr;padding-top:clamp(6.5rem,14vh,9rem)}
  .abt-photos{max-width:420px;margin:0 auto}
}
@media(max-width:860px){
  nav ul{display:none}
  .burger{display:block}
  nav .wm{font-size:1.35rem}
  /* orbs: fewer + cheaper blur so phones stay at 60fps */
  .orb{filter:blur(58px)}
  .o4{display:none}
  .cnt{gap:.45rem}
  .cnt div{padding:.85rem .25rem}
  .tk .t{font-size:1rem}
  .rel{padding:1.15rem}
  .more{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:430px){
  .grid{gap:.8rem}
  .al .cap h3{font-size:.82rem}
  .al .cap p{font-size:.46rem}
  .al .bd{font-size:.44rem;padding:.32rem .6rem}
  .plat{grid-template-columns:1fr}
  .cta{gap:.7rem}
  .btn{padding:1rem 1.7rem}
  .more{gap:.8rem}
}