/* ============ TOKENS ============ */
:root{
  --text-xs: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm: clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base: clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl: clamp(2rem,1.4rem + 2vw,3rem);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;

  --font-display:'Clash Display','Georgia',serif;
  --font-body:'General Sans','Helvetica Neue',sans-serif;

  --radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;

  /* Luxe noir + rose-gold / magenta palette (from brand mauve) */
  --bg:#0d0709;
  --bg-2:#160b11;
  --surface:#1c1016;
  --surface-2:#241419;
  --border:#3a2029;
  --text:#f6e9ee;
  --text-muted:#c69fae;
  --text-faint:#8a6675;

  --rose:#ff4d8d;
  --rose-deep:#d61f6a;
  --magenta:#c026d3;
  --gold:#e8b04b;

  --grad-of:linear-gradient(135deg,#ff4d8d 0%,#c026d3 100%);
  --grad-card:linear-gradient(160deg,#3a1f2b 0%,#241419 100%);
  --shadow-glow:0 10px 40px -8px rgba(255,77,141,.5);
  --shadow-card:0 8px 30px -10px rgba(0,0,0,.7);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  min-height:100dvh;line-height:1.6;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(192,38,211,.18), transparent 60%),
    radial-gradient(900px 500px at 20% 110%, rgba(255,77,141,.14), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:8px}
h1,h2,h3{line-height:1.15;text-wrap:balance}
::selection{background:rgba(255,77,141,.3)}

/* ============ BUTTON ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border-radius:var(--radius-full);font-weight:600;font-size:var(--text-sm);
  padding:var(--space-4) var(--space-6);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn--primary{width:100%;color:#fff;background:var(--grad-of);box-shadow:var(--shadow-glow)}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn--primary:active{transform:translateY(0)}

/* ============ LAYOUT ============ */
.wrap{max-width:460px;margin:0 auto;padding:var(--space-8) var(--space-5) calc(var(--space-32) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--space-8)}

/* placeholder styling */
.ph-label{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
  font-weight:500}

/* ============ PROFILE ============ */
.profile{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.profile__ring{padding:3px;border-radius:var(--radius-full);background:var(--grad-of);box-shadow:var(--shadow-glow)}
.profile__avatar{width:112px;height:112px;border-radius:var(--radius-full);
  background:var(--grad-card);background-size:cover;background-position:center top;
  border:3px solid var(--bg);display:grid;place-items:center;text-align:center;overflow:hidden}
.profile__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  display:inline-flex;align-items:center;gap:var(--space-2)}
.verified{display:inline-grid;place-items:center;width:22px;height:22px;font-size:.7rem;color:#fff;
  background:var(--grad-of);border-radius:var(--radius-full)}
.profile__bio{color:var(--text-muted);font-size:var(--text-base);margin-top:calc(var(--space-2) * -1)}
.profile__socials{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.soc{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-full);
  background:var(--surface);border:1px solid var(--border);color:var(--text-muted)}
.soc:hover{color:#fff;border-color:var(--rose);transform:translateY(-2px);background:var(--surface-2)}

/* ============ OF HERO CTA ============ */
.of-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-6);border-radius:var(--radius-xl);background:var(--grad-of);color:#fff;
  box-shadow:var(--shadow-glow)}
.of-hero:hover{transform:translateY(-3px)}
.of-hero__glow{position:absolute;inset:0;background:radial-gradient(400px 120px at 80% 0%,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
.of-hero__content{display:flex;flex-direction:column;gap:2px;position:relative}
.of-hero__eyebrow{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;opacity:.9;font-weight:600}
.of-hero__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1.1}
.of-hero__sub{font-size:var(--text-sm);opacity:.95}
.of-hero__arrow{margin-left:auto;font-size:1.6rem;position:relative;transition:transform .2s ease}
.of-hero:hover .of-hero__arrow{transform:translateX(4px)}

/* ============ HOT CARDS ============ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.card{position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-card)}
.card:first-child{grid-column:1 / -1;aspect-ratio:16/10}
.card__img{position:absolute;inset:0;background-color:var(--surface);
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  display:grid;place-items:center}
/* placeholder texture shows only when no photo is set */
.card__img::after{content:"";position:absolute;inset:0;z-index:-1;background:
  repeating-linear-gradient(45deg,rgba(255,77,141,.06) 0 12px,transparent 12px 24px),
  var(--grad-card)}
.card__img::before{content:attr(data-ph);position:absolute;top:var(--space-3);left:var(--space-3);
  font-size:var(--text-xs);color:var(--text-faint);letter-spacing:.06em}
/* hide placeholder chrome once a real photo loads */
.card__img.has-img::before,
.card__img.has-img .ph-label,
.profile__avatar.has-img .ph-label{display:none}
.card__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--space-1);padding:var(--space-4);text-align:center;
  background:linear-gradient(to top,rgba(13,7,9,.85) 0%,rgba(13,7,9,.15) 55%,transparent 100%);
  transition:background .2s ease}
.card:hover .card__overlay{background:linear-gradient(to top,rgba(214,31,106,.7) 0%,rgba(192,38,211,.25) 60%,transparent 100%)}
.card__lock{font-size:1.4rem}
.card__cta{font-weight:600;font-size:var(--text-sm);color:#fff}

/* ============ SECTIONS + LINKS ============ */
.section{display:flex;flex-direction:column;gap:var(--space-4)}
.section__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  text-align:center;color:var(--text)}
.links{display:flex;flex-direction:column;gap:var(--space-3)}
.link{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border)}
.link:hover{transform:translateY(-2px);border-color:var(--rose);background:var(--surface-2)}
.link__icon{font-size:1.4rem;width:32px;text-align:center;flex-shrink:0}
.link__text{display:flex;flex-direction:column;line-height:1.25}
.link__text strong{font-weight:600;font-size:var(--text-sm)}
.link__text small{color:var(--text-muted);font-size:var(--text-xs)}
.link__arrow{margin-left:auto;color:var(--text-faint);font-size:1.2rem;transition:transform .2s ease}
.link:hover .link__arrow{transform:translateX(3px);color:var(--rose)}
.link--merch{background:var(--grad-card);border-color:var(--rose-deep)}
.link--soon{opacity:.7;cursor:default;border-style:dashed}
.link--soon:hover{transform:none;border-color:var(--border);background:var(--surface)}
.link__soon-badge{margin-left:auto;font-size:var(--text-xs);font-weight:600;color:var(--gold);
  border:1px solid var(--gold);padding:2px 10px;border-radius:var(--radius-full)}

/* ============ FOOTER ============ */
.foot{text-align:center;color:var(--text-faint);font-size:var(--text-xs);
  padding-top:var(--space-6);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-2)}
.foot__fine{color:var(--text-faint);opacity:.7}

/* ============ STICKY CTA ============ */
.sticky-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index:60;display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-4) var(--space-8);border-radius:var(--radius-full);
  color:#fff;font-weight:700;font-size:var(--text-sm);background:var(--grad-of);
  box-shadow:var(--shadow-glow),0 0 0 6px rgba(13,7,9,.55);white-space:nowrap;
  animation:rise .4s ease}
.sticky-cta:hover{transform:translateX(-50%) translateY(-2px);filter:brightness(1.06)}
.sticky-cta__pulse{position:absolute;inset:0;border-radius:var(--radius-full);
  box-shadow:0 0 0 0 rgba(255,77,141,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,141,.55)}70%{box-shadow:0 0 0 16px rgba(255,77,141,0)}100%{box-shadow:0 0 0 0 rgba(255,77,141,0)}}
@keyframes rise{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* fade-in entrance */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}