.nav { position: fixed; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
.nav.nav-scrolled { background: #151211; box-shadow: 0 1px 0 #ffffff24; }

@media (max-width: 380px) {
  .nav { column-gap: 8px; padding-inline: 14px; }
}

.soundtrack { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.soundtrack a, .soundtrack button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  color: inherit;
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  letter-spacing: .06em;
}
.soundtrack [hidden] { display: none; }
.soundtrack :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 650px) {
  .soundtrack a, .soundtrack button { font-size: 9px; letter-spacing: 0; }
  .nav .menu-toggle { margin-left: 0; }
}

.release-dispatch {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 30px;
  margin-top: clamp(42px, 8vw, 100px);
  padding: clamp(20px, 4vw, 50px);
  background: #171717;
  color: #fff;
}
.release-dispatch h3 {
  font: 800 clamp(32px, 5vw, 80px)/.98 Album, Sans, sans-serif;
  letter-spacing: -.07em;
  margin: 10px 0 0;
}
.dispatch-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  gap: 12px;
  border-top: 1px solid #fff4;
  font-size: 16px;
}
.dispatch-links a:last-child { border-bottom: 1px solid #fff4; }
.dispatch-links a:hover { color: #ffa9a1; }
.dispatch-links small { display: block; margin-top: 5px; color: #e2b1ad; font-size: 9px; letter-spacing: .12em; }

@media (max-width: 650px) {
  html { overflow-x: clip; }
  .release-dispatch { grid-template-columns: 1fr; gap: 20px; }
}

#site-entry {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #100403;
  color: #fff;
  text-align: center;
}
#site-entry[open] { display: grid; place-items: center; }
#site-entry::backdrop { background: #100403; backdrop-filter: none; }
.entry-backdrop {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(0deg, #0b0101 2%, #19030228 65%, #0b0101a8),
    radial-gradient(ellipse at center, transparent 14%, #100201ba 100%),
    url('assets/artist.jpg') center 36% / cover no-repeat;
  animation: entry-pullback 2.15s cubic-bezier(.16,.7,.2,1) both;
}
.entry-frame {
  position: absolute;
  z-index: -1;
  inset: clamp(14px, 3.5vw, 52px);
  border: 1px solid #ffbaa34d;
  box-shadow: 0 0 0 100vmax #06010135;
  animation: entry-frame 1s .22s cubic-bezier(.2,.8,.2,1) both;
}
.entry-sweep {
  position: absolute;
  z-index: -2;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 44%, #ff3e1c5e 49%, #ffb27d65 50%, transparent 55%);
  animation: entry-sweep 1.45s .23s ease-out both;
}
.entry-copy {
  width: min(83vw, 980px);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 2vh, 22px);
}
.entry-kicker, .entry-invite, .entry-slate {
  font-size: clamp(9px, 1.15vw, 12px);
  letter-spacing: .19em;
}
.entry-kicker { animation: entry-caption .55s .55s both; }
#site-entry .entry-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  padding: 5px 0;
  background: transparent;
  color: #fff;
  filter: drop-shadow(0 5px 15px #100201);
  cursor: pointer;
  transition: color .2s, filter .2s;
}
.entry-button svg { display: block; width: 100%; height: auto; overflow: visible; animation: entry-title .88s .68s cubic-bezier(.16,.85,.24,1) both; }
.entry-button text { fill: currentColor; font: 800 200px Album, Sans, sans-serif; }
#site-entry .entry-button:hover { color: #ffddd3; filter: drop-shadow(0 0 22px #ff3e1ca0); }
#site-entry .entry-button:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }
.entry-invite {
  display: grid;
  justify-items: center;
  gap: 8px;
  animation: entry-caption .52s 1.47s both;
}
.entry-invite small { font-size: 9px; color: #ffb9a7; }
.entry-arrow { font-size: 21px; animation: entry-arrow 1.5s 1.95s ease-in-out 3; }
.entry-slate {
  position: absolute;
  bottom: clamp(24px, 5vw, 72px);
  inset-inline: clamp(24px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  color: #ffccbd;
  animation: entry-caption .6s 1.15s both;
}
@keyframes entry-pullback {
  from { transform: scale(1.26); filter: brightness(.28) saturate(.75); }
  to { transform: scale(1); filter: brightness(.67) saturate(1.12); }
}
@keyframes entry-frame {
  from { clip-path: inset(49% 0); opacity: 0; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes entry-sweep {
  from { transform: translateX(-58%); opacity: .7; }
  to { transform: translateX(58%); opacity: 0; }
}
@keyframes entry-title {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-3%) scale(.98); opacity: .4; }
  to { clip-path: inset(-12%); transform: none; opacity: 1; }
}
@keyframes entry-caption {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes entry-arrow {
  50% { transform: translateY(-4px); }
}
@media (max-width: 650px) {
  .entry-backdrop { background-position: center, center, 61% center; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-sweep { display: none; }
  .entry-backdrop { filter: brightness(.67) saturate(1.12); }
}