:root{
  --bg:#090d12;
  --bg2:#0d131a;
  --panel:#101821;
  --text:#f1f4f6;
  --muted:#9aa8b4;
  --line:rgba(255,255,255,.09);
  --blue:#8faabd;
  --rose:#d8b9be;
  --gold:#c89468;
  --max:1180px;
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 78% 5%,rgba(164,187,202,.12),transparent 26rem),
    radial-gradient(circle at 12% 28%,rgba(204,151,165,.07),transparent 24rem),
    linear-gradient(180deg,#080c10 0%,#0a1016 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.skip-link{position:fixed;left:1rem;top:-6rem;z-index:100;background:white;color:#111;padding:.7rem 1rem;border-radius:999px}
.skip-link:focus{top:1rem}
.site-header{
  position:sticky;top:0;z-index:50;height:76px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(1.2rem,calc((100vw - var(--max))/2));
  background:rgba(8,12,16,.76);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.brand img{width:114px;height:44px;object-fit:contain;object-position:center}
.nav{display:flex;gap:1.8rem}
.nav a{font-size:.9rem;color:var(--muted)}
.nav a:hover,.nav a:focus-visible{color:var(--text)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:.5rem .8rem}
.section{width:min(var(--max),calc(100% - 2.4rem));margin:auto;padding:7.5rem 0}
.hero{
  min-height:calc(100svh - 76px);
  display:grid;grid-template-columns:1fr .78fr;gap:5rem;align-items:center;
  position:relative;isolation:isolate;overflow:hidden
}
.hero-copy{z-index:2}
.eyebrow{margin:0 0 1rem;color:var(--blue);text-transform:uppercase;letter-spacing:.24em;font-size:.73rem;font-weight:700}
.hero h1{
  margin:.1rem 0 1.5rem;font-weight:520;letter-spacing:-.045em;
  font-size:clamp(4rem,8.5vw,8.4rem);line-height:.89
}
.hero-lead{max-width:39rem;margin:0;color:#c7d0d7;font-size:clamp(1.15rem,2vw,1.45rem)}
.button-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}
.button{border:1px solid var(--line);padding:.88rem 1.16rem;border-radius:999px;font-weight:700;transition:.2s ease}
.button.primary{background:#eef2f5;color:#10151a}
.button.ghost:hover{background:rgba(255,255,255,.05)}
.hero-release{
  z-index:2;justify-self:end;width:min(100%,470px);padding:1rem;border:1px solid var(--line);
  border-radius:32px;background:rgba(255,255,255,.026);
  box-shadow:0 35px 100px rgba(0,0,0,.35);transition:.25s ease
}
.hero-release:hover{transform:translateY(-5px);border-color:rgba(143,170,189,.35)}
.hero-release img{aspect-ratio:1;object-fit:cover;border-radius:22px}
.hero-release-meta{padding:1rem .35rem .25rem;display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem}
.hero-release-meta span{grid-column:1/-1;color:var(--blue);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em}
.hero-release-meta strong{font-size:1.2rem}
.hero-release-meta small{color:var(--muted);align-self:end}
.ambient{position:absolute;border-radius:50%;filter:blur(90px);z-index:0;opacity:.24}
.ambient-one{width:30rem;height:30rem;right:-9rem;top:3rem;background:#617e91}
.ambient-two{width:24rem;height:24rem;left:-12rem;bottom:3rem;background:#8f6c7d}
.section-heading{max-width:720px;margin-bottom:3rem}
.section-heading h2,.about-copy h2{
  margin:.1rem 0 1rem;font-size:clamp(2.6rem,5.4vw,5rem);line-height:.96;letter-spacing:-.035em;font-weight:560
}
.section-heading p,.about-copy p{color:var(--muted);font-size:1.03rem}
.album-section,.singles-section,.platforms-section{border-top:1px solid var(--line)}
.album-layout{display:grid;grid-template-columns:.83fr 1.17fr;gap:4rem;align-items:start}
.album-cover-wrap{position:sticky;top:110px}
.album-cover{width:100%;border-radius:28px;border:1px solid var(--line);box-shadow:0 26px 80px rgba(0,0,0,.32)}
.tracklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.tracklist li{display:grid;grid-template-columns:54px 1fr;gap:1rem;align-items:center;border-bottom:1px solid var(--line);padding:1.16rem .2rem}
.tracklist li span{color:#607384;font-variant-numeric:tabular-nums;font-size:.85rem}
.tracklist li strong{font-size:clamp(1.05rem,2vw,1.25rem);font-weight:570}
.release-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.release-card{
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  border-radius:24px;padding:.75rem;transition:.22s ease;overflow:hidden
}
.release-card:hover{transform:translateY(-4px);border-color:rgba(143,170,189,.32)}
.release-card img{aspect-ratio:1;object-fit:cover;border-radius:17px}
.release-card div{padding:.75rem .4rem .25rem}
.release-card span{font-size:.67rem;text-transform:uppercase;letter-spacing:.16em;color:var(--blue)}
.release-card h3{margin:.22rem 0 0;font-size:1.02rem;line-height:1.25}
.about-section{display:grid;grid-template-columns:1.15fr .85fr;gap:1.3rem}
.about-copy,.about-logo{
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,3rem);
  background:rgba(255,255,255,.025)
}
.about-logo{
  min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(circle at 52% 38%,rgba(143,170,189,.20),transparent 12rem),
    linear-gradient(145deg,#111923,#0b1016)
}
.about-logo img{width:min(100%,430px);margin:auto}
.about-logo p{color:var(--muted);margin:0;max-width:28rem}
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.platform{
  min-height:112px;border:1px solid var(--line);border-radius:20px;padding:1.25rem;
  background:rgba(255,255,255,.022);display:flex;flex-direction:column;justify-content:space-between
}
.platform:hover{background:rgba(255,255,255,.05)}
.platform strong{font-size:1.08rem}
.platform span{color:var(--muted);font-size:.88rem}
.social-library-note{
  margin:1.35rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.footer{
  width:min(var(--max),calc(100% - 2.4rem));margin:auto;padding:2rem 0 3.4rem;
  border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto auto;gap:2rem;align-items:center;color:var(--muted)
}
.footer-logo img{width:100px;height:38px;object-fit:contain}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.toast{
  position:fixed;left:50%;bottom:1.2rem;z-index:80;transform:translate(-50%,150%);
  background:#eef2f5;color:#10151a;border-radius:999px;padding:.7rem 1rem;font-size:.88rem;font-weight:700;
  transition:.25s ease
}
.toast.show{transform:translate(-50%,0)}
.legal{width:min(780px,calc(100% - 2.4rem));margin:auto;padding:6rem 0}
.legal h1{font-size:clamp(2.8rem,8vw,5.5rem);line-height:.95;letter-spacing:-.04em}
.legal h2{margin-top:2.3rem}
.legal p,.legal li{color:var(--muted)}
.legal a:not(.backlink){color:#d7e3ea}
.backlink{display:inline-block;margin-top:2rem;color:var(--blue)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (max-width:980px){
  .hero,.album-layout,.about-section{grid-template-columns:1fr}
  .hero{gap:3rem;padding-top:4rem}
  .hero-release{justify-self:start}
  .album-cover-wrap{position:static;max-width:600px}
  .release-grid{grid-template-columns:repeat(2,1fr)}
  .platform-grid{grid-template-columns:repeat(2,1fr)}
  .footer{grid-template-columns:1fr}
}
@media (max-width:680px){
  .site-header{padding:0 1rem}
  .brand img{width:96px}
  .menu-toggle{display:block}
  .nav{
    display:none;position:absolute;top:68px;left:1rem;right:1rem;flex-direction:column;
    background:#0f161e;border:1px solid var(--line);border-radius:20px;padding:1rem
  }
  .nav.open{display:flex}
  .section{padding:5.3rem 0}
  .hero h1{font-size:clamp(3.5rem,16vw,5.6rem)}
  .release-grid,.platform-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}


.lyrics-button{
  margin-top:.75rem;
  padding:.62rem .85rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font:inherit;
  font-size:.82rem;
}
.lyrics-button:hover,.lyrics-button:focus-visible{
  background:rgba(255,255,255,.06);
  border-color:rgba(143,170,189,.38);
}
.lyrics-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
}
.lyrics-modal.open{display:block}
.lyrics-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,6,9,.82);
  backdrop-filter:blur(8px);
}
.lyrics-dialog{
  position:relative;
  z-index:1;
  width:min(760px,calc(100% - 32px));
  max-height:calc(100svh - 48px);
  margin:24px auto;
  overflow:auto;
  background:linear-gradient(180deg,#111923,#0b1117);
  border:1px solid var(--line);
  border-radius:28px;
  padding:clamp(1.4rem,4vw,2.5rem);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.lyrics-dialog h2{
  margin:.1rem 3rem 1.6rem 0;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1;
}
.lyrics-text{
  white-space:pre-line;
  color:#d2d9de;
  font-size:1rem;
  line-height:1.8;
}
.lyrics-close{
  position:absolute;
  right:1.1rem;
  top:1rem;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
}
body.modal-open{overflow:hidden}

.tracklist li{grid-template-columns:54px minmax(0,1fr) auto}
.track-lyrics-button{margin-top:0;white-space:nowrap}
.more-lyrics{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.more-lyrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.more-lyrics-item{margin:0;width:100%;border-radius:18px;padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left}
.more-lyrics-item strong{font-size:1rem}
.more-lyrics-item span{color:var(--muted);font-size:.82rem}
.sister-project{margin:0;font-size:.82rem;color:var(--muted)}
.sister-project a{color:var(--text)}
@media (max-width:680px){
  .tracklist li{grid-template-columns:40px minmax(0,1fr)}
  .track-lyrics-button{grid-column:2;justify-self:start;margin-top:.5rem}
  .more-lyrics-grid{grid-template-columns:1fr}
}

/* HEVINA album cover thumbnails */
.tracklist li{
  grid-template-columns:36px 58px minmax(0,1fr) auto;
  gap:.85rem;
  min-height:76px;
}
.track-cover{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.track-no{
  color:#607384;
  font-variant-numeric:tabular-nums;
  font-size:.82rem;
}
@media (max-width:680px){
  .tracklist li{
    grid-template-columns:30px 52px minmax(0,1fr);
    gap:.7rem;
  }
  .track-cover{width:52px;height:52px;border-radius:10px}
  .track-lyrics-button{
    grid-column:3;
    justify-self:start;
  }
}