/* ============ THE UMANG WORLD — canvas-first ============ */
:root{
  --bg:#06070a;
  --bg-2:#0b0d12;
  --ink:#f3ebda;
  --ink-soft:#cabfa9;
  --muted:#8b8576;
  --gold:#f4c869;
  --gold-deep:#d99a36;
  --orange:#ff7d20;
  --teal:#2dd6db;
  --violet:#a45cff;
  --magenta:#df4fd0;
  --line:rgba(244,200,105,.16);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:rgba(255,125,32,.3);color:#fff}
.deva{font-family:'Tiro Devanagari Hindi',serif}
em{font-style:normal;font-family:'Fraunces',serif}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ INTRO ============ */
.intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:var(--bg);transition:opacity 1.1s var(--ease),visibility 1.1s}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 32%;opacity:.72;filter:saturate(1.16) contrast(1.04)}
/* desktop: the 16:9 motion fills the frame */
@media(min-width:721px){.intro-video{object-position:center;opacity:.82}}
.intro::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 78% at 50% 44%,transparent 32%,rgba(6,7,10,.7) 76%,rgba(6,7,10,.94) 100%)}
.intro-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px}
.intro-inner .deva{font-size:clamp(1.8rem,5vw,3.2rem);color:var(--gold);letter-spacing:.04em;text-shadow:0 0 50px rgba(244,200,105,.4)}
.intro-word{font-family:'Sora',sans-serif;font-weight:300;font-size:clamp(2.6rem,9vw,6rem);letter-spacing:.02em;line-height:1;color:var(--ink)}
.intro-sub{font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-soft)}
.enter-btn{margin-top:26px;font-family:'Sora',sans-serif;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 30px;border:1px solid var(--line);border-radius:100px;color:var(--ink);
  display:inline-flex;align-items:center;gap:12px;transition:border-color .4s,background .4s,color .4s,gap .4s}
.enter-btn:hover{border-color:var(--gold);background:var(--gold);color:#1a1206;gap:18px}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(18px,4vw,42px);pointer-events:none}
.nav>*{pointer-events:auto}
.nav-mark{font-family:'Sora',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.nav-mark span{color:var(--gold)}
.nav-clusters{display:flex;gap:10px;background:rgba(6,7,10,.5);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:100px;padding:6px}
.nav-clusters button{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  padding:8px 16px;border-radius:100px;transition:color .3s,background .3s}
.nav-clusters button:hover,.nav-clusters button.active{color:#1a1206;background:var(--gold)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-fs{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font-size:1rem;color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s}
.nav-fs:hover{border-color:var(--gold);color:var(--gold)}
.nav-sound{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:border-color .3s}
.nav-sound:hover{border-color:var(--gold)}
.eq{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.eq i{width:2.5px;height:4px;background:var(--gold);border-radius:2px;transform-origin:bottom}
.nav-sound[aria-pressed="true"] .eq i{animation:eqbar .9s ease-in-out infinite}
.nav-sound[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.2s}
.nav-sound[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.45s}
.nav-sound[aria-pressed="true"] .eq i:nth-child(4){animation-delay:.15s}
@keyframes eqbar{0%,100%{height:4px}50%{height:14px}}
@media(max-width:720px){.nav-clusters{display:none}}

/* ============ WORLD / CANVAS ============ */
.world{position:fixed;inset:0;z-index:1;overflow:hidden;
  background:
    radial-gradient(80% 80% at 30% 25%,rgba(244,200,105,.06),transparent 55%),
    radial-gradient(70% 70% at 78% 80%,rgba(45,214,219,.05),transparent 55%),
    var(--bg)}
.world.dragging{cursor:grabbing}
.space{position:absolute;top:0;left:0;width:3000px;height:2200px;transform-origin:0 0;will-change:transform;z-index:3}

/* ---- far nebula layer (parallax depth) ---- */
.nebula{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.neb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;mix-blend-mode:screen}
.neb.n1{left:8%;top:14%;width:42vw;height:42vw;background:radial-gradient(circle,rgba(164,92,255,.6),transparent 65%)}
.neb.n2{right:6%;top:8%;width:34vw;height:34vw;background:radial-gradient(circle,rgba(244,200,105,.4),transparent 62%)}
.neb.n3{left:24%;bottom:6%;width:46vw;height:46vw;background:radial-gradient(circle,rgba(223,79,208,.42),transparent 64%)}
.neb.n4{right:18%;bottom:12%;width:30vw;height:30vw;background:radial-gradient(circle,rgba(45,214,219,.3),transparent 60%)}

/* ---- drifting ember atmosphere ---- */
.atmos{position:absolute;inset:0;z-index:2;pointer-events:none}

/* ---- cluster glow auras (breathe) ---- */
.bloom{position:absolute;width:760px;height:760px;border-radius:50%;transform:translate(-50%,-50%);
  pointer-events:none;will-change:transform,opacity}
.bloom.b-gold{background:radial-gradient(circle,rgba(244,200,105,.13),transparent 60%)}
.bloom.b-violet{background:radial-gradient(circle,rgba(150,110,205,.11),transparent 60%)}
.bloom.b-core{width:1100px;height:1100px;background:radial-gradient(circle,rgba(208,128,150,.09),rgba(244,200,105,.07) 42%,transparent 62%)}

/* ---- portal flash (threshold crossing) ---- */
.portal-flash{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(223,79,208,.5),rgba(164,92,255,.3) 40%,transparent 72%)}
.portal-flash.fire{animation:flash 1.1s var(--ease) forwards}
@keyframes flash{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}

/* faint constellation lines via background dots on space */
.space::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle,rgba(244,200,105,.10) 1px,transparent 1.4px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%)}

.cluster-label{position:absolute;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  pointer-events:none;white-space:nowrap}

/* ---- cards ---- */
.card{position:absolute;border-radius:16px;-webkit-user-select:none;user-select:none;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.card:not(.note):not(.core):hover{transform:translateY(-6px) scale(1.03);z-index:20}

.card.core{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;width:320px;
  transform:translateX(-50%) translateX(160px);pointer-events:none}
.core .deva{font-size:3.2rem;color:var(--gold);text-shadow:0 0 50px rgba(244,200,105,.4)}
.core-word{font-family:'Sora',sans-serif;font-weight:300;font-size:2.4rem;letter-spacing:.02em;color:var(--ink)}
.core-tag{font-family:'Fraunces',serif;font-style:italic;font-size:1.05rem;color:var(--ink-soft)}

.card.media{width:300px;display:block;background:#0e1014;border:1px solid rgba(255,255,255,.06);overflow:hidden;text-align:left}
.card.media.feature{width:430px}
.card.media.tall{width:240px}
.card.media.lionheart{width:330px}
.card.media.lionheart .cc-img{aspect-ratio:4/5}
.card.media.lionheart .cc-meta em{color:var(--magenta)}
.card.media.lionheart:hover{border-color:rgba(164,92,255,.4);
  box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 70px rgba(164,92,255,.28)}
.card.media.lionheart .cc-play{border-color:rgba(223,79,208,.6);color:var(--magenta)}
.card.media.lionheart:hover .cc-play{background:var(--magenta);color:#1a0620}
.cc-img{display:block;width:100%;aspect-ratio:16/10;background-size:cover;background-position:center}
.card.media.tall .cc-img{aspect-ratio:3/4}
.card.media:hover{border-color:var(--line);box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 60px rgba(244,200,105,.12)}
.cc-play{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--gold);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(244,200,105,.45);
  transition:background .4s,transform .4s,color .4s;padding-left:3px}
.cc-play.sm{width:44px;height:44px}
.card.media:hover .cc-play{background:var(--gold);color:#1a1206;transform:translate(-50%,-50%) scale(1.08)}
.cc-meta{display:flex;flex-direction:column;gap:5px;padding:16px 18px;font-family:'Sora',sans-serif;font-size:1.02rem;color:var(--ink)}
.cc-meta em{font-family:'Inter';font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}

.card.photo{width:210px;display:block;background:#0e1014;border:1px solid rgba(255,255,255,.06);overflow:hidden;text-align:left}
.card.photo.feature{width:250px}
.card.photo .cc-img{display:block;width:100%;aspect-ratio:3/4;background-size:cover;background-position:center;
  filter:saturate(.92) brightness(.9);transition:filter .5s var(--ease)}
.card.photo:hover .cc-img{filter:saturate(1.05) brightness(1)}
.card.photo:hover{border-color:var(--line);box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 56px rgba(164,92,255,.16)}
.cc-cap{display:block;padding:13px 16px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

.card.link{width:206px;padding:24px 22px;display:flex;flex-direction:column;gap:6px;
  background:var(--bg-2);border:1px solid rgba(255,255,255,.06)}
.card.link:hover{border-color:var(--line);box-shadow:0 22px 54px rgba(0,0,0,.5),0 0 50px rgba(45,214,219,.1)}
.cc-ic{font-size:1.3rem;color:var(--gold);line-height:1}
.cc-nm{font-family:'Sora',sans-serif;font-weight:600;font-size:1.1rem;color:var(--ink)}
.cc-hd{font-size:.82rem;color:var(--muted)}

.card.note{max-width:300px;padding:20px 24px;font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:1.25rem;line-height:1.35;color:var(--ink-soft);text-align:left;cursor:pointer;background:transparent}
.card.note.origin-q{color:var(--ink);font-size:1.55rem;max-width:340px}
.card.note.quote{color:var(--ink);font-size:1.5rem;cursor:default}
.card.note.deva-card{font-family:'Tiro Devanagari Hindi',serif;font-style:normal;font-size:4.4rem;color:var(--gold);
  text-shadow:0 0 50px rgba(244,200,105,.4);padding:8px 14px;cursor:default}
.card.note.origin-q:hover{color:var(--gold)}

.card.join-card{width:300px;padding:28px 26px;display:flex;flex-direction:column;gap:8px;text-align:left;
  background:linear-gradient(150deg,rgba(244,200,105,.1),rgba(255,125,32,.06));border:1px solid var(--line)}
.card.join-card:hover{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 60px rgba(244,200,105,.16)}
.jc-eyebrow{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.jc-title{font-family:'Sora',sans-serif;font-weight:300;font-size:1.9rem;color:var(--ink);line-height:1}
.jc-cta{margin-top:6px;font-size:.84rem;letter-spacing:.04em;color:var(--ink-soft)}

/* ============ HUD ============ */
.hud{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(18px,4vw,36px);pointer-events:none}
.hud>*{pointer-events:auto}
.hud-hint{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:opacity .6s;align-self:flex-end;margin-bottom:8px}
.hud-hint.hide{opacity:0}
.zoom{display:flex;gap:8px}
.zoom button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(6,7,10,.55);
  backdrop-filter:blur(8px);color:var(--ink);font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .3s,color .3s,background .3s}
.zoom button:hover{border-color:var(--gold);color:var(--gold);background:rgba(6,7,10,.85)}

/* ============ DETAIL ============ */
.detail{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.detail[hidden]{display:none}
.detail-scrim{position:absolute;inset:0;background:rgba(4,5,10,.72);backdrop-filter:blur(8px);
  opacity:0;animation:fade .4s var(--ease) forwards}
.detail-panel{position:relative;z-index:2;width:min(560px,92vw);max-height:88vh;overflow:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:clamp(28px,5vw,44px);
  transform:translateY(16px) scale(.98);opacity:0;animation:rise .5s var(--ease) .05s forwards;
  box-shadow:0 40px 120px rgba(0,0,0,.7)}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{transform:none;opacity:1}}
.detail-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  color:var(--ink-soft);font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s}
.detail-close:hover{border-color:var(--gold);color:var(--gold)}
.detail-cat{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.detail-title{font-family:'Sora',sans-serif;font-weight:300;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.08;color:var(--ink);margin-top:14px}
.detail-meta{display:block;font-size:.84rem;color:var(--muted);margin-top:10px;letter-spacing:.04em}
.detail-media{margin-top:22px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background-size:cover;background-position:center;display:none}
.detail-media.show{display:block}
.detail-media.photo{aspect-ratio:auto;height:62vh;max-height:680px;background-size:contain;background-repeat:no-repeat;background-color:#000}
.detail-body{margin-top:22px;font-size:1.05rem;line-height:1.7;color:var(--ink-soft)}
.detail-link{display:inline-flex;margin-top:26px;font-family:'Sora',sans-serif;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 26px;border-radius:100px;color:#1a1206;
  background:linear-gradient(120deg,var(--gold),var(--orange));transition:box-shadow .4s}
.detail-link:hover{box-shadow:0 0 44px rgba(255,125,32,.4)}
.detail-form{display:flex;gap:10px;margin-top:26px;border:1px solid var(--line);border-radius:100px;padding:6px 6px 6px 8px}
.detail-form input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:1rem;padding:0 16px}
.detail-form input::placeholder{color:var(--muted)}
.detail-form button{font-family:'Sora',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 24px;border-radius:100px;color:#1a1206;background:linear-gradient(120deg,var(--gold),var(--orange));white-space:nowrap}
.detail-done{margin-top:22px;color:var(--teal);font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem}

/* ============ CONSTELLATION (home) ============ */
.constellation{position:absolute;inset:0;z-index:5;transform-origin:center center;will-change:transform}
.con-bloom{position:absolute;top:50%;left:50%;width:840px;height:840px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(208,128,150,.1),rgba(244,200,105,.06) 42%,transparent 62%);pointer-events:none}
.con-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;pointer-events:none}
.con-core .deva{font-family:'Tiro Devanagari Hindi',serif;font-size:clamp(1.5rem,4vw,2.4rem);color:var(--gold);text-shadow:0 0 50px rgba(244,200,105,.4)}
.con-word{font-family:'Sora',sans-serif;font-weight:300;font-size:clamp(1.7rem,4.4vw,2.7rem);letter-spacing:.02em;color:var(--ink);line-height:1}
.con-tag{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(.85rem,1.4vw,1rem);color:var(--ink-soft)}

.con-node{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:13px;background:none;cursor:pointer;will-change:transform,opacity}
.cn-orb{width:118px;height:118px;border-radius:50%;background-size:cover;background-position:center;position:relative;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(244,200,105,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.55);transition:box-shadow .4s,border-color .4s}
.cn-merch{background:radial-gradient(circle at 35% 28%,#3a2350,#160a22)}
.cn-tour{background:radial-gradient(circle at 35% 28%,#3a2c10,#1a1206)}
.cn-sub{background:radial-gradient(circle at 35% 28%,#0e3340,#08161c)}
.cn-ic{font-size:1.7rem;color:rgba(255,236,200,.85)}
.cn-label{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.con-node.hot .cn-orb,.con-node.chosen .cn-orb{border-color:var(--gold);box-shadow:0 18px 64px rgba(0,0,0,.6),0 0 56px rgba(244,200,105,.4)}
.con-node.hot .cn-label{color:var(--gold)}
.world-hint{position:absolute;left:50%;bottom:clamp(28px,6vh,56px);transform:translateX(-50%);z-index:6;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);pointer-events:none}
@media(max-width:680px){.cn-orb{width:86px;height:86px}.cn-label{font-size:.66rem}}

/* ============ PAGES ============ */
.pages{position:fixed;inset:0;z-index:70;overflow-y:auto;background:var(--bg);
  opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s}
.pages.open{opacity:1;visibility:visible;transform:none}
.pages::before{content:"";position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(70% 60% at 22% 18%,rgba(164,92,255,.08),transparent 60%),
  radial-gradient(60% 60% at 82% 88%,rgba(244,200,105,.06),transparent 60%)}
.page{display:none}
.page.active{display:block}
.page-inner{position:relative;max-width:1120px;margin:0 auto;padding:128px clamp(20px,5vw,56px) 110px}
.page-inner.narrow{max-width:680px;text-align:center}
.page-back{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:42px;transition:color .3s,gap .3s}
.page-back:hover{color:var(--gold);gap:14px}
.page-eyebrow{display:block;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.page-title{font-family:'Sora',sans-serif;font-weight:300;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;
  letter-spacing:-.02em;color:var(--ink);margin-top:18px}
.page-title em{color:var(--gold)}
.page-lead{margin-top:22px;font-size:1.08rem;line-height:1.7;color:var(--ink-soft)}
.page-inner.narrow .page-lead{margin-left:auto;margin-right:auto;max-width:46ch}
.page-note{margin-top:54px;font-size:1rem;color:var(--muted);font-family:'Fraunces',serif;font-style:italic}
.link-btn{font:inherit;font-style:italic;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:1px}
.link-btn:hover{border-color:var(--gold)}

/* music */
.music-feature{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(28px,4vw,60px);align-items:center;margin-top:52px}
.mf-cover{aspect-ratio:1/1.04;border-radius:16px;background-size:cover;background-position:center;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 80px rgba(164,92,255,.18)}
.mf-tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.mf-info h2{font-family:'Sora',sans-serif;font-weight:300;font-size:clamp(2rem,4vw,3rem);color:var(--ink);margin:10px 0 6px}
.mf-credits{font-size:.92rem;color:var(--ink-soft);letter-spacing:.02em}
.mf-desc{margin-top:18px;font-size:1.05rem;line-height:1.7;color:var(--ink-soft);max-width:46ch}
.mf-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mf-links a{font-family:'Sora',sans-serif;font-size:.8rem;letter-spacing:.06em;padding:12px 22px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink);transition:border-color .3s,background .3s,color .3s}
.mf-links a:hover{border-color:var(--gold);background:var(--gold);color:#1a1206}
@media(max-width:740px){.music-feature{grid-template-columns:1fr;gap:28px}.mf-cover{max-width:320px}}

/* video */
.video-feature{display:block;margin-top:50px;border-radius:18px;overflow:hidden;background:var(--bg-2);
  border:1px solid rgba(255,255,255,.06);transition:border-color .4s,box-shadow .4s}
.video-feature:hover{border-color:var(--line);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.vf-thumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.vf-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 0,transparent,rgba(6,7,10,.5))}
.vf-play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--gold);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(244,200,105,.45);
  padding-left:4px;transition:background .4s,color .4s,transform .4s}
.vf-play.sm{width:46px;height:46px}
.video-feature:hover .vf-play{background:var(--gold);color:#1a1206;transform:scale(1.08)}
.vf-meta{display:flex;flex-direction:column;gap:6px;padding:20px 24px}
.vf-tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.vf-meta h3{font-family:'Sora',sans-serif;font-weight:400;font-size:1.3rem;color:var(--ink)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.vid-card{display:block;border-radius:14px;overflow:hidden;background:var(--bg-2);border:1px solid rgba(255,255,255,.05);transition:transform .5s var(--ease),border-color .4s}
.vid-card:hover{transform:translateY(-5px);border-color:var(--line)}
.vc-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background-size:cover;background-position:center}
.vc-title{display:block;padding:14px 16px;font-family:'Sora',sans-serif;font-size:1rem;color:var(--ink)}

/* merch */
.merch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:52px}
.merch-card{border-radius:16px;overflow:hidden;background:var(--bg-2);border:1px solid rgba(255,255,255,.06)}
.mc-img{position:relative;aspect-ratio:3/4;display:flex;align-items:flex-start;justify-content:flex-end;padding:14px}
.mc-1{background:linear-gradient(150deg,#1a1020,#2a1430 60%,#0a0c14)}
.mc-2{background:linear-gradient(150deg,#161019,#241026 55%,#0a0c14)}
.mc-3{background:linear-gradient(150deg,#1b1408,#2a1c06 55%,#0a0c14)}
.mc-soon{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:100px;padding:5px 12px;background:rgba(6,7,10,.5)}
.mc-meta{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-family:'Sora',sans-serif;font-size:1rem;color:var(--ink)}
.mc-price{color:var(--muted)}

/* tour */
.tour-list{margin-top:50px;border-top:1px solid var(--line)}
.tour-row{display:flex;align-items:center;gap:24px;padding:26px 6px;border-bottom:1px solid var(--line)}
.tr-date{font-family:'Sora',sans-serif;font-size:1rem;color:var(--gold);min-width:90px}
.tr-city{flex:1;font-size:1.1rem;color:var(--ink)}
.tr-cta{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* subscribe */
.page-signup{display:flex;gap:10px;max-width:480px;margin:40px auto 0;border:1px solid var(--line);border-radius:100px;padding:6px 6px 6px 8px}
.page-signup input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:1rem;padding:0 16px}
.page-signup input::placeholder{color:var(--muted)}
.page-signup button{font-family:'Sora',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:13px 26px;border-radius:100px;color:#1a1206;background:linear-gradient(120deg,var(--gold),var(--orange));white-space:nowrap}
.page-done{margin-top:22px;color:var(--teal);font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem}
.page-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:44px}
.page-socials a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.page-socials a:hover{color:var(--gold)}

/* page intro + professional entrance */
.page-intro{margin-top:20px;max-width:56ch;font-size:1.05rem;line-height:1.7;color:var(--ink-soft)}
.page-inner.narrow .page-intro{margin-left:auto;margin-right:auto}
.page.active .page-inner{animation:pageUp .6s var(--ease) both}
@keyframes pageUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* discography */
.discography{margin-top:64px}
.disco-head{display:block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.disco-item{display:flex;align-items:center;gap:18px;padding:16px 6px;border-bottom:1px solid var(--line);text-align:left;width:100%}
.disco-item.soon{opacity:.5}
.di-cover{width:54px;height:54px;border-radius:8px;background-size:cover;background-position:center;flex:none}
.di-ph{background:linear-gradient(135deg,#1a1622,#0c0e14)}
.di-info{flex:1;display:flex;flex-direction:column;gap:3px}
.di-info strong{font-family:'Sora',sans-serif;font-weight:400;font-size:1.05rem;color:var(--ink);transition:color .3s}
.di-info em{font-family:'Inter';font-style:normal;font-size:.8rem;color:var(--muted)}
.disco-item .di-go{color:var(--gold);transition:transform .3s}
.disco-item:hover .di-go{transform:translate(3px,-3px)}
.disco-item:hover .di-info strong{color:var(--gold)}

/* merch notify */
.mc-notify{font-size:.74rem;letter-spacing:.06em;color:var(--gold);border:1px solid var(--line);border-radius:100px;padding:7px 14px;transition:border-color .3s,background .3s,color .3s}
.mc-notify:hover{border-color:var(--gold);background:var(--gold);color:#1a1206}

/* tour refined */
.tr-where{flex:1;display:flex;flex-direction:column;gap:3px}
.tr-venue{font-size:.84rem;color:var(--muted)}
.tr-tix{font-size:.74rem;letter-spacing:.08em;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:9px 18px;transition:border-color .3s,background .3s,color .3s}
.tr-tix:hover{border-color:var(--gold);background:var(--gold);color:#1a1206}

/* footer */
.page-footer{max-width:1120px;margin:0 auto;padding:60px clamp(20px,5vw,56px) 36px;border-top:1px solid var(--line)}
.pf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px}
.pf-brand{display:flex;flex-direction:column;gap:8px}
.pf-mark{font-family:'Sora',sans-serif;font-weight:600;font-size:1.1rem;color:var(--ink)}
.pf-mark span{color:var(--gold)}
.pf-tag{font-family:'Fraunces',serif;font-style:italic;font-size:.95rem;color:var(--ink-soft)}
.pf-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.pf-head{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pf-col a,.pf-col button{font-size:.9rem;color:var(--ink-soft);transition:color .3s;text-align:left}
.pf-col a:hover,.pf-col button:hover{color:var(--gold)}
.pf-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:46px;padding-top:24px;border-top:1px solid var(--line)}
.pf-bottom span{font-size:.82rem;color:var(--muted)}
.pf-back{font-size:.82rem;letter-spacing:.08em;color:var(--ink-soft);transition:color .3s}
.pf-back:hover{color:var(--gold)}
@media(max-width:740px){.pf-grid{grid-template-columns:1fr 1fr;gap:28px}.pf-brand{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============ 2026-10 · Lionhearted update ============ */
.mf-poster{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.mf-info h3{font-family:'Sora',sans-serif;font-weight:300;font-size:clamp(2rem,4vw,3rem);color:var(--ink);margin:10px 0 6px;letter-spacing:.02em}
.mf-soon{font-family:'Sora',sans-serif;font-size:.8rem;letter-spacing:.06em;padding:12px 22px;border-radius:100px;
  border:1px dashed var(--line);color:var(--muted)}
.pf-about{margin:10px 0 0;max-width:44ch;font-size:.85rem;line-height:1.65;color:var(--muted)}
.pf-about strong{color:var(--ink-soft);font-weight:500}
.world-hint{white-space:nowrap}
/* merch product art */
.mc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.merch-card:hover .mc-photo{transform:scale(1.04)}
.mc-img .mc-soon{position:relative;z-index:1;font-size:.68rem;letter-spacing:.18em;color:#1a1206;background:var(--gold);border-color:var(--gold);font-weight:600}
/* video page: click-to-play YouTube (loads the player only when pressed) */
.yt-lite{cursor:pointer}
.yt-lite .vf-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.yt-lite:hover .vf-play{background:var(--gold);color:#1a1206;transform:scale(1.08)}
.vid-card.soon{cursor:default}
.vid-card.soon:hover{transform:none}
.vc-soon{position:relative;z-index:1;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#1a1206;background:var(--gold);border-radius:100px;padding:6px 14px}
.di-links{color:var(--muted)}
/* welcome screen: link-in-bio row */
.il-head{margin-top:22px;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft)}
.intro-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:-4px}
.il-btn{display:flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:100px;
  font-family:'Sora',sans-serif;font-size:.82rem;letter-spacing:.04em;color:var(--ink);
  background:rgba(10,8,14,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .3s,border-color .3s,background .3s}
.il-btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.il-youtube svg{fill:#ff2a2a}
.il-spotify svg{fill:#1ed760}
.il-applemusic svg{fill:#fa2d48}
.il-btn:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(20,14,26,.75)}
@media(max-width:480px){.intro-links{gap:8px}.il-btn{padding:10px 14px 10px 12px;font-size:.76rem}}
/* उमंग · ਉਮੰਗ — Hindi + Punjabi side by side */
.gur{font-family:'Tiro Gurmukhi','Tiro Devanagari Hindi',serif}
.deva-sep{font-style:normal;margin:0 .38em;opacity:.55;font-size:.7em;vertical-align:.12em}
.il-instagram svg{fill:#ff5fa2}
.il-tiktok svg{fill:#ffffff}
.merch-col{display:block;margin-top:46px;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.merch-col + .merch-grid{margin-top:16px}
.mc-sub{display:block;margin-top:3px;font-style:normal;font-size:.72rem;letter-spacing:.04em;color:var(--muted)}