*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#060504;color:#f6d9a0;font-family:Georgia,"Times New Roman",serif}
body{overflow-x:hidden}
.page-shell{min-height:100svh;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,rgba(255,221,150,.16),transparent 38%),radial-gradient(circle at 82% 12%,rgba(255,191,98,.12),transparent 28%),#060504}
.stage{position:relative;width:min(100vw,calc(100svh * 1.5));aspect-ratio:1536/1024;overflow:hidden;isolation:isolate;background:#050403;box-shadow:0 0 70px rgba(255,194,112,.13)}
picture,.hero-image{position:absolute;inset:0;width:100%;height:100%}
.hero-image{object-fit:contain;z-index:1;user-select:none;-webkit-user-drag:none}
.layer{position:absolute;pointer-events:none;z-index:4;mix-blend-mode:screen}
.layer-galaxy{left:76%;top:4.2%;width:13.5%;aspect-ratio:1;border-radius:50%;opacity:.22;background:radial-gradient(circle at center,rgba(255,246,202,.9) 0 5%,rgba(255,198,105,.42) 9%,transparent 22%),conic-gradient(from 0deg,transparent 0deg,rgba(255,235,170,.55) 20deg,transparent 45deg,transparent 84deg,rgba(255,182,84,.36) 104deg,transparent 140deg,transparent 180deg,rgba(255,229,154,.40) 218deg,transparent 255deg,transparent 315deg,rgba(255,194,105,.32) 340deg,transparent 360deg);filter:blur(.3px);animation:galaxySpin 135s linear infinite,galaxyPulse 9s ease-in-out infinite alternate}
.layer-galaxy:before,.layer-galaxy:after{content:"";position:absolute;inset:20%;border-radius:50%;border:1px solid rgba(255,226,155,.24);transform:scaleX(1.8) rotate(-18deg)}
.layer-galaxy:after{inset:33%;opacity:.65;transform:scaleX(2.1) rotate(25deg)}
@keyframes galaxySpin{to{rotate:360deg}}
@keyframes galaxyPulse{from{opacity:.15}to{opacity:.27}}
.layer-notes{width:43%;height:14%;color:rgba(255,222,150,.25);fill:currentColor;stroke:rgba(255,225,160,.20);stroke-width:2;filter:drop-shadow(0 0 10px rgba(255,204,105,.35))}
.layer-notes-left{left:-6.5%;top:8.3%;transform:rotate(-6deg);animation:notesLeft 43s ease-in-out infinite alternate}
.layer-notes-right{right:-5.5%;top:8.5%;transform:rotate(6deg);animation:notesRight 46s ease-in-out infinite alternate}
.layer-notes text{font-size:62px;stroke:none;animation:noteBreath 7s ease-in-out infinite}
.layer-notes text:nth-of-type(2){animation-delay:-1.1s}.layer-notes text:nth-of-type(3){animation-delay:-2.2s}.layer-notes text:nth-of-type(4){animation-delay:-3.3s}.layer-notes text:nth-of-type(5){animation-delay:-4.4s}
.staff{fill:none;stroke-linecap:round}.staff-two{opacity:.72}.staff-three{opacity:.48}
@keyframes notesLeft{from{translate:-1.2% 0;opacity:.13}to{translate:2.8% -.8%;opacity:.28}}
@keyframes notesRight{from{translate:1.3% 0;opacity:.13}to{translate:-2.8% .8%;opacity:.28}}
@keyframes noteBreath{0%,100%{opacity:.42;transform:translateY(0) scale(1)}50%{opacity:.9;transform:translateY(-7px) scale(1.07)}}
.layer-sparkles{inset:0;z-index:3;opacity:.18;background-image:radial-gradient(circle,rgba(255,246,199,.95) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,207,105,.75) 0 1px,transparent 1.8px);background-size:108px 108px,180px 180px;animation:sparkleBreath 6s ease-in-out infinite alternate}
@keyframes sparkleBreath{from{opacity:.08;filter:brightness(.85)}to{opacity:.23;filter:brightness(1.22)}}
.layer-road-glow{left:0;top:19%;width:39%;height:53%;opacity:.14;background:radial-gradient(ellipse at 38% 52%,rgba(255,220,126,.42),transparent 60%),linear-gradient(150deg,transparent 0 24%,rgba(255,222,122,.18) 40%,transparent 64%);filter:blur(14px);animation:roadGlow 8s ease-in-out infinite alternate}
@keyframes roadGlow{from{opacity:.08}to{opacity:.21}}
.hotspot{position:absolute;display:block;z-index:10;border-radius:16px;text-decoration:none;outline-offset:4px}
.hotspot:focus-visible{outline:2px solid rgba(255,230,160,.95);background:rgba(255,220,140,.10)}
.social-instagram{left:1.4%;top:1.7%;width:3.2%;height:5%;border-radius:50%}.social-tiktok{left:5.1%;top:1.7%;width:3.2%;height:5%;border-radius:50%}.social-mail{left:8.8%;top:1.7%;width:3.2%;height:5%;border-radius:50%}.social-heart{left:94.4%;top:1.7%;width:3.2%;height:5%;border-radius:50%}
.nav-home{left:32%;top:1.8%;width:12%;height:4.6%}.nav-about{left:46.5%;top:1.8%;width:12%;height:4.6%}.nav-contact{left:61%;top:1.8%;width:14%;height:4.6%}
.card-images{left:4.5%;top:40.6%;width:30.8%;height:34.3%}.card-stories{left:36.2%;top:40.6%;width:31%;height:34.3%}.card-journey{left:68%;top:40.6%;width:31%;height:34.3%}
.music-spotify{left:75.2%;top:79.2%;width:15.7%;height:6.1%}.music-apple{left:75.2%;top:86.6%;width:15.7%;height:6.1%}
.footer-imprint{left:83%;top:96.2%;width:8.5%;height:3%}.footer-privacy{left:92.3%;top:96.2%;width:7%;height:3%}
.mobile-links{display:none}
@media(max-width:820px){.page-shell{place-items:start center}.stage{width:100vw;height:auto;aspect-ratio:1536/1024}.layer-notes{opacity:.7}.mobile-links{display:grid;gap:.75rem;width:min(92vw,520px);margin:1rem auto 2rem;padding-bottom:1rem}.mobile-links a{color:#f6d99b;border:1px solid rgba(255,221,157,.35);border-radius:999px;padding:.85rem 1rem;text-align:center;text-decoration:none;background:rgba(255,214,128,.07);letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){.layer,.layer *,.layer:before,.layer:after{animation:none!important}}

.seo-content{width:min(92vw,920px);margin:2rem auto 4rem;padding:1.4rem 1.6rem;border:1px solid rgba(255,221,157,.22);border-radius:22px;background:linear-gradient(180deg,rgba(255,214,128,.07),rgba(255,214,128,.03));color:#f5d79c;line-height:1.7;box-shadow:0 0 40px rgba(255,194,112,.07)}
.seo-content h1{margin:.2rem 0 1rem;font-size:clamp(1.35rem,3vw,2.1rem);font-weight:400;letter-spacing:.07em;text-align:center}
.seo-content p{margin:.85rem 0;color:rgba(246,217,160,.86);font-size:clamp(.98rem,1.6vw,1.08rem)}

/* Mobile link panel — warm cream/gold redesign */
.mobile-links{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,170,.34), transparent 42%),
    linear-gradient(180deg,#f8f0e4 0%,#efe0ca 100%) !important;
  padding:2rem 1.35rem 2.4rem !important;
  gap:1rem !important;
}

.mobile-links a{
  background:rgba(255,250,243,.72) !important;
  color:#3a2a1f !important;
  border:1px solid rgba(176,125,58,.48) !important;
  box-shadow:
    0 12px 32px rgba(122,76,28,.10),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  border-radius:999px !important;
  letter-spacing:.065em !important;
}

.mobile-links a:hover,
.mobile-links a:focus{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(176,125,58,.72) !important;
  color:#2b211b !important;
}

/* Slightly soften the mobile page background below the image */
@media(max-width:760px){
  .page-shell{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,226,170,.24), transparent 36%),
      linear-gradient(180deg,#f8f0e4 0%,#efe0ca 100%) !important;
  }
}