:root{
  --white:#f7f8fa;
  --soft:rgba(247,248,250,.72);
  --line:rgba(255,255,255,.26);
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#07111d}
body{overflow:hidden;color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.teaser{position:relative;width:100%;height:100dvh;min-height:520px;isolation:isolate;overflow:hidden;background:#07111d}
.backdrop{position:absolute;z-index:-3;inset:-7%;background:url("den-evige-lengsel-cover.jpg") center/cover no-repeat;filter:blur(34px) saturate(.78);transform:scale(1.08);opacity:.72}
.artwork{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;filter:saturate(.95)}
.veil{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(3,8,14,.06) 26%,rgba(3,8,14,.22) 55%,rgba(3,8,14,.86) 100%)}

.release{position:absolute;left:50%;bottom:clamp(82px,10vh,118px);width:min(92vw,760px);transform:translateX(-50%);text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.62)}
.release-date{margin:0 0 13px;font-size:clamp(22px,3vw,42px);font-weight:600;letter-spacing:.28em;text-indent:.28em;line-height:1}
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,2vw,25px)}
.countdown div{min-width:clamp(45px,7vw,76px);display:flex;flex-direction:column;align-items:center}
.countdown strong{font-size:clamp(22px,3.6vw,48px);line-height:1;font-weight:450;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.countdown span{margin-top:8px;font-size:clamp(7px,.72vw,10px);font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.countdown i{font-style:normal;font-size:clamp(18px,3vw,39px);line-height:.9;color:rgba(255,255,255,.5)}
.released{margin:16px 0 0;font-size:clamp(18px,2.5vw,32px);font-weight:650;letter-spacing:.3em;text-indent:.3em}

.socials{position:absolute;right:clamp(18px,3vw,42px);bottom:clamp(17px,3vh,30px);display:flex;gap:8px;align-items:center}
.socials a{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(3,8,14,.24);backdrop-filter:blur(9px);opacity:.76;transition:opacity .18s ease,background .18s ease,transform .18s ease}
.socials a:hover{opacity:1;background:rgba(255,255,255,.12);transform:translateY(-1px)}
.socials svg{width:14px;height:14px;fill:currentColor}
.socials .stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.socials .fill{fill:currentColor;stroke:none}
.socials .cut{fill:none;stroke:#07111d;stroke-width:1.55;stroke-linecap:round}
.socials .play{fill:#07111d;stroke:none}

@media(max-width:620px){
  .teaser{min-height:500px}
  .artwork{object-position:center 12%}
  .veil{background:linear-gradient(180deg,rgba(3,8,14,.06) 18%,rgba(3,8,14,.18) 48%,rgba(3,8,14,.9) 100%)}
  .release{bottom:100px;width:94vw}
  .release-date{margin-bottom:15px;font-size:24px;letter-spacing:.2em;text-indent:.2em}
  .countdown{gap:8px}
  .countdown div{min-width:52px}
  .countdown strong{font-size:27px}
  .countdown span{font-size:7px;letter-spacing:.12em}
  .countdown i{font-size:21px}
  .socials{left:50%;right:auto;bottom:24px;transform:translateX(-50%)}
  .socials a{width:30px;height:30px}
}

@media(prefers-reduced-motion:reduce){.socials a{transition:none}}