html,body{margin:0;padding:0;background:#020e14}
.ref-page{position:relative;width:100vw;min-height:100vh;overflow:hidden;background:#020e14}
.ref-page.home{height:100vh;overflow:hidden}
.ref-page img.design{display:block;width:100vw;height:auto}
.ref-page.home img.design{width:100vw;height:100vh;object-fit:cover;object-position:center}
.hotspot{position:absolute;z-index:10;display:block;border-radius:10px;transition:background .2s,box-shadow .2s}
.hotspot:hover{background:rgba(255,214,110,.06);box-shadow:0 0 0 2px rgba(255,221,130,.18),0 0 24px rgba(255,190,60,.12)}
/* 1536x1024 reference maps */
.nav-home{left:27.8%;top:2.5%;width:4.3%;height:4.8%}
.nav-music{left:34.2%;top:2.5%;width:5.5%;height:4.8%}
.nav-videos{left:40.7%;top:2.5%;width:5.4%;height:4.8%}
.nav-bio{left:46.9%;top:2.5%;width:5.4%;height:4.8%}
.nav-photos{left:55.2%;top:2.5%;width:4.8%;height:4.8%}
.nav-contact{left:64.1%;top:2.5%;width:6.3%;height:4.8%}
.social-instagram{left:85.4%;top:2.8%;width:2.0%;height:4.8%}
.social-youtube{left:87.8%;top:2.8%;width:2.3%;height:4.8%}
.social-facebook{left:91.0%;top:2.8%;width:2.0%;height:4.8%}
.social-spotify{left:93.6%;top:2.8%;width:2.2%;height:4.8%}
.home-listen{left:16.4%;top:57.7%;width:17.4%;height:6.1%}
.home-videos{left:34.5%;top:57.7%;width:14.0%;height:6.1%}

/* Contact / Photos are also 1536x1024 */
.contact-mail{left:66.2%;top:18.0%;width:30%;height:51%}
.contact-send{left:66.2%;top:49.0%;width:30%;height:6%}
.contact-socials{left:10%;top:83%;width:50%;height:9%}

/* Photos gallery image regions */
.photo-grid-a{left:29.2%;top:22.5%;width:25.0%;height:21.2%}
.photo-grid-b{left:54.3%;top:22.5%;width:22.3%;height:21.2%}
.photo-grid-c{left:76.7%;top:22.5%;width:18.3%;height:21.2%}
.photo-grid-d{left:29.2%;top:44.5%;width:25.0%;height:20.1%}
.photo-grid-e{left:54.3%;top:44.5%;width:22.3%;height:20.1%}
.photo-grid-f{left:76.7%;top:44.5%;width:18.3%;height:20.1%}
.photo-grid-g{left:29.2%;top:65.4%;width:25.0%;height:19.6%}
.photo-grid-h{left:54.3%;top:65.4%;width:22.3%;height:19.6%}
.photo-grid-i{left:76.7%;top:65.4%;width:18.3%;height:19.6%}

/* Bio is portrait 1024x1535; map hotspots against width/height */
.bio{min-height:100vh;overflow:auto}
.bio .nav-home{left:26.8%;top:2.3%;width:5.3%;height:2.8%}
.bio .nav-music{left:34.0%;top:2.3%;width:6.5%;height:2.8%}
.bio .nav-videos{left:41.9%;top:2.3%;width:6.4%;height:2.8%}
.bio .nav-bio{left:49.5%;top:2.3%;width:4.5%;height:2.8%}
.bio .nav-photos{left:55.2%;top:2.3%;width:6.4%;height:2.8%}
.bio .nav-shows{display:none}
.bio .nav-contact{left:68.8%;top:2.3%;width:8.1%;height:2.8%}
.bio .social-instagram{left:82.7%;top:2.2%;width:3.4%;height:3%}
.bio .social-youtube{left:88.0%;top:2.2%;width:4%;height:3%}
.bio .social-facebook{left:93.4%;top:2.2%;width:3.4%;height:3%}

@media(max-width:800px){
  .ref-page:not(.home){overflow:auto}
  .ref-page img.design{width:100%;height:auto}
  .ref-page.home{height:auto;min-height:100svh;overflow:hidden}
  .ref-page.home img.design{height:auto;min-height:100svh;object-fit:cover}
  /* On narrow screens, keep the navigation touchable but allow the large artwork to remain intact. */
}

/* ===== V3: visible navigation overlay ===== */
.visible-nav{
  position:absolute;z-index:50;top:0;left:0;right:0;height:78px;
  display:flex;align-items:center;justify-content:center;gap:26px;
  padding:0 28px;
  background:linear-gradient(180deg,rgba(0,18,24,.68),rgba(0,18,24,.10));
  pointer-events:none;
}
.visible-nav .brand-space{width:235px;flex:0 0 235px}
.visible-nav .links{display:flex;align-items:center;justify-content:center;gap:24px;flex:1;pointer-events:auto}
.visible-nav .links a{
  color:#fff;text-decoration:none;font:700 12px Arial,Helvetica,sans-serif;
  text-transform:uppercase;letter-spacing:.04em;text-shadow:0 2px 7px rgba(0,0,0,.55);
  padding:11px 2px;position:relative;
}
.visible-nav .links a:hover,.visible-nav .links a.active{color:#f3c86f}
.visible-nav .links a.active:after{
  content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:24px;height:2px;border-radius:2px;background:#e4b44f;
}
.visible-nav .socials{
  display:flex;gap:14px;flex:0 0 170px;justify-content:flex-end;pointer-events:auto
}
.visible-nav .socials a{
  color:#efc56a;text-decoration:none;font:700 16px Arial,Helvetica,sans-serif;
  text-shadow:0 2px 7px rgba(0,0,0,.55)
}
.visible-nav .menu{display:none}
@media(max-width:1000px){
 .visible-nav{gap:12px;padding:0 16px}
 .visible-nav .brand-space{width:170px;flex-basis:170px}
 .visible-nav .links{gap:15px}
 .visible-nav .links a{font-size:10px}
 .visible-nav .socials{flex-basis:115px;gap:9px}
}
@media(max-width:760px){
 .visible-nav{justify-content:space-between}
 .visible-nav .brand-space{display:none}
 .visible-nav .links{display:none}
 .visible-nav .socials{display:none}
 .visible-nav .menu{
   display:block;pointer-events:auto;color:#fff;background:rgba(1,29,38,.65);
   border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:9px 12px;
   font-size:20px
 }
 .mobile-visible-links{
   position:absolute;z-index:55;right:16px;top:67px;display:none;flex-direction:column;
   gap:9px;padding:14px 17px;background:rgba(2,29,38,.94);border:1px solid rgba(255,255,255,.16);border-radius:13px;
   box-shadow:0 12px 30px rgba(0,0,0,.35)
 }
 .mobile-visible-links.show{display:flex}
 .mobile-visible-links a{color:#fff;text-decoration:none;font:700 11px Arial;text-transform:uppercase}
}

/* ===== V4 RESTORE: AQUATIC HOME MOTION ===== */
.ref-page.home .waterveil{
  position:absolute;inset:-5%;z-index:3;pointer-events:none;
  background:
    linear-gradient(108deg,transparent 0 41%,rgba(255,255,255,.10) 48%,transparent 55%),
    linear-gradient(74deg,transparent 0 56%,rgba(112,235,238,.055) 60%,transparent 66%);
  background-size:230% 100%,190% 100%;
  mix-blend-mode:screen;
  animation:homeLightSweep 12s linear infinite,homeWaterBreathe 7s ease-in-out infinite;
}
.ref-page.home .bubbles{
  position:absolute;inset:-10%;z-index:4;pointer-events:none;opacity:.62;
  background-image:
    radial-gradient(circle at 13% 72%,rgba(255,255,255,.65) 0 2px,transparent 3px),
    radial-gradient(circle at 31% 66%,rgba(255,255,255,.40) 0 2px,transparent 3px),
    radial-gradient(circle at 58% 78%,rgba(255,255,255,.55) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 60%,rgba(255,255,255,.42) 0 3px,transparent 4px),
    radial-gradient(circle at 88% 35%,rgba(255,255,255,.38) 0 2px,transparent 3px);
  background-size:180px 180px,230px 230px,210px 210px,260px 260px,200px 200px;
  animation:homeBubbles 15s linear infinite;
}
@keyframes homeLightSweep{
  from{background-position:190% 0,160% 0}
  to{background-position:-20% 0,-30% 0}
}
@keyframes homeWaterBreathe{
  0%,100%{transform:scaleX(1);opacity:.48}
  50%{transform:scaleX(1.018);opacity:.82}
}
@keyframes homeBubbles{
  from{background-position:0 120px,10px 150px,-5px 100px,14px 140px,0 120px}
  to{background-position:-12px -620px,15px -740px,-10px -680px,18px -790px,9px -700px}
}
@media(max-width:800px){
  .ref-page.home .waterveil,.ref-page.home .bubbles{inset:-12%}
}

/* ===== V5: RETURN THE WATER SURFACE EFFECT ON HOME ===== */
.ref-page.home{
  background:#057d8b;
}
.ref-page.home::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:13%;
  height:18%;
  z-index:5;
  pointer-events:none;
  border-top:2px solid rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  filter:blur(.15px);
  transform:rotate(-1deg);
  animation:surfaceWave 7s ease-in-out infinite;
  box-shadow:
    0 -12px 30px rgba(255,255,255,.05),
    0 12px 30px rgba(0,80,95,.08);
}
.ref-page.home::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:10%;
  height:25%;
  z-index:5;
  pointer-events:none;
  background:
    repeating-radial-gradient(
      ellipse at 50% 80%,
      rgba(255,255,255,.13) 0 2px,
      transparent 3px 20px
    );
  opacity:.36;
  mix-blend-mode:screen;
  animation:surfaceRipples 9s ease-in-out infinite;
}
@keyframes surfaceWave{
  0%,100%{transform:translateX(-2.5%) rotate(-1deg) scaleY(.96);opacity:.62}
  50%{transform:translateX(2.5%) rotate(1deg) scaleY(1.04);opacity:.92}
}
@keyframes surfaceRipples{
  0%,100%{transform:translateX(-3%) scaleX(1);opacity:.24}
  50%{transform:translateX(3%) scaleX(1.03);opacity:.46}
}