:root{--bg:#050507;--fg:#f6f3ed;--muted:#a8a5ad;--line:#24242b;--accent:#d8ff3e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 15%,rgba(122,62,255,.15),transparent 28%),radial-gradient(circle at 25% 45%,rgba(0,180,255,.08),transparent 30%);z-index:-1}a{color:inherit;text-decoration:none}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px);position:absolute;top:0;width:100%;z-index:5}.brand img{height:48px;max-width:170px;object-fit:contain}.nav-link{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#d6d4db}.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4vw;padding:120px clamp(24px,7vw,110px) 70px;position:relative}.hero-copy{z-index:2}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;color:#b9b6c0;margin:0 0 26px}.hero h1{font-size:clamp(68px,9.2vw,150px);line-height:.82;letter-spacing:-.075em;margin:0;max-width:900px;font-weight:800}.hero h1 em,.manifesto em{font-style:normal;color:var(--accent)}.promise{font-size:clamp(18px,2vw,28px);line-height:1.35;color:#d7d4dc;max-width:680px;margin:34px 0}.actions{display:flex;gap:14px;flex-wrap:wrap}.actions a{padding:15px 21px;border-radius:999px;font-size:13px;font-weight:700}.primary{background:var(--fg);color:#09090b}.secondary{border:1px solid #393941}.hero-mark{position:relative;display:flex;align-items:center;justify-content:center}.hero-mark:before{content:"999";position:absolute;font-size:clamp(180px,26vw,450px);font-weight:900;letter-spacing:-.12em;color:rgba(255,255,255,.025);z-index:-1}.hero-mark img{width:min(100%,650px);max-height:66vh;object-fit:contain;filter:drop-shadow(0 30px 80px rgba(0,0,0,.5))}.release{padding:130px clamp(24px,8vw,130px);display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,.8fr);gap:clamp(45px,8vw,120px);align-items:center;border-top:1px solid var(--line)}.poster-wrap{position:relative}.poster{width:100%;display:block;border-radius:5px;box-shadow:0 35px 90px rgba(0,0,0,.55)}.badge{position:absolute;top:18px;left:18px;background:var(--accent);color:#08090a;padding:8px 11px;font-size:10px;font-weight:900;letter-spacing:.16em}.release h2{font-size:clamp(60px,8vw,125px);letter-spacing:-.065em;line-height:.85;margin:0}.hook{font-size:clamp(22px,2.4vw,36px);margin:24px 0 8px;color:#ddd9e2}.coming{font-size:12px;font-weight:800;letter-spacing:.25em;color:var(--accent);margin:28px 0}.desc{color:var(--muted);font-size:17px;line-height:1.7;max-width:540px}.text-link{display:inline-block;margin-top:25px;border-bottom:1px solid #5a5960;padding-bottom:5px}.manifesto{min-height:70vh;padding:140px clamp(24px,8vw,130px);display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line)}.manifesto>p{color:var(--muted);font-size:18px}.manifesto h2{font-size:clamp(55px,8vw,125px);line-height:.9;letter-spacing:-.06em;margin:20px 0 50px}.pill-row{display:flex;gap:10px;flex-wrap:wrap}.pill-row span{border:1px solid #34343b;border-radius:999px;padding:10px 14px;font-size:10px;letter-spacing:.18em}footer{border-top:1px solid var(--line);padding:55px clamp(24px,5vw,80px);display:grid;grid-template-columns:1fr auto;gap:25px;color:#a8a5ad;font-size:13px}footer strong{display:block;color:var(--fg);font-size:20px}footer span{display:block;margin-top:5px}.footer-links{display:flex;gap:25px;align-items:start}.credit{grid-column:1/-1;margin:30px 0 0;color:#62616a}@media(max-width:800px){header{height:72px}.brand img{height:38px}.hero{grid-template-columns:1fr;padding-top:130px}.hero-mark{margin-top:20px}.hero-mark img{max-height:42vh}.release{grid-template-columns:1fr;padding-top:90px;padding-bottom:90px}.release-copy{order:-1}.manifesto{padding-top:100px;padding-bottom:100px;min-height:auto}footer{grid-template-columns:1fr}.footer-links{flex-direction:column;gap:12px}.hero h1{font-size:clamp(64px,20vw,105px)}}

/* Album999 emotional visual language — V5 */
.hero{overflow:hidden;isolation:isolate}
.hero-copy,.hero-mark{position:relative;z-index:2}
/* Page 1: centered in the LEFT HALF, not bottom-left */
.emotion-visual{position:absolute;z-index:1;left:26%;top:50%;transform:translate(-50%,-50%);width:clamp(500px,46vw,820px);height:auto;opacity:.68;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 50%,#000 0%,#000 44%,rgba(0,0,0,.75) 64%,transparent 88%);mask-image:radial-gradient(ellipse 64% 62% at 50% 50%,#000 0%,#000 44%,rgba(0,0,0,.75) 64%,transparent 88%)}
.emotion-visual img{width:100%;height:auto;display:block;filter:saturate(.92) contrast(1.05) brightness(1.06)}
/* Page 2: fixed three-zone composition. Artwork can never create a third page. */
.release{position:relative;overflow:hidden;isolation:isolate;grid-template-columns:minmax(330px,1.02fr) minmax(300px,.72fr) minmax(360px,.92fr);gap:clamp(30px,4vw,70px);min-height:760px}
.poster-wrap,.release-copy{position:relative;z-index:3}
.listening-visual{position:relative;z-index:2;align-self:center;justify-self:end;width:100%;height:620px;overflow:hidden;pointer-events:none;margin-right:-7vw;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 13%,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 13%,#000 30%,#000 100%)}
.listening-visual img{position:absolute;height:100%;width:auto;max-width:none;right:-14%;top:50%;transform:translateY(-50%) scale(1.24);transform-origin:72% 50%;filter:saturate(1.02) contrast(1.04) brightness(1.02)}
@media(max-width:1280px){.emotion-visual{left:23%;width:620px;opacity:.62}.release{grid-template-columns:minmax(300px,1fr) minmax(280px,.72fr) minmax(300px,.8fr);gap:30px}.listening-visual{height:520px;margin-right:-11vw}.listening-visual img{right:-23%;transform:translateY(-50%) scale(1.28)}}
@media(max-width:980px){.emotion-visual{left:20%;width:520px;opacity:.54}.release{grid-template-columns:1fr 1fr}.listening-visual{position:absolute;right:-10vw;top:50%;transform:translateY(-50%);width:42vw;height:520px;opacity:.5;z-index:1}.poster-wrap,.release-copy{z-index:3}}
@media(max-width:800px){.emotion-visual,.listening-visual{display:none}.release{grid-template-columns:1fr;min-height:auto}}

/* V6 final composition correction */
/* Page 1: keep centered placement, raise emotional visual presence to ~75%. */
.emotion-visual{left:26%;top:50%;width:clamp(520px,47vw,850px);opacity:.78}
.emotion-visual img{filter:saturate(.98) contrast(1.06) brightness(1.18)}

/* Page 2: artwork is hard-contained inside the STILL ME section; no third-page spill. */
.release{grid-template-columns:minmax(330px,1.02fr) minmax(300px,.78fr) minmax(330px,.78fr);min-height:720px;overflow:hidden}
.listening-visual{position:relative;inset:auto;transform:none;align-self:center;justify-self:stretch;width:100%;height:600px;margin:0 -5vw 0 0;overflow:hidden;opacity:.92;z-index:2;mask-image:none;-webkit-mask-image:none}
.listening-visual img{content:url('/assets/listening-joy-crop.png');position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center center;transform:none;filter:saturate(1.08) contrast(1.06) brightness(1.08)}
@media(max-width:1280px){.emotion-visual{left:25%;width:650px;opacity:.75}.release{grid-template-columns:minmax(300px,1fr) minmax(270px,.74fr) minmax(290px,.74fr)}.listening-visual{height:520px;margin-right:-6vw}.listening-visual img{right:auto;transform:none}}
@media(max-width:980px){.emotion-visual{left:23%;width:560px;opacity:.70}.release{grid-template-columns:1fr 1fr;min-height:700px}.listening-visual{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);width:38vw;height:500px;margin:0;opacity:.58}.listening-visual img{transform:none}}
@media(max-width:800px){.emotion-visual,.listening-visual{display:none}.release{grid-template-columns:1fr;min-height:auto}}

/* V7 approved composition */
/* Page 1: true vertical center of left half, not bottom anchored. */
.emotion-visual{left:25%;top:43%;width:clamp(540px,48vw,870px);opacity:.80}
.emotion-visual img{filter:saturate(1) contrast(1.07) brightness(1.20)}

/* Page 2: right artwork is one contained 999 + reclining-listener composition. */
.release{grid-template-columns:minmax(330px,1.04fr) minmax(300px,.76fr) minmax(390px,.94fr);min-height:720px;overflow:hidden}
.listening-visual{position:relative;align-self:center;justify-self:stretch;width:100%;height:620px;margin:0 -4vw 0 0;overflow:hidden;opacity:1;z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.78) 8%,#000 20%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.78) 8%,#000 20%,#000 100%)}
.listening-visual img{content:none;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center center;transform:none;filter:saturate(1.04) contrast(1.04) brightness(1.04)}
@media(max-width:1280px){.emotion-visual{left:24%;top:44%;width:680px;opacity:.78}.release{grid-template-columns:minmax(300px,1fr) minmax(270px,.72fr) minmax(330px,.84fr)}.listening-visual{height:550px;margin-right:-6vw}}
@media(max-width:980px){.emotion-visual{left:22%;top:45%;width:580px;opacity:.72}.release{grid-template-columns:1fr 1fr}.listening-visual{position:absolute;right:-3vw;top:50%;transform:translateY(-50%);width:40vw;height:520px;margin:0;opacity:.62}}
@media(max-width:800px){.emotion-visual,.listening-visual{display:none}.release{grid-template-columns:1fr;min-height:auto}}


/* V12: isolated Page 2 FINAL. Page 1 above is byte-for-byte inherited from V11/V7. */
.experience2{
  border-top:1px solid var(--line);
  min-height:760px;
  padding:90px clamp(30px,5vw,84px);
  display:grid;
  grid-template-columns:minmax(320px,.90fr) minmax(270px,.66fr) minmax(500px,1.18fr);
  column-gap:clamp(30px,3vw,58px);
  align-items:center;
  position:relative;
  overflow:visible;
}
.experience2-poster{position:relative;width:100%;max-width:430px;justify-self:start;align-self:center}
.experience2-poster img{display:block;width:100%;height:auto;border-radius:5px;box-shadow:0 35px 90px rgba(0,0,0,.55)}
.experience2-poster span{position:absolute;top:18px;left:18px;background:var(--accent);color:#08090a;padding:8px 11px;font-size:10px;font-weight:900;letter-spacing:.16em}
.experience2-copy{align-self:center;justify-self:start;min-width:0}
.experience2-copy h2{font-size:clamp(58px,5.8vw,100px);letter-spacing:-.065em;line-height:.85;margin:0}
.experience2-coming{font-size:12px;font-weight:800;letter-spacing:.25em;color:var(--accent);margin:28px 0}
.experience2-desc{color:var(--muted);font-size:17px;line-height:1.7;max-width:440px}
.experience2-link{display:inline-block;margin-top:25px;border-bottom:1px solid #5a5960;padding-bottom:5px}
.experience2-art{
  width:100%;
  min-width:0;
  align-self:center;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  margin:0;
  padding:0;
}
.experience2-art img{
  display:block;
  position:static;
  width:100%;
  height:auto;
  max-width:760px;
  max-height:none;
  object-fit:contain;
  object-position:center;
  transform:none;
  clip-path:none;
  mask:none;
  -webkit-mask:none;
  filter:none;
}
@media(max-width:1280px){
  .experience2{grid-template-columns:minmax(280px,.90fr) minmax(235px,.62fr) minmax(430px,1.08fr);gap:24px;padding-left:42px;padding-right:42px}
  .experience2-art img{max-width:650px}
  .experience2-copy h2{font-size:clamp(54px,5.5vw,88px)}
}
@media(max-width:1050px){
  .experience2{grid-template-columns:minmax(300px,.9fr) minmax(260px,.7fr);min-height:auto;overflow:visible}
  .experience2-art{grid-column:1/-1;margin-top:34px}
  .experience2-art img{width:min(100%,760px);max-width:760px}
}
@media(max-width:800px){
  .experience2{grid-template-columns:1fr;padding-top:90px;padding-bottom:90px}
  .experience2-copy{order:-1}
  .experience2-art{display:flex;margin-top:35px}
  .experience2-art img{width:100%;max-width:680px}
}


/* V14 temporary Coming Soon Page 2 — one complete artwork only. Page 1 unchanged. */
.coming2{border-top:1px solid var(--line);padding:72px clamp(20px,5vw,80px) 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#050507;overflow:hidden}
.coming2-image{display:block;width:min(100%,1800px);margin:0 auto}
.coming2-image img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center;border:0}
.coming2-link{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.04em;border-bottom:1px solid #5a5960;padding-bottom:6px}
@media(max-width:800px){.coming2{padding:50px 16px 44px;gap:20px}.coming2-link{font-size:13px}}

/* V15 final temporary-site cleanup */
.hero-mark{display:none !important}
.hero{grid-template-columns:1fr !important}
.hero-copy{max-width:980px}
.coming2{gap:0 !important}
.coming2-link{display:none !important}


/* V17 FINAL — restore approved Page 1 only. Page 2 remains V15 frozen. */
@media (min-width:801px){
  .hero{
    min-height:100vh !important;
    display:grid !important;
    grid-template-columns:1.05fr .95fr !important;
    align-items:center !important;
    gap:4vw !important;
    padding:120px clamp(24px,7vw,110px) 70px !important;
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }
  .hero-copy{
    position:relative !important;
    z-index:2 !important;
    max-width:none !important;
    margin:0 !important;
    width:auto !important;
  }
  .emotion-visual{
    position:absolute !important;
    z-index:1 !important;
    left:25% !important;
    top:43% !important;
    transform:translate(-50%,-50%) !important;
    width:clamp(540px,48vw,870px) !important;
    height:auto !important;
    opacity:.80 !important;
    pointer-events:none !important;
    mix-blend-mode:screen !important;
    -webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 50%,#000 0%,#000 44%,rgba(0,0,0,.75) 64%,transparent 88%) !important;
    mask-image:radial-gradient(ellipse 64% 62% at 50% 50%,#000 0%,#000 44%,rgba(0,0,0,.75) 64%,transparent 88%) !important;
  }
  .emotion-visual img{
    width:100% !important;
    height:auto !important;
    display:block !important;
    filter:saturate(1) contrast(1.07) brightness(1.20) !important;
  }
}
@media (min-width:981px) and (max-width:1280px){
  .emotion-visual{left:24% !important;top:44% !important;width:680px !important;opacity:.78 !important}
}
@media (min-width:801px) and (max-width:980px){
  .emotion-visual{left:22% !important;top:45% !important;width:580px !important;opacity:.72 !important}
}