/* Harbour Bay Sounds — immersive 2026 experience layer */

@property --page-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --section-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --tilt-x {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --tilt-y {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --header-height: 76px;
  --gutter: clamp(18px, 3.25vw, 58px);
  --radius: 0px;
  --hairline: rgb(var(--line) / .18);
  --glass: rgb(var(--panel) / .52);
  --glass-strong: rgb(var(--panel) / .74);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.22, 1.4, .36, 1);
}

html {
  scroll-padding-top: calc(var(--header-height) + 18px);
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgb(var(--accent) / .14), transparent 38%),
    radial-gradient(circle at 82% 84%, rgb(var(--accent-2) / .14), transparent 42%),
    linear-gradient(160deg, rgb(var(--bg)) 0%, color-mix(in oklab, rgb(var(--bg)) 87%, black) 100%);
  transition: background 700ms linear;
}

.three-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  filter: saturate(1.12) contrast(1.03);
  transition: opacity 1.4s var(--ease-out-expo);
}

.webgl-ready .three-atmosphere {
  opacity: .92;
}

.cinema-vignette {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  box-shadow: inset 0 0 180px rgb(0 0 0 / .18);
  background:
    linear-gradient(90deg, rgb(0 0 0 / .08), transparent 7%, transparent 93%, rgb(0 0 0 / .08)),
    linear-gradient(180deg, rgb(0 0 0 / .06), transparent 8%, transparent 92%, rgb(0 0 0 / .11));
  mix-blend-mode: multiply;
}

.ambient {
  z-index: -3;
  background: transparent;
}

.ambient__orb {
  opacity: .18;
  filter: blur(120px);
}

.ambient__mesh {
  opacity: .09;
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.ambient__grain {
  z-index: 5;
  opacity: .055;
  mix-blend-mode: soft-light;
}

/* Floating command bar */
.topbar {
  inset: 14px var(--gutter) auto;
  width: auto;
  height: 54px;
  padding: 7px 8px 7px 10px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  border: 1px solid rgb(var(--line) / .16);
  border-radius: 0;
  background: color-mix(in oklab, rgb(var(--bg)) 58%, transparent);
  box-shadow:
    0 18px 60px rgb(0 0 0 / .12),
    inset 0 1px rgb(255 255 255 / .16);
  backdrop-filter: blur(28px) saturate(1.55);
}

.topbar::after {
  right: 22px;
  bottom: -1px;
  left: 22px;
  height: 1px;
  border-radius: 0;
  box-shadow: 0 0 18px rgb(var(--accent) / .8);
}

.brand__mark {
  width: 34px;
  border-radius: 0;
  background: rgb(var(--ink));
  color: rgb(var(--bg));
  border-color: transparent;
  box-shadow: 0 0 26px rgb(var(--accent) / .2);
}

.brand__name {
  font-size: 10px;
  letter-spacing: .14em;
}

.album-nav {
  gap: 2px;
}

.album-nav__status {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-nav__button {
  width: 24px;
  height: 28px;
}

.album-nav__button::before {
  inset: 11px 9px;
  border-radius: 0;
  background: rgb(var(--ink) / .28);
}

.album-nav__button:hover::before,
.album-nav__button[aria-current="true"]::before {
  inset: 8px 6px;
  border-radius: 0;
}

.topbar__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}

.motion-toggle,
.atlas-trigger {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  padding: 0 13px;
  background: transparent;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s var(--ease-spring);
}

.motion-toggle:hover,
.atlas-trigger:hover {
  background: rgb(var(--ink) / .08);
  transform: translateY(-1px);
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.motion-toggle__pulse {
  width: 7px;
  aspect-ratio: 1;
  border-radius: 0;
  background: rgb(var(--accent));
  box-shadow: 0 0 0 0 rgb(var(--accent) / .55);
  animation: signal-pulse 2.2s ease-out infinite;
}

.motion-toggle[aria-pressed="true"] .motion-toggle__pulse,
.is-motion-paused .motion-toggle__pulse {
  animation: none;
  opacity: .4;
  box-shadow: none;
}

.atlas-trigger {
  display: inline-flex;
  border-bottom: 0;
  background: rgb(var(--ink));
  color: rgb(var(--bg));
}

.atlas-trigger:hover {
  background: rgb(var(--accent));
  color: rgb(var(--ink));
}

@keyframes signal-pulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent) / .55); }
  70%, 100% { box-shadow: 0 0 0 8px rgb(var(--accent) / 0); }
}

/* Hero — image, type and shader treated as one composition */
.prologue {
  min-height: 100svh;
  padding: clamp(112px, 15vh, 150px) var(--gutter) clamp(48px, 7vh, 86px);
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: end;
  isolation: isolate;
  background: rgb(0 0 0 / .08);
}

.prologue::before {
  width: min(52vw, 780px);
  right: -8vw;
  top: 8vh;
  border-color: rgb(255 255 255 / .22);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .12),
    0 0 0 8vw rgb(var(--accent) / .05),
    0 0 0 16vw rgb(var(--accent-2) / .035);
}

.prologue::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(4 8 12 / .68) 0%, rgb(4 8 12 / .25) 44%, transparent 72%),
    linear-gradient(0deg, rgb(4 8 12 / .42), transparent 42%);
}

.prologue__background {
  filter: saturate(1.12) contrast(1.04);
}

.prologue__background::before {
  background: linear-gradient(90deg, rgb(9 12 14 / .54), transparent 64%);
}

.prologue__background::after {
  background:
    radial-gradient(circle at 74% 35%, rgb(var(--glow) / .18), transparent 24%),
    linear-gradient(0deg, rgb(0 0 0 / .28), transparent 50%);
}

.prologue__background img {
  animation-duration: 26s;
  transform-origin: center 62%;
}

.prologue__copy {
  position: relative;
  z-index: 4;
  align-self: end;
  max-width: 980px;
}

.prologue__eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 0;
  color: rgb(255 255 255 / .82);
  background: rgb(0 0 0 / .14);
  backdrop-filter: blur(12px);
  font-size: 9px;
}

.prologue__signal {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(22px, 4vh, 44px);
  color: rgb(255 255 255 / .68);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.prologue__signal span {
  padding: 5px 8px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 0;
  background: rgb(0 0 0 / .1);
}

.prologue h1 {
  position: relative;
  z-index: 4;
  max-width: none;
  color: #f7f1e9;
  font-size: clamp(62px, 8.7vw, 154px);
  line-height: .78;
  letter-spacing: -.072em;
  text-shadow: 0 8px 40px rgb(0 0 0 / .24);
}

.prologue h1 > span {
  display: block;
  white-space: nowrap;
}

.prologue h1 > span + span {
  margin-top: .13em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(247 241 233 / .82);
  text-shadow: none;
}

.prologue__dek {
  max-width: 48ch;
  margin-top: clamp(26px, 4vh, 44px);
  color: rgb(255 255 255 / .78);
  font-size: clamp(14px, 1.15vw, 18px);
}

.prologue__cue {
  position: relative;
  z-index: 4;
  margin-top: clamp(28px, 5vh, 58px);
  color: #fff;
}

.prologue__stage {
  z-index: 3;
  inset: 7vh -3vw 0 auto;
  width: min(52vw, 800px);
}

.prologue__portrait--solo {
  inset: auto 0 0 auto;
  width: 100%;
  height: 94%;
  filter: drop-shadow(0 28px 35px rgb(0 0 0 / .32));
}

.prologue__portrait--solo img {
  object-position: 54% 100%;
  transform: scale(1.17) translateY(2.5%);
}

.prologue__halo {
  opacity: .72;
  border: 1px solid rgb(255 255 255 / .2);
  background:
    radial-gradient(circle, rgb(var(--glow) / .24), transparent 55%),
    conic-gradient(from 90deg, transparent, rgb(var(--accent) / .26), transparent 32%, rgb(var(--accent-2) / .2), transparent 70%);
  filter: blur(.1px);
  animation: halo-turn 28s linear infinite;
}

.prologue__coordinates {
  position: absolute;
  z-index: 2;
  top: 9%;
  right: 6%;
  writing-mode: vertical-rl;
  color: rgb(255 255 255 / .55);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
}

@keyframes halo-turn {
  to { transform: rotate(1turn); }
}

/* Editorial chapters */
.photo-prelude,
.pose-reel,
.artist-profile,
.chapter-interlude,
.monsoon-coda {
  margin-inline: var(--gutter);
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 90px rgb(0 0 0 / .14);
}

.photo-prelude {
  min-height: min(88svh, 920px);
  margin-top: clamp(22px, 4vw, 58px);
  border-radius: 0;
  overflow: clip;
  background: #152f18;
}

.photo-prelude::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .25), transparent 25%, transparent 75%, rgb(0 0 0 / .18)),
    linear-gradient(0deg, rgb(0 0 0 / .3), transparent 35%);
}

.photo-prelude > img {
  transform: scale(1.015);
  transition: transform 1.2s var(--ease-out-expo), filter 1.2s ease;
}

.photo-prelude:hover > img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.photo-prelude__label,
.monsoon-coda__label {
  z-index: 3;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 0;
  background: rgb(0 0 0 / .18);
  backdrop-filter: blur(14px);
}

.pose-reel {
  min-height: 96svh;
  margin-top: clamp(22px, 4vw, 58px);
  border-radius: 0;
  overflow: clip;
  background:
    radial-gradient(circle at 66% 45%, rgb(var(--accent) / .25), transparent 34%),
    color-mix(in oklab, rgb(var(--bg)) 72%, black);
}

.pose-reel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(var(--line) / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--line) / .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent, black 30%, black);
}

.pose-reel__copy {
  z-index: 4;
}

.pose-reel__copy h2 {
  max-width: 7ch;
  font-size: clamp(60px, 9vw, 150px);
  line-height: .8;
}

.pose-reel__stage img {
  filter: drop-shadow(0 25px 26px rgb(0 0 0 / .24));
}

.artist-profile {
  border-radius: 0;
  background: color-mix(in oklab, rgb(var(--panel)) 68%, transparent);
  backdrop-filter: blur(26px) saturate(1.3);
  overflow: clip;
}

.artist-profile summary {
  min-height: clamp(190px, 28vw, 380px);
  padding: clamp(30px, 5vw, 72px);
  background:
    radial-gradient(circle at 84% 50%, rgb(var(--accent) / .18), transparent 34%),
    transparent;
}

.artist-profile summary strong {
  max-width: 13ch;
  font-size: clamp(42px, 6.3vw, 108px);
  letter-spacing: -.055em;
}

.artist-profile__body {
  padding: 0 clamp(30px, 5vw, 72px) clamp(30px, 5vw, 72px);
  gap: clamp(24px, 5vw, 76px);
}

.artist-profile__portrait {
  overflow: clip;
  border-radius: 0;
  background: rgb(var(--accent) / .08);
}

.artist-profile__portrait img {
  transform: scale(1.04);
}

/* Album cards — cover stays tactile, information becomes a translucent instrument panel */
.album {
  min-height: max(110svh, 900px);
  padding: clamp(104px, 14vh, 150px) var(--gutter) clamp(86px, 12vh, 140px);
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
  overflow: clip;
}

.album::before {
  top: 14vh;
  right: -2vw;
  font-size: min(44vw, 670px);
  color: rgb(var(--ink) / .045);
  filter: blur(.2px);
}

.album::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 8vh var(--gutter);
  border: 1px solid rgb(var(--line) / .1);
  border-radius: 0;
  background:
    radial-gradient(circle at 16% 30%, rgb(var(--local-accent) / .12), transparent 28%),
    radial-gradient(circle at 86% 74%, rgb(var(--local-accent-2) / .1), transparent 30%),
    color-mix(in oklab, rgb(var(--panel)) 28%, transparent);
  backdrop-filter: blur(8px);
}

.album__shell {
  position: relative;
  z-index: 2;
  width: min(1580px, 100%);
  grid-template-columns: minmax(330px, .9fr) minmax(360px, 1.1fr);
  gap: clamp(42px, 8vw, 140px);
}

.album__visual {
  align-self: center;
}

.album__cover-wrap {
  width: min(100%, 680px);
  perspective: 1700px;
}

.album__cover-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px;
  border: 1px solid rgb(var(--line) / .14);
  border-radius: 0;
  transform: translate(18px, 18px);
  background: rgb(var(--panel) / .14);
}

.album__cover {
  --tilt-x: var(--rx, 0deg);
  --tilt-y: var(--ry, 0deg);
  border-radius: 0;
  box-shadow:
    0 50px 100px rgb(0 0 0 / .28),
    0 10px 26px rgb(0 0 0 / .14),
    inset 0 1px rgb(255 255 255 / .25);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transition: transform .32s var(--ease-out-expo), box-shadow .4s ease;
}

.album__cover-wrap:hover .album__cover {
  box-shadow:
    0 66px 120px rgb(0 0 0 / .32),
    0 0 52px rgb(var(--local-accent) / .18),
    inset 0 1px rgb(255 255 255 / .3);
}

.album__cover::before {
  background:
    linear-gradient(116deg, rgb(255 255 255 / .22), transparent 18%, transparent 66%, rgb(0 0 0 / .24)),
    radial-gradient(circle at 28% 4%, rgb(var(--glow) / .2), transparent 30%);
}

.album__cover::after {
  border-color: rgb(255 255 255 / .28);
}

.album__cover img {
  transition: transform 1.1s var(--ease-out-expo), filter .7s ease;
}

.album__cover-wrap:hover img {
  transform: scale(1.048);
  filter: saturate(1.05) contrast(1.03);
}

.album__cover-reflection {
  inset: 14% -14% -16% 10%;
  opacity: .72;
  filter: blur(76px);
}

.album__palette {
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  padding: 6px;
  border-color: rgb(255 255 255 / .24);
  background: rgb(5 7 9 / .34);
  box-shadow: 0 12px 30px rgb(0 0 0 / .18);
  backdrop-filter: blur(18px) saturate(1.4);
}

.palette-chip {
  width: 25px;
  border-width: 1px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
}

.album__caption {
  margin-top: 23px;
  padding-inline: 4px;
}

.album__copy {
  align-self: center;
  padding: clamp(24px, 3.6vw, 56px);
  border: 1px solid rgb(var(--line) / .14);
  border-radius: 0;
  background: color-mix(in oklab, rgb(var(--panel)) 47%, transparent);
  box-shadow:
    0 28px 80px rgb(0 0 0 / .11),
    inset 0 1px rgb(255 255 255 / .11);
  backdrop-filter: blur(22px) saturate(1.2);
}

.album__artist {
  width: max-content;
  margin: 0 0 12px;
  padding: 6px 9px;
  border: 1px solid rgb(var(--line) / .14);
  border-radius: 0;
  color: rgb(var(--muted));
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.album__meta-row {
  margin-bottom: 20px;
}

.album__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: rgb(var(--muted));
}

.album__title {
  max-width: 11ch;
  font-size: clamp(54px, 6.6vw, 112px);
  letter-spacing: -.064em;
}

.album[data-layout="celestial"] .album__title,
.album[data-layout="moon"] .album__title {
  max-width: 12ch;
}

.album__subtitle {
  font-size: clamp(13px, 1.05vw, 17px);
}

.track-grid {
  margin-top: clamp(28px, 4vw, 52px);
}

.track {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 13px 8px 13px 0;
  transition: padding .32s var(--ease-out-expo), color .25s ease;
}

.track::before {
  border-radius: 0;
  background: linear-gradient(90deg, rgb(var(--local-accent) / .2), rgb(var(--local-accent-2) / .07));
}

.track:hover,
.track:focus-visible {
  padding-left: 10px;
}

.track__title {
  font-size: clamp(12px, 1vw, 16px);
}

.track__open {
  display: grid;
  place-items: center;
  width: 25px;
  aspect-ratio: 1;
  border: 1px solid rgb(var(--line) / .16);
  border-radius: 0;
}

.album[data-layout="neon"] .album__cover,
.album[data-layout="celestial"] .album__cover,
.album[data-layout="moon"] .album__cover,
.album[data-layout="desert"] .album__cover {
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.album[data-layout="neon"] .album__cover {
  border-radius: 0;
}

.album[data-layout="desert"] .album__cover {
  border-radius: 0;
}

.album[data-layout="celestial"] .album__cover {
  clip-path: polygon(0 4%, 4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%);
}

.album[data-layout="moon"] .album__cover {
  clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
}

.album__fx {
  opacity: .7;
  mix-blend-mode: screen;
}

.chapter-interlude {
  border-radius: 0;
  overflow: clip;
  background:
    radial-gradient(circle at 68% 38%, rgb(var(--accent) / .22), transparent 28%),
    color-mix(in oklab, rgb(var(--bg)) 80%, black);
}

.chapter-interlude__portrait img {
  filter: drop-shadow(0 28px 40px rgb(0 0 0 / .24));
}

.monsoon-coda {
  border-radius: 0;
  overflow: clip;
}

/* Dialogs become full-featured editorial sheets */
.track-dialog,
.atlas-dialog {
  background: color-mix(in oklab, rgb(var(--panel)) 88%, transparent);
  border-color: rgb(var(--line) / .2);
  box-shadow: 0 60px 180px rgb(0 0 0 / .55);
  backdrop-filter: blur(34px) saturate(1.3);
}

.track-dialog::backdrop,
.atlas-dialog::backdrop {
  background: rgb(2 4 6 / .68);
  backdrop-filter: blur(18px) saturate(.8);
}

.track-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  border-radius: 0;
}

.track-dialog h2 {
  max-width: 12ch;
  font-size: clamp(48px, 8vw, 112px);
}

.track-dialog__lyrics-block {
  border-top: 1px solid rgb(var(--line) / .18);
}

.dialog-close {
  background: rgb(var(--ink));
  color: rgb(var(--bg));
  border-color: transparent;
}

/* Scroll-linked flourishes, progressive enhancement only */
@supports (animation-timeline: scroll()) {
  .prologue__background img {
    animation: hero-drift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }

  .prologue__copy {
    animation: hero-copy-exit linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 80%;
  }

  .album::before {
    animation: roman-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  @keyframes hero-drift {
    from { transform: scale(1.02) translateY(0); }
    to { transform: scale(1.12) translateY(6%); }
  }

  @keyframes hero-copy-exit {
    to { opacity: .15; transform: translateY(-60px) scale(.96); }
  }

  @keyframes roman-drift {
    from { transform: translateY(10%); }
    to { transform: translateY(-12%); }
  }
}

/* Motion pause is a real mode, not a cosmetic button */
.is-motion-paused *,
.is-motion-paused *::before,
.is-motion-paused *::after {
  animation-play-state: paused !important;
}

.is-motion-paused .three-atmosphere {
  opacity: .52;
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .album-nav {
    display: none;
  }

  .prologue {
    grid-template-columns: 1fr;
  }

  .prologue__copy {
    max-width: 88vw;
  }

  .prologue__stage {
    width: min(66vw, 720px);
    opacity: 1;
  }

  .album__shell {
    grid-template-columns: minmax(300px, .92fr) minmax(330px, 1.08fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 68px;
  }

  .topbar {
    inset: 10px 10px auto;
    height: 50px;
  }

  .brand__name,
  .motion-toggle__label {
    display: none;
  }

  .motion-toggle {
    padding-inline: 10px;
  }

  .atlas-trigger {
    min-height: 34px;
  }

  .prologue {
    padding: 100px 18px 42px;
    align-content: end;
  }

  .prologue::after {
    background:
      linear-gradient(0deg, rgb(4 8 12 / .76) 0%, rgb(4 8 12 / .18) 66%, transparent 100%);
  }

  .prologue__copy {
    max-width: 100%;
  }

  .prologue h1 {
    font-size: clamp(52px, 15.8vw, 104px);
    line-height: .82;
  }

  .prologue h1 > span {
    white-space: normal;
  }

  .prologue__stage {
    inset: 8vh -18vw 0 auto;
    width: min(108vw, 720px);
    height: 72%;
  }

  .prologue__portrait--solo {
    height: 100%;
  }

  .prologue__portrait--solo img {
    object-position: 62% 100%;
    transform: scale(1.12) translateY(4%);
  }

  .prologue__coordinates,
  .prologue__signal span:nth-child(n+3) {
    display: none;
  }

  .photo-prelude,
  .pose-reel,
  .artist-profile,
  .chapter-interlude,
  .monsoon-coda {
    margin-inline: 10px;
    border-radius: 0;
  }

  .photo-prelude {
    min-height: 68svh;
  }

  .album {
    min-height: auto;
    padding: 94px 14px 84px;
  }

  .album::after {
    inset: 52px 8px 34px;
    border-radius: 0;
  }

  .album::before {
    top: 82px;
    font-size: 72vw;
  }

  .album__shell {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .album__visual {
    width: min(100%, 590px);
    margin-inline: auto;
  }

  .album__copy {
    padding: 26px 20px;
    border-radius: 0;
  }

  .album__title {
    font-size: clamp(48px, 14vw, 86px);
  }

  .album__palette {
    bottom: 12px;
  }

  .artist-profile summary {
    min-height: 240px;
    padding: 28px 22px;
  }

  .artist-profile__body {
    padding: 0 22px 22px;
  }

  .track-dialog {
    padding: 26px 22px 34px;
  }
}

/* --- Official listening surfaces. The players remain recognisably Spotify,
   while the surrounding controls follow the site's square editorial system. --- */
.streaming-panel {
  width: 100%;
  min-width: 0;
  margin-top: clamp(26px, 3.4vw, 46px);
  padding-top: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid rgb(var(--line) / .38);
}

.streaming-panel--artist {
  max-width: 680px;
  margin-top: clamp(28px, 5vh, 72px);
}

.streaming-panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 14px;
}

.streaming-panel__label,
.streaming-panel__title,
.streaming-panel__status,
.streaming-panel__note {
  margin: 0;
}

.streaming-panel__label {
  color: rgb(var(--muted));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.streaming-panel__title,
.streaming-panel__status {
  margin-top: 5px;
  color: rgb(var(--ink));
  font-family: Figtree, var(--sans);
  font-weight: 600;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1;
  letter-spacing: -.01em;
}

.streaming-panel__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.streaming-link {
  color: rgb(var(--ink));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.streaming-link span {
  display: inline-block;
  margin-left: 3px;
  transition: transform 180ms ease;
}

.streaming-link:hover span,
.streaming-link:focus-visible span {
  transform: translate(2px, -2px);
}

.streaming-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

.spotify-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 352px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.streaming-panel--unreleased {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid rgb(var(--line) / .22);
}

.streaming-panel__note {
  max-width: 52ch;
  color: rgb(var(--muted));
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .streaming-panel__head {
    display: block;
  }

  .streaming-panel__links {
    justify-content: flex-start;
    margin-top: 14px;
  }

  .spotify-embed {
    height: 352px;
  }
}

@media (max-width: 520px) {
  .atlas-trigger span:first-child {
    display: none;
  }

  .atlas-trigger {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .prologue__eyebrow {
    max-width: 75vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prologue__dek {
    max-width: 34ch;
  }

  .prologue__stage {
    opacity: 1;
  }

  .pose-reel__copy h2 {
    font-size: clamp(54px, 17vw, 84px);
  }

  .palette-chip {
    width: 23px;
  }

  .album__caption {
    font-size: 8px;
  }

  .track {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-atmosphere {
    opacity: .42;
  }

  .prologue__halo,
  .motion-toggle__pulse {
    animation: none;
  }

  .album,
  .photo-prelude {
    content-visibility: visible;
  }
}

.no-webgl .three-atmosphere {
  display: none;
}

/* ============================================================
   HOUSE RESKIN — MJ / Edel Investigations, 2026-07-20
   Anti-AI pass over the GPT build: strip wasted air, add
   portrait hover-zoom, and occasional glitch/blur.
   (Radii already zeroed; fonts retokenised to Figtree +
   Belleza in the base rules.)
   ============================================================ */

/* --- Density: no wasted space. Desktop/tablet only; phones keep their own tuning. --- */
@media (min-width: 821px) {
  :root {
    --gutter: clamp(12px, 2vw, 30px);
    --header-height: 60px;
  }

  .prologue {
    min-height: 82svh;
    padding: clamp(72px, 9vh, 100px) var(--gutter) clamp(30px, 4vh, 52px);
  }
  .prologue__eyebrow { margin-bottom: 12px; }
  .prologue__signal { margin-bottom: clamp(14px, 2.2vh, 24px); }
  .prologue__dek { margin-top: clamp(16px, 2.4vh, 26px); }
  .prologue__cue { margin-top: clamp(18px, 2.8vh, 30px); }

  .photo-prelude {
    min-height: min(66svh, 720px);
    margin-top: clamp(12px, 2vw, 28px);
  }
  .pose-reel {
    min-height: 92svh;
    margin-top: clamp(12px, 2vw, 28px);
  }

  .album {
    min-height: auto;
    padding: clamp(52px, 7vh, 84px) var(--gutter);
  }
  .album::after { inset: 3.5vh var(--gutter); }
  .album__shell { gap: clamp(24px, 3.2vw, 60px); }
  .album__copy { padding: clamp(18px, 2.2vw, 34px); }

  .artist-profile summary {
    min-height: clamp(140px, 17vw, 240px);
    padding: clamp(22px, 3vw, 46px);
  }
  .artist-profile__body {
    padding: 0 clamp(22px, 3vw, 46px) clamp(22px, 3vw, 46px);
    gap: clamp(20px, 3vw, 50px);
  }

  .chapter-interlude,
  .monsoon-coda { margin-top: clamp(12px, 2vw, 28px); }

  .track { padding: 10px 8px 10px 0; }
  .track-grid { margin-top: clamp(20px, 2.6vw, 36px); }
}

/* --- Portrait hover-zoom (interstitials + the coda "footer" portrait).
       Uses the `scale` property so it composes with the pose-cycle and
       baseline transforms instead of fighting them. --- */
.pose-reel__stage,
.chapter-interlude__portrait,
.artist-profile__portrait,
.monsoon-coda__portrait {
  cursor: zoom-in;
}
.pose-reel__stage,
.chapter-interlude__portrait img,
.artist-profile__portrait img,
.monsoon-coda__portrait img {
  transition: transform .55s var(--ease-out-expo), filter .55s ease;
  transform: none;
  transform-origin: center;
  will-change: transform;
}
.pose-reel__stage:hover { transform: scale(1.07); }
.chapter-interlude__portrait:hover img,
.artist-profile__portrait:hover img,
.monsoon-coda__portrait:hover img {
  transform: scale(1.12);
  filter: saturate(1.08) contrast(1.03);
}

/* --- Occasional glitch + blur. Off for reduced-motion; pauses with the
       motion toggle via the existing .is-motion-paused rule. --- */
@media (prefers-reduced-motion: no-preference) {
  .prologue h1,
  .album__title,
  .pose-reel__copy h2,
  .track-dialog h2 {
    animation: hbs-glitch 9s linear infinite;
  }
  .album__title { animation-duration: 11s; animation-delay: 1.5s; }
  .pose-reel__copy h2 { animation-duration: 13s; animation-delay: .7s; }
  .track-dialog h2 { animation-duration: 8s; animation-delay: 2.3s; }

  @keyframes hbs-glitch {
    0%, 87%, 100% {
      transform: translate3d(0, 0, 0);
      clip-path: none;
      text-shadow: none;
      filter: none;
    }
    88% {
      transform: translate3d(-2px, 0, 0);
      text-shadow: 2px 0 rgb(255 42 90 / .75), -2px 0 rgb(40 220 255 / .75);
      filter: blur(.4px);
    }
    90% {
      transform: translate3d(3px, 0, 0) skewX(-1.2deg);
      clip-path: inset(10% 0 42% 0);
      text-shadow: -3px 0 rgb(255 42 90 / .8), 3px 0 rgb(40 220 255 / .8);
    }
    92% {
      transform: translate3d(-2px, 0, 0);
      clip-path: inset(56% 0 6% 0);
      text-shadow: 2px 0 rgb(255 42 90 / .7), -2px 0 rgb(40 220 255 / .7);
      filter: blur(.6px);
    }
    93% {
      transform: translate3d(1px, 0, 0) skewX(.8deg);
      clip-path: none;
      text-shadow: none;
    }
  }

  /* page-wide scan + blur flash, every ~14s, for a couple of frames */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    animation: hbs-scanflash 14s ease-in-out infinite;
  }
  @keyframes hbs-scanflash {
    0%, 92%, 100% { opacity: 0; backdrop-filter: blur(0); transform: translateY(0); }
    93% { opacity: .55; backdrop-filter: blur(2px); }
    94% { opacity: .12; backdrop-filter: blur(.5px); transform: translateY(2px); }
    95% { opacity: .6; backdrop-filter: blur(1.4px); }
    96% { opacity: 0; backdrop-filter: blur(0); }
  }
}

/* --- Sticky command bar: pure black, white type, climate-independent --- */
.topbar {
  background: #000;
  border-color: rgb(255 255 255 / .2);
  box-shadow: 0 16px 50px rgb(0 0 0 / .4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar,
.brand,
.brand__name,
.album-nav__status,
.motion-toggle,
.atlas-trigger {
  color: #fff;
}
.topbar::after {
  box-shadow: 0 0 18px rgb(255 255 255 / .22);
}
.brand__mark {
  background: transparent;
  color: #fff;
  border: 1px solid rgb(255 255 255 / .5);
  box-shadow: none;
}
.motion-toggle__pulse {
  background: #fff;
}
.motion-toggle:hover,
.atlas-trigger:hover {
  background: rgb(255 255 255 / .14);
}
.atlas-trigger {
  background: transparent;
  color: #fff;
  border: 1px solid rgb(255 255 255 / .5);
}
.atlas-trigger:hover {
  background: rgb(255 255 255 / .16);
  color: #fff;
}
.album-nav__button::before {
  background: rgb(255 255 255 / .34);
}
.album-nav__button:hover::before,
.album-nav__button[aria-current="true"]::before {
  background: #fff;
}

/* --- Hero subtitle is now a phrase, not a two-word label: let it wrap and
       sit a step below the name so nothing spills past the viewport. --- */
.prologue h1 > span + span {
  white-space: normal;
  font-size: clamp(34px, 4.6vw, 82px);
  line-height: .94;
  letter-spacing: -.03em;
  margin-top: .18em;
}

/* --- Bio: text left; a tall full-figure portrait on the right you scroll
       THROUGH — waist-up on entry, feet by the next section. --- */
.artist-profile {
  overflow: visible;
}
.artist-profile__body {
  display: block;
  position: relative;
  min-height: 126vh;
  padding-right: min(46vw, 820px);
}
.artist-profile__text {
  display: block;
  position: static;
}
.artist-profile__portrait {
  position: absolute;
  top: 0;
  right: -1vw;
  bottom: auto;
  height: 132vh;
  width: auto;
  margin: 0;
  float: none;
  shape-outside: none;
  overflow: visible;
  background: transparent;
}
.artist-profile__portrait img {
  position: static;
  inset: auto;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: top center;
}
/* Unify the bio panel colour: drop the summary's accent glow (the brighter
   band) so summary + body share one flat green. */
.artist-profile summary {
  background: transparent;
  min-height: 0;
  padding-bottom: clamp(6px, 1vw, 14px);
}
.artist-profile summary::before,
.artist-profile summary::after {
  background: none;
}
/* Close the title/body size chasm: headline down from ~108px toward the body. */
.artist-profile summary strong {
  font-size: clamp(28px, 3vw, 50px);
  letter-spacing: -.02em;
  line-height: 1.02;
}
.artist-profile__body {
  padding-top: 0;
}

/* --- No-fill containers: strip every semi-transparent panel / chip / frame.
       Content sits directly on the climate; no frosted glass anywhere. --- */
.artist-profile,
.album__copy,
.album__palette,
.album__artist,
.prologue__eyebrow,
.prologue__signal span,
.photo-prelude__label,
.monsoon-coda__label,
.album__caption {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.album::after,
.album__cover-wrap::before,
.track::before {
  background: transparent !important;
  box-shadow: none !important;
}
/* Modals stay legible: a solid fill, not frosted glass. */
.track-dialog,
.atlas-dialog {
  background: rgb(var(--bg)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- Bio: toggler removed; header restyled, and the whole section lifted above
       its neighbours so the bleeding portrait overlaps them (never cropped),
       and only the transparent cutout — not a green block — enters Vol I. --- */
main {
  position: relative;
}
.artist-profile {
  position: relative;
}
/* Real album heights (no content-visibility placeholder) so the climate anchors
   compute correctly. Otherwise off-screen albums report a 1200px placeholder at
   load, the error accumulates, and the last album (Monsoon) loads its climate
   too late. */
.album {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}
/* The bleeding portrait is a late sibling of the sections (see index.html):
   later DOM order paints it above the albums WITHOUT a stacking context, so
   the climate blend-modes stay intact. JS keeps its top aligned to the bio. */
#artistPortrait {
  position: absolute;
  top: 0;
  right: -1vw;
  bottom: auto;
  height: min(144vh, 1400px);
  width: auto;
  margin: 0;
  overflow: visible;
  background: transparent;
  pointer-events: none;
  /* Hidden until JS aligns it to the bio; revealing only after placement
     avoids the top:0 -> bio.offsetTop jump that otherwise dominates CLS. */
  opacity: 0;
  transition: opacity .5s ease;
}
#artistPortrait.is-placed {
  opacity: 1;
}
.artist-profile__head {
  padding: clamp(24px, 4vw, 60px) var(--gutter) 0 clamp(22px, 3vw, 46px);
}
.artist-profile__kicker {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--muted));
}
.artist-profile__head strong {
  display: block;
  max-width: 14ch;
  font-family: Figtree, var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 50px);
  letter-spacing: -.02em;
  line-height: 1.02;
  color: rgb(var(--ink));
}

/* --- All borders invisible (Boss directive). Widths kept, so nothing reflows. --- */
*, *::before, *::after {
  border-color: transparent !important;
}

/* --- Photobooth strip: fills the empty green pocket in "The Staying" bio.
       Lives inside .artist-profile__text, so it inherits the left column the
       body already reserves (padding-right holds the right for the portrait). --- */
.artist-profile__strip {
  margin: clamp(38px, 7vh, 130px) 0 0;
  width: 100%;
  max-width: min(100%, 680px);
  overflow: clip;
  cursor: zoom-in;
}
.artist-profile__strip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform .55s var(--ease-out-expo), filter .55s ease;
  transform: none;
  transform-origin: center;
  will-change: transform;
}
.artist-profile__strip:hover img {
  transform: scale(1.05);
  filter: saturate(1.06) contrast(1.02);
}

/* --- Footer coda: a full-bleed sunset scene (carrying its own background)
       replaces the transparent cutout. The section's dark gradient stays
       underneath as the fallback if the image ever fails to load. --- */
.monsoon-coda__portrait--scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  filter: none;
  overflow: clip;
}
.monsoon-coda__portrait--scene img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center 42%;
  transform: none;
}
.monsoon-coda__portrait--scene:hover img {
  transform: scale(1.06);
}

/* --- Real image bloom on the footer scene: a heavily blurred, brightened copy
       of the same photo, screen-blended over itself so only the bright regions
       (sun, sky, candles) glow. Its opacity/brightness breathe on a loop, which
       is the automated intensity. --- */
.monsoon-coda__bloom {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: clip;
}
.monsoon-coda__bloom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: blur(24px) brightness(1.5) saturate(1.15);
  opacity: .4;
  will-change: opacity, filter;
}
@media (prefers-reduced-motion: no-preference) {
  .monsoon-coda__bloom img {
    animation: coda-bloom-pulse 7.5s ease-in-out infinite;
  }
}
/* Blur radius stays constant (re-blurring a full-bleed image each frame is
   costly); only opacity and brightness pulse — that is the automated intensity. */
@keyframes coda-bloom-pulse {
  0%, 100% { opacity: .26; filter: blur(24px) brightness(1.38) saturate(1.10); }
  50% { opacity: .62; filter: blur(24px) brightness(1.75) saturate(1.22); }
}
.monsoon-coda__label {
  z-index: 3;
}

/* Mobile containment pass
   Late desktop art-direction rules intentionally let portraits and interludes
   bleed outside their sections. On narrow screens those widths enlarged the
   layout viewport itself, so the entire page was scaled down and clipped. */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  main {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .topbar {
    inset: 10px 10px auto;
    width: auto;
    max-width: calc(100vw - 20px);
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .album-nav,
  .motion-toggle {
    display: none;
  }

  .topbar__actions {
    margin-left: auto;
  }

  .atlas-trigger {
    position: static;
    width: auto;
    min-width: 0;
  }

  .prologue {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .prologue__copy,
  .prologue h1,
  .prologue h1 > span {
    min-width: 0;
    max-width: 100%;
  }

  .prologue h1 > span {
    white-space: normal;
  }

  .photo-prelude,
  .pose-reel,
  .artist-profile,
  .chapter-interlude,
  .monsoon-coda {
    width: auto;
    max-width: calc(100vw - 20px);
    margin-inline: 10px;
  }

  .photo-prelude {
    min-height: 0;
    aspect-ratio: 1;
  }

  .photo-prelude > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
  }

  .pose-reel__stage {
    inset: 30% 0 0;
  }

  .artist-profile {
    overflow: hidden;
  }

  .artist-profile__body {
    min-height: 0;
    padding: 0 22px 28px;
  }

  #artistPortrait {
    display: none;
  }

  .chapter-interlude__portrait {
    inset: var(--header-height) 0 0;
  }

  .album,
  .album__shell,
  .album__visual,
  .album__copy,
  .album__cover-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .album__cover-wrap::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .prologue h1 {
    font-size: clamp(44px, 13vw, 58px);
    line-height: .9;
    letter-spacing: -.06em;
  }

  .prologue h1 > span + span {
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1;
  }

  .pose-reel,
  .chapter-interlude {
    min-height: 720px;
  }

  .pose-reel__stage {
    inset: 32% 0 0;
  }

  .chapter-interlude__portrait {
    inset: 34% 0 0;
  }
}

/* --- Mobile collision fix: the pose-reel and interlude kept their figures
   absolutely positioned (inset from the top), so the oversized title flowed
   straight over the portrait — dark-on-dark and unreadable. Stack them instead:
   copy on top, figure in flow below. Also reframe the beach coda so a tall phone
   crop lands on the subject rather than her arm. --- */
@media (max-width: 820px) {
  .pose-reel,
  .chapter-interlude {
    grid-template-columns: 1fr;
    min-height: 0;
    row-gap: clamp(14px, 4vw, 30px);
    padding-bottom: clamp(22px, 6vw, 46px);
  }
  .pose-reel__stage,
  .chapter-interlude__portrait {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(56svh, 460px);
    margin: 0;
  }
  .pose-reel__stage img,
  .chapter-interlude__portrait img {
    object-fit: contain;
    object-position: center bottom;
  }
  .monsoon-coda__portrait--scene img,
  .monsoon-coda__bloom img {
    object-position: 30% 42%;
  }
}