/* ==========================================================================
   Maijah Taejon — shared theme & components  (light default + dark toggle)
   Phase 1: ambience layer, theme-aware wordmark, releases/coming-soon strips
   ========================================================================== */
:root{
  --accent:#E0218A; --accent-deep:#B01466; --brand:#FF66C4;
  --bg-1:#ffffff; --bg-2:#FFE9F7; --bg-3:#FFCEF0;
  --text:#3A2231; --text-soft:#8A6079;
  --surface:rgba(255,255,255,.66); --surface-2:rgba(255,255,255,.72);
  --border:rgba(224,33,138,.15); --border-2:rgba(224,33,138,.30);
  --nav:rgba(255,255,255,.72); --nav-border:rgba(224,33,138,.14);
  --chip-bg:#ffffff; --input-bg:#ffffff;
  --shadow:rgba(176,20,102,.30); --halo:rgba(224,33,138,.22);
  --frame-ring:rgba(255,255,255,.75); --glow:0 10px 26px -8px rgba(224,33,138,.55);
  --toggle-bg:rgba(255,255,255,.7); --vinyl:#2A1420;
}
html[data-theme="dark"]{
  --accent:#FF4DA6; --accent-deep:#FF7DBE; --brand:#FF66C4;
  --bg-1:#070409; --bg-2:#14060f; --bg-3:#22091a;
  --text:#FCEAF4; --text-soft:#D49BBE;
  --surface:rgba(255,90,170,.05); --surface-2:rgba(255,90,170,.07);
  --border:rgba(255,77,166,.20); --border-2:rgba(255,77,166,.40);
  --nav:rgba(10,5,11,.72); --nav-border:rgba(255,77,166,.22);
  --chip-bg:rgba(255,255,255,.04); --input-bg:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.6); --halo:rgba(255,77,166,.28);
  --frame-ring:rgba(255,77,166,.28); --glow:0 0 30px -4px rgba(255,77,166,.7);
  --toggle-bg:rgba(255,90,170,.10); --vinyl:#0c0409;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',sans-serif;color:var(--text);
  background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 34%,var(--bg-3) 100%);
  background-attachment:fixed;overflow-x:hidden;min-height:100vh;
  transition:background .5s ease,color .35s ease;display:flex;flex-direction:column;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
img{max-width:100%}

/* ---------- Nav (roomier — up to 10 items) ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 30px;background:var(--nav);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nav-border);transition:background .5s,border-color .5s;
}
.brand{font-family:'Sacramento',cursive;font-size:1.8rem;color:var(--accent);line-height:1;text-decoration:none;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-links{display:flex;gap:17px}
.nav-links a{
  text-decoration:none;color:var(--text);font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;position:relative;padding:4px 0;transition:color .3s;white-space:nowrap;
}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--accent)}
.hamburger{display:none;font-size:1.5rem;color:var(--accent);cursor:pointer;background:none;border:none;line-height:1}
.toggle{display:inline-flex;align-items:center;cursor:pointer;background:var(--toggle-bg);
  border:1px solid var(--border-2);border-radius:999px;padding:8px 10px;color:var(--accent);transition:background .3s,border-color .3s}
.toggle:hover{border-color:var(--accent)}
.toggle svg{width:17px;height:17px;display:block}
.toggle .moon{display:none}
html[data-theme="dark"] .toggle .sun{display:none}
html[data-theme="dark"] .toggle .moon{display:block}

/* mobile drawer */
.drawer{position:fixed;top:0;right:-300px;width:280px;height:100vh;z-index:60;
  background:var(--bg-2);border-left:1px solid var(--border-2);
  padding:80px 30px 30px;display:flex;flex-direction:column;gap:4px;transition:right .35s ease;box-shadow:-20px 0 60px -20px var(--shadow);overflow-y:auto}
.drawer.open{right:0}
.drawer a{text-decoration:none;color:var(--text);font-size:.9rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--border)}
.drawer a.active{color:var(--accent)}
.drawer .close{position:absolute;top:22px;right:26px;font-size:1.4rem;color:var(--accent);cursor:pointer;background:none;border:none}
.scrim{position:fixed;inset:0;background:rgba(20,6,15,.4);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
@media(max-width:1180px){.nav-links{display:none}.hamburger{display:block}}

/* ---------- Ambience layer (butterflies + hearts, injected by site.js) ---------- */
.ambience{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bfly,.hrt{position:absolute;bottom:-8vh;will-change:transform,opacity;opacity:0}
.bfly{animation:floatUp var(--dur) linear infinite;animation-delay:var(--delay)}
.hrt{animation:floatUp var(--dur) linear infinite;animation-delay:var(--delay)}
.wingL,.wingR{transform-origin:center;animation:flap 1.1s ease-in-out infinite}
.wingR{animation-delay:.06s}
.hrt svg{animation:beat 2.6s ease-in-out infinite}
@keyframes flap{0%,100%{transform:rotateY(20deg) scaleX(1)}50%{transform:rotateY(0) scaleX(.4)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes floatUp{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  6%{opacity:var(--op)}
  50%{transform:translate3d(var(--sway),-52vh,0) rotate(10deg);opacity:var(--op)}
  94%{opacity:var(--op)}
  100%{transform:translate3d(calc(var(--sway)*-1),-120vh,0) rotate(-8deg);opacity:0}
}
html[data-theme="dark"] .bfly{filter:drop-shadow(0 0 6px rgba(255,77,166,.55))}
html[data-theme="dark"] .hrt{filter:drop-shadow(0 0 7px rgba(255,77,166,.5))}
@media(prefers-reduced-motion:reduce){.ambience{display:none}.fade-up{opacity:1!important;transform:none!important}
  .disc-anim,.hero-slide{animation:none!important}}

/* ---------- Layout & type ---------- */
main{flex:1 0 auto;position:relative;z-index:10}
.wrap{max-width:1120px;margin:0 auto;padding:90px 40px}
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:430;line-height:1.12}
h2{font-size:clamp(2rem,3.6vw,2.9rem)}
.script{font-family:'Sacramento',cursive;color:var(--accent);font-weight:400}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:20px;flex-wrap:wrap}
.eyebrow::before{content:'';width:34px;height:1.5px;background:var(--accent)}
.lede{max-width:60ch;font-size:1.05rem;line-height:1.75;color:var(--text-soft)}
.lede em{color:var(--text);font-style:italic;font-family:'Fraunces',serif}
.page-head{text-align:center;padding:150px 40px 30px;position:relative;z-index:10}
.page-head h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.page-head h1 .script{font-size:1.15em}
.page-head p{color:var(--text-soft);max-width:52ch;margin:18px auto 0;line-height:1.7}

/* ---------- Buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;text-decoration:none;
  font-size:.86rem;font-weight:600;letter-spacing:.05em;transition:transform .2s,box-shadow .2s,background .2s,border-color .3s,color .3s;cursor:pointer;border:none}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{background:var(--accent-deep)}
html[data-theme="dark"] .btn.primary:hover{color:#1a0510}
.btn.ghost{background:var(--surface-2);color:var(--accent-deep);border:1.5px solid var(--border-2)}
.btn.ghost:hover{border-color:var(--accent)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:9px 18px;border-radius:999px;font-size:.78rem;font-weight:600;text-decoration:none;
  color:var(--accent-deep);background:var(--chip-bg);border:1.5px solid var(--border-2);transition:all .2s}
.chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
html[data-theme="dark"] .chip:hover{color:#1a0510}

/* ---------- Cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:26px;
  backdrop-filter:blur(6px);box-shadow:0 20px 50px -30px var(--shadow);transition:transform .3s,border-color .3s,background .5s}
.card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.grid{display:grid;gap:26px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 14px 40px -20px var(--shadow)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed.tall{aspect-ratio:3/4}
.card-title{font-family:'Fraunces',serif;font-size:1.15rem;margin-top:16px;color:var(--text)}
.card-sub{color:var(--text-soft);font-size:.9rem;margin-top:6px;line-height:1.55}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
.sec-head h2 .script{font-size:1.25em}
.sec-head .count{font-size:.8rem;color:var(--text-soft);font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Theme-aware wordmark (hero) ---------- */
.wordmark{margin-top:4px}
.wordmark img{display:block;max-width:min(540px,92%);height:auto}
.wordmark .wm-dark{display:none}
html[data-theme="dark"] .wordmark .wm-light{display:none}
html[data-theme="dark"] .wordmark .wm-dark{display:block}

/* ---------- Hero rotator ---------- */
.hero-rotator{position:relative}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity 1.2s ease}
.hero-slide.active{opacity:1}

/* ---------- Releases strip ---------- */
.releases-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.release-card{display:flex;gap:22px;align-items:center;text-decoration:none;background:var(--surface);
  border:1px solid var(--border);border-radius:24px;padding:22px;backdrop-filter:blur(6px);
  box-shadow:0 20px 50px -30px var(--shadow);transition:transform .3s,border-color .3s,background .5s}
.release-card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.release-card .art{width:118px;height:118px;flex-shrink:0;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 26px -12px var(--shadow);display:flex;align-items:center;justify-content:center}
.release-card .art.disc{border-radius:50%;box-shadow:0 10px 26px -10px var(--shadow),0 0 0 6px var(--frame-ring),0 0 0 7px var(--border-2)}
.release-card .art img{width:100%;height:100%;object-fit:cover}
.release-card .art.placeholder{background:linear-gradient(135deg,var(--bg-3),var(--accent));text-align:center;padding:10px}
.release-card .art.placeholder span{font-family:'Sacramento',cursive;color:#fff;font-size:1.5rem;line-height:1;text-shadow:0 2px 8px rgba(120,20,80,.5)}
.rel-no{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:2px}
.release-card h3{font-size:1.3rem}
.release-card .rel-status{color:var(--text-soft);font-size:.85rem;margin:2px 0 12px}
.release-card .chips .chip{padding:6px 13px;font-size:.72rem}

/* ---------- Coming-soon strip ---------- */
.lp-card{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  background:var(--surface-2);border:1.5px dashed var(--border-2);border-radius:28px;padding:36px 44px;backdrop-filter:blur(6px)}
.lp-vinyl{width:158px;height:158px;border-radius:50%;flex-shrink:0;position:relative;
  background:repeating-radial-gradient(circle at center, var(--vinyl) 0 2px, rgba(224,33,138,.14) 2px 3px);
  box-shadow:0 16px 40px -14px var(--shadow);animation:spin 22s linear infinite;display:flex;align-items:center;justify-content:center}
.lp-vinyl::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--bg-1);box-shadow:0 0 0 2px var(--accent)}
.lp-vinyl span{position:absolute;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle,var(--accent),var(--accent-deep));
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-family:'Sacramento',cursive;font-size:1rem;line-height:.95;padding:8px;z-index:1}
.lp-badge{display:inline-block;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 15px;border-radius:999px;margin-bottom:14px}
html[data-theme="dark"] .lp-badge{color:#1a0510}
.lp-card h2{margin-bottom:10px}
.lp-card .lede{margin-bottom:22px}
@keyframes spin{to{transform:rotate(360deg)}}
.disc-anim{animation:spin 26s linear infinite}
@media(max-width:820px){
  .releases-strip{grid-template-columns:1fr}
  .lp-card{grid-template-columns:1fr;text-align:center;padding:32px 26px}
  .lp-vinyl{margin:0 auto}.lp-card .lede{margin-inline:auto}
}
@media(max-width:460px){
  .release-card{flex-direction:column;text-align:center}
  .release-card .chips{justify-content:center}
}

/* ---------- Coming soon (Merch/Christmas/Partners holders) ---------- */
.coming{text-align:center;max-width:640px;margin:0 auto}
.coming .big{font-family:'Sacramento',cursive;color:var(--accent);font-size:clamp(3rem,8vw,5rem);line-height:1;margin:10px 0}
.coming p{color:var(--text-soft);line-height:1.7;margin:18px auto 26px}

/* ---------- Forms ---------- */
.form{max-width:600px;margin:0 auto}
.form label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);margin:18px 0 8px}
.form input,.form textarea{width:100%;padding:15px 20px;border-radius:14px;border:1.5px solid var(--border-2);
  font-family:inherit;font-size:.95rem;background:var(--input-bg);color:var(--text);outline:none;transition:border-color .3s,background .5s}
.form input:focus,.form textarea:focus{border-color:var(--accent)}
.form textarea{min-height:150px;resize:vertical}
.form ::placeholder{color:var(--text-soft)}
.form-note{font-size:.85rem;color:var(--text-soft);margin-top:14px}
#formStatus{margin-top:16px;font-weight:600}

/* ---------- Footer ---------- */
.site-footer{flex-shrink:0;position:relative;z-index:10;text-align:center;padding:54px 20px 44px;margin-top:40px}
.socials{display:flex;gap:22px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.socials a{color:var(--accent-deep);text-decoration:none;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.socials a:hover{color:var(--accent)}
.fine{font-size:.74rem;color:var(--text-soft)}
.fine .script{font-size:1.5rem;display:block;margin-bottom:8px}

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

/* preview ribbon */
.ribbon{position:fixed;bottom:16px;left:16px;z-index:60;background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;
  box-shadow:0 8px 20px -6px var(--shadow);text-decoration:none}

/* ---------- Nav brand logo (theme-aware) ---------- */
.brand{display:inline-flex;align-items:center}
.brand img{height:34px;width:auto;display:block}
.wordmark .wm-dark,.brand .wm-dark{display:none}
html[data-theme="dark"] .wordmark .wm-light,html[data-theme="dark"] .brand .wm-light{display:none}
html[data-theme="dark"] .wordmark .wm-dark,html[data-theme="dark"] .brand .wm-dark{display:block}
@media(max-width:520px){.brand img{height:28px}}

/* ---------- Snowfall (Every Christmas) ---------- */
.snow{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.flake{position:absolute;top:-6vh;color:#fff;opacity:.85;will-change:transform;
  animation:snowfall var(--dur) linear infinite;animation-delay:var(--delay)}
@keyframes snowfall{
  0%{transform:translateY(-6vh) translateX(0) rotate(0);opacity:0}
  8%{opacity:var(--op)}
  92%{opacity:var(--op)}
  100%{transform:translateY(112vh) translateX(var(--sway)) rotate(200deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){.snow{display:none}}

/* vertical embed (YouTube Shorts) */
.embed.vertical{aspect-ratio:9/16;max-width:300px;margin:0 auto}
.shorts-row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.shorts-row .short{max-width:300px;flex:1 1 240px}
/* explainer feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.feature.rev>*:first-child{order:2}
@media(max-width:820px){.feature,.feature.rev{grid-template-columns:1fr}.feature.rev>*:first-child{order:0}}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media(max-width:700px){.mini-grid{grid-template-columns:1fr}}

/* ---------- Releases page (full list) ---------- */
.rel-list{display:grid;gap:18px;max-width:820px;margin:0 auto}
.rel-list .release-card{padding:20px 24px}
.rel-list .release-card .art{width:140px;height:140px}
.rel-list .release-card .art.placeholder span{font-size:1.7rem}
.rel-upcoming{max-width:820px;margin:0 auto 26px}
@media(max-width:560px){.rel-list .release-card{flex-direction:row;text-align:left}.rel-list .release-card .art{width:96px;height:96px}}