@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
  --chicago: "Chicago Classic", Chicago, Charcoal, "Geneva", Tahoma, sans-serif;
  --dot: "MS DOT Gothic 16", "DotGothic16", "MS Gothic", "MS PGothic", monospace;
  --ink: #072846;
  --ink-soft: #275776;
  --white: #f8fdff;
  --glass: rgba(244, 253, 255, .70);
  --glass-strong: rgba(248, 254, 255, .88);
  --line: rgba(255, 255, 255, .78);
  --blue: #168cf2;
  --deep-blue: #064ea5;
  --aqua: #5fe4ee;
  --green: #5cc142;
  --lime: #b5ef69;
  --shadow: 0 24px 70px rgba(4, 40, 72, .24);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--dot);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.9), transparent 20%),
    linear-gradient(180deg, #62bfff 0%, #b8edff 42%, #e9fbff 70%, #d8f6c7 100%);
}
body.inner::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 12% 92%, rgba(89,194,65,.94) 0 11%, transparent 12%),
    radial-gradient(ellipse at 34% 96%, rgba(125,211,74,.92) 0 18%, transparent 19%),
    radial-gradient(ellipse at 88% 96%, rgba(67,169,66,.88) 0 23%, transparent 24%),
    linear-gradient(180deg, rgba(76,183,255,.94), rgba(198,240,255,.92) 55%, rgba(222,249,241,.96));
}
body.inner::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 36vh;
  z-index: -1;
  background: linear-gradient(180deg, rgba(37,166,225,.38), rgba(10,107,179,.76));
  clip-path: polygon(0 32%, 18% 19%, 39% 31%, 58% 11%, 80% 25%, 100% 8%, 100% 100%, 0 100%);
  opacity: .72;
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }
img, video { max-width: 100%; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 14px;
  background: white;
  border: 2px solid var(--ink);
}
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(1500px, calc(100vw - 28px));
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 9px 12px 9px 18px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(214,244,255,.66));
  box-shadow: 0 12px 38px rgba(6, 54, 98, .20), inset 0 1px 0 white;
  backdrop-filter: blur(16px) saturate(1.18);
}
.brand {
  font-family: var(--chicago);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -.035em;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--blue); }
.main-nav {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.main-nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 15px;
  font-family: var(--chicago);
  font-weight: 800;
  text-decoration: none;
  color: #0a3b61;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, #52c8ff, #137cd9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 6px 16px rgba(9,94,170,.22);
  outline: none;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(9,67,107,.25);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--ink);
}
.header-mark {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-family: var(--chicago);
  font-weight: 900;
  background: radial-gradient(circle at 35% 25%, #d8ffff, #23a9ee 45%, #0871c8 70%);
  box-shadow: inset 0 1px 4px rgba(255,255,255,.9), 0 5px 12px rgba(0,78,146,.25);
}

.inner-main {
  width: min(1240px, calc(100% - 34px));
  margin: 0 auto;
  padding: 126px 0 100px;
}
.page-heading {
  margin: 0 0 26px;
  padding: clamp(25px, 5vw, 60px);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(206,247,255,.63));
  box-shadow: var(--shadow), inset 0 1px 0 white;
  backdrop-filter: blur(15px) saturate(1.12);
}
.page-heading .kicker,
.section-kicker,
.meta {
  margin: 0 0 8px;
  color: var(--deep-blue);
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.page-heading h1 {
  margin: 0;
  font-family: var(--chicago);
  font-size: clamp(52px, 9vw, 116px);
  line-height: .82;
  letter-spacing: -.075em;
  color: #fff;
  -webkit-text-stroke: 1px rgba(1,62,110,.55);
  text-shadow: 0 4px 0 #2194df, 0 10px 22px rgba(0,82,155,.22);
}
.page-heading p:last-child {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.55;
}

.glass-panel {
  border: 1px solid rgba(255,255,255,.86);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(216,248,255,.67));
  box-shadow: var(--shadow), inset 0 1px 0 white;
  backdrop-filter: blur(16px) saturate(1.12);
}

.chrome-button,
.text-button,
.play-button {
  border: 1px solid rgba(0,71,135,.28);
  color: #063c67;
  background: linear-gradient(180deg, #ffffff 0%, #d9f7ff 46%, #8fdaf8 49%, #effdff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 13px rgba(0,71,135,.17);
  font-family: var(--chicago);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.chrome-button:hover,
.chrome-button:focus-visible,
.text-button:hover,
.text-button:focus-visible,
.play-button:hover,
.play-button:focus-visible {
  transform: translateY(-2px);
  outline: 3px solid rgba(80,206,255,.35);
}

/* Homepage */
body.home {
  min-height: 100vh;
  overflow: hidden;
  color: #f6fbff;
  background: #3f94bd;
}
.home-world {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24,112,166,.03) 0%, rgba(104,178,201,.06) 52%, rgba(32,74,68,.18) 100%),
    url("../images/home/coastal-sky.webp") center top / cover no-repeat,
    linear-gradient(180deg, #278ec8, #b9dde6 68%, #617f6f);
}
.home-world::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: auto 0 0;
  height: 31vh;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3,24,37,.13) 52%, rgba(3,22,34,.44));
}

.fallback-landscape {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .9s ease;
}
.webgl-ready .fallback-landscape { opacity: 0; }
.fallback-hill {
  display: none;
  position: absolute;
  bottom: -9vh;
  clip-path: polygon(0 52%, 9% 39%, 19% 43%, 30% 24%, 41% 36%, 53% 20%, 64% 31%, 76% 17%, 88% 29%, 100% 12%, 100% 100%, 0 100%);
  background:
    linear-gradient(170deg, rgba(219,223,172,.75), transparent 24%),
    linear-gradient(155deg, #667d43, #355b36 47%, #1f4935 100%);
  filter: saturate(.78);
  box-shadow: inset 0 32px 70px rgba(255,244,196,.12);
}
.fallback-hill.hill-a { width: 69vw; height: 55vh; left: -13vw; transform: none; }
.fallback-hill.hill-b { width: 64vw; height: 42vh; left: 8vw; bottom: -16vh; opacity: .9; background: linear-gradient(160deg, #79945b, #45683f 50%, #224a37); }
.fallback-hill.hill-c { width: 42vw; height: 29vh; left: 37vw; bottom: -10vh; opacity: .68; background: linear-gradient(160deg, #829862, #4a6b45 56%, #294c3b); }
.fallback-ocean {
  position: absolute;
  right: -23vw;
  bottom: -34vh;
  width: 96vw;
  height: 86vh;
  border-radius: 64% 0 0 0 / 31% 0 0 0;
  transform: rotate(-2.8deg);
  transform-origin: 70% 65%;
  clip-path: none;
  background:
    linear-gradient(168deg, rgba(255,255,255,.14), transparent 14%),
    repeating-linear-gradient(178deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(80,159,179,.94), rgba(22,83,105,.98) 52%, rgba(5,43,65,.99));
  opacity: .94;
  box-shadow: inset 0 22px 60px rgba(223,246,248,.18);
}

#world-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.haze {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(214,233,232,.13) 61%, rgba(241,246,237,.26) 73%, transparent 91%),
    radial-gradient(ellipse at 49% 69%, rgba(230,239,229,.32), transparent 49%),
    linear-gradient(90deg, rgba(7,33,45,.08), transparent 27%, transparent 75%, rgba(6,31,43,.08));
}
.cloud {
  display: none;
  position: absolute;
  z-index: 2;
  width: 44vw;
  min-width: 430px;
  height: 17vh;
  min-height: 125px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 14% 65%, rgba(255,255,255,.52) 0 13%, transparent 35%),
    radial-gradient(ellipse at 34% 43%, rgba(255,255,255,.48) 0 18%, transparent 43%),
    radial-gradient(ellipse at 57% 58%, rgba(246,251,251,.42) 0 17%, transparent 41%),
    radial-gradient(ellipse at 77% 42%, rgba(255,255,255,.38) 0 14%, transparent 38%),
    radial-gradient(ellipse at 88% 68%, rgba(236,244,245,.32) 0 13%, transparent 36%);
  filter: blur(13px);
  opacity: .46;
  animation: cloudMove 120s linear infinite;
  pointer-events: none;
}
.cloud.c1 { top: 11%; left: -48vw; transform: scale(.92); }
.cloud.c2 { top: 25%; left: -55vw; transform: scale(1.22); animation-duration: 164s; animation-delay: -57s; opacity: .28; }
.cloud.c3 { top: 2%; left: -45vw; transform: scale(.67); animation-duration: 142s; animation-delay: -84s; opacity: .31; }
@keyframes cloudMove { to { left: 112vw; } }

.memory-space {
  position: absolute;
  inset: 0;
  z-index: 3;
  perspective: 1500px;
  perspective-origin: 50% 43%;
  pointer-events: none;
}
.memory {
  --x: 0vw;
  --y: 0vh;
  --z: -100px;
  --r: 0deg;
  --tilt: 0deg;
  --pitch: 0deg;
  --scale: 1;
  --drift-x: 12px;
  --drift-y: 10px;
  --drift-z: 26px;
  --swing-y: 9deg;
  --swing-x: 4deg;
  --swing-z: 2deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(145px, 15vw, 290px);
  margin: 0;
  transform-style: preserve-3d;
  opacity: .86;
  filter: saturate(.96) contrast(1.03) drop-shadow(0 19px 24px rgba(0,20,32,.34));
  animation: memoryOrbit var(--speed, 15s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.memory .drift {
  position: relative;
  padding: 5px;
  border: 1px solid rgba(249,249,239,.82);
  border-radius: 1px;
  background: rgba(246,246,235,.86);
  box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(18,31,35,.13);
  transform-style: preserve-3d;
  animation: memoryTilt var(--speed, 15s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.memory .drift::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 34%, transparent 66%, rgba(255,255,255,.08));
  mix-blend-mode: screen;
}
.memory img {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: cover;
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}
@keyframes memoryOrbit {
  0% {
    transform: translate3d(calc(-50% + var(--x) - var(--drift-x)), calc(-50% + var(--y) - var(--drift-y)), calc(var(--z) - var(--drift-z))) rotateX(calc(var(--pitch) - var(--swing-x))) rotateY(calc(var(--r) - var(--swing-y))) rotateZ(calc(var(--tilt) - var(--swing-z))) scale(var(--scale));
  }
  52% {
    transform: translate3d(calc(-50% + var(--x) + (var(--drift-x) * .38)), calc(-50% + var(--y) + (var(--drift-y) * .18)), calc(var(--z) + (var(--drift-z) * .55))) rotateX(calc(var(--pitch) + (var(--swing-x) * .22))) rotateY(calc(var(--r) + (var(--swing-y) * .42))) rotateZ(calc(var(--tilt) + (var(--swing-z) * .32))) scale(var(--scale));
  }
  100% {
    transform: translate3d(calc(-50% + var(--x) + var(--drift-x)), calc(-50% + var(--y) + var(--drift-y)), calc(var(--z) + var(--drift-z))) rotateX(calc(var(--pitch) + var(--swing-x))) rotateY(calc(var(--r) + var(--swing-y))) rotateZ(calc(var(--tilt) + var(--swing-z))) scale(var(--scale));
  }
}
@keyframes memoryTilt {
  0% { transform: rotateY(-1.4deg) rotateX(.9deg) rotateZ(-.4deg); }
  100% { transform: rotateY(1.8deg) rotateX(-1.1deg) rotateZ(.5deg); }
}
.memory.m1 { --x: -40vw; --y: -17vh; --z: -160px; --r: 11deg; --tilt: -3deg; --pitch: -2deg; --scale: .84; --speed: 21s; --drift-x: 13px; --drift-y: 12px; --drift-z: 34px; --swing-y: 12deg; --swing-x: 5deg; }
.memory.m2 { --x: 38vw; --y: -24vh; --z: -220px; --r: -13deg; --tilt: 3deg; --pitch: 2deg; --scale: .76; --speed: 25s; --delay: -8s; --drift-x: 12px; --drift-y: 10px; --drift-z: 28px; --swing-y: 11deg; --swing-x: 4deg; }
.memory.m3 { --x: -35vw; --y: 25vh; --z: -35px; --r: 10deg; --tilt: 2deg; --pitch: 1deg; --scale: .9; --speed: 23s; --delay: -12s; --drift-x: 10px; --drift-y: 14px; --drift-z: 18px; --swing-y: 9deg; --swing-x: 3deg; }
.memory.m4 { --x: 37vw; --y: 22vh; --z: -60px; --r: -10deg; --tilt: -2deg; --pitch: -1deg; --scale: .88; --speed: 20s; --delay: -4s; --drift-x: 11px; --drift-y: 12px; --drift-z: 20px; --swing-y: 10deg; --swing-x: 3deg; }
.memory.m5 { --x: -21vw; --y: -32vh; --z: -390px; --r: 4deg; --tilt: 1deg; --pitch: -2deg; --scale: .6; --speed: 29s; --delay: -13s; --drift-x: 15px; --drift-y: 9px; --drift-z: 38px; --swing-y: 14deg; --swing-x: 6deg; }
.memory.m6 { --x: 21vw; --y: -36vh; --z: -360px; --r: -4deg; --tilt: -2deg; --pitch: 2deg; --scale: .62; --speed: 28s; --delay: -6s; --drift-x: 16px; --drift-y: 8px; --drift-z: 36px; --swing-y: 13deg; --swing-x: 6deg; }
.memory.m7 { --x: -47vw; --y: 3vh; --z: -310px; --r: 17deg; --tilt: -5deg; --pitch: -3deg; --scale: .64; --speed: 31s; --delay: -14s; --drift-x: 18px; --drift-y: 13px; --drift-z: 42px; --swing-y: 16deg; --swing-x: 6deg; }
.memory.m8 { --x: 48vw; --y: 2vh; --z: -300px; --r: -16deg; --tilt: 4deg; --pitch: 3deg; --scale: .63; --speed: 27s; --delay: -10s; --drift-x: 17px; --drift-y: 12px; --drift-z: 40px; --swing-y: 15deg; --swing-x: 6deg; }
.memory.m9 { --x: 4vw; --y: 34vh; --z: -440px; --r: -2deg; --tilt: 2deg; --pitch: -1deg; --scale: .56; --speed: 34s; --delay: -7s; --drift-x: 14px; --drift-y: 16px; --drift-z: 48px; --swing-y: 12deg; --swing-x: 5deg; }

.home .site-header {
  top: 18px;
  width: min(1540px, calc(100vw - 44px));
  min-height: 50px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #f7fbfc;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.home .brand {
  color: #fff;
  font-size: 18px;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,24,38,.52);
}
.home .brand span { color: #fff; }
.home .main-nav { gap: 29px; }
.home .main-nav a {
  min-height: 38px;
  padding: 0 0 3px;
  border-radius: 0;
  color: rgba(249,253,254,.88);
  background: transparent;
  box-shadow: none;
  text-shadow: 0 2px 11px rgba(0,25,39,.58);
  border-bottom: 1px solid transparent;
}
.home .main-nav a:hover,
.home .main-nav a:focus-visible,
.home .main-nav a[aria-current="page"] {
  color: #fff;
  background: transparent;
  box-shadow: none;
  outline: none;
  border-bottom-color: rgba(255,255,255,.92);
}
.home .header-mark { display: none; }
.home .nav-toggle {
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 2px;
  color: #fff;
  background: rgba(2,30,43,.18);
  box-shadow: 0 8px 22px rgba(0,19,29,.16);
}

.hero-center {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 106px 20px 138px;
  text-align: center;
  pointer-events: none;
}
.hero-title {
  margin: 0;
  font-family: var(--chicago);
  font-size: clamp(78px, 14.5vw, 210px);
  line-height: .73;
  letter-spacing: -.095em;
  color: rgba(251,253,250,.96);
  -webkit-text-stroke: clamp(.5px, .055vw, 1.4px) rgba(8,35,45,.46);
  text-shadow:
    0 2px 0 rgba(255,255,255,.25),
    0 8px 28px rgba(1,27,42,.44),
    0 22px 70px rgba(1,24,37,.23);
  filter: none;
}
.hero-subtitle {
  margin: 27px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(251,253,250,.9);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font-size: clamp(11px, 1.35vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,25,39,.62);
}
.hero-actions {
  position: absolute;
  left: 50%;
  bottom: 31px;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 5vw, 78px);
  width: min(920px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.hero-actions a {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px 5px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.58);
  border-radius: 0;
  color: rgba(250,253,252,.94);
  background: transparent;
  box-shadow: none;
  font-size: clamp(15px, 1.45vw, 20px);
  letter-spacing: .015em;
  text-shadow: 0 2px 12px rgba(0,22,34,.64);
  pointer-events: auto;
  transition: color .2s ease, border-color .2s ease, transform .2s ease, letter-spacing .2s ease;
}
.hero-actions a:hover,
.hero-actions a:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
  transform: translateY(-2px);
  letter-spacing: .055em;
  outline: none;
}


/* Music */
.music-grid,
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.track-card {
  position: relative;
  min-height: 205px;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px;
  overflow: hidden;
}
.track-art {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 23px;
  background:
    radial-gradient(circle at 37% 30%, rgba(255,255,255,.92), transparent 10%),
    radial-gradient(circle at 48% 46%, #e7fbff 0 9%, #37c7ee 10% 31%, #1373cd 32% 49%, #6be16b 50% 72%, #e4ff9e 73%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.8), 0 13px 25px rgba(4,68,117,.18);
}
.track-art::after {
  content: "RH";
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0a70bd;
  font-family: var(--chicago);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.track-copy h2,
.video-card h2 {
  margin: 0;
  font-family: var(--chicago);
  font-size: clamp(24px, 3vw, 38px);
  line-height: .98;
  letter-spacing: -.05em;
}
.track-copy .subtitle,
.video-card .subtitle {
  min-height: 1.3em;
  margin: 8px 0 14px;
  color: var(--ink-soft);
}
.track-controls { display: flex; gap: 9px; flex-wrap: wrap; }
.play-button,
.text-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 13px;
}
.text-button { background: rgba(255,255,255,.72); }

.audio-dock {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 300;
  transform: translateX(-50%);
  width: min(1050px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 23px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(191,238,255,.87));
  box-shadow: 0 18px 45px rgba(2,53,95,.28), inset 0 1px 0 white;
  backdrop-filter: blur(18px);
}
.audio-dock button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.audio-info { min-width: 0; }
.audio-info strong,
.audio-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-info small { color: var(--ink-soft); }
.audio-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 6px;
}
.audio-progress span { font-size: 11px; }
.audio-progress input { width: 100%; accent-color: var(--blue); }
.visualizer {
  width: 140px;
  height: 42px;
  border-radius: 12px;
  background: rgba(3,68,115,.1);
}

/* Song pages */
.song-shell { display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: 24px; }
.song-art-large { aspect-ratio: 1; border-radius: 34px; }
.song-copy { padding: clamp(24px, 4vw, 48px); }
.song-copy h1 { margin: 0; font-family: var(--chicago); font-size: clamp(45px, 8vw, 90px); letter-spacing: -.075em; line-height: .86; }
.song-copy .song-subtitle { margin: 14px 0; font-size: 18px; color: var(--ink-soft); }
.song-copy audio { width: 100%; margin: 20px 0; }
.notes-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 20px; margin-top: 22px; }
.notes-grid article { padding: 25px; }
.notes-grid h2 { font-family: var(--chicago); font-size: 28px; letter-spacing: -.04em; }
.placeholder-note { color: var(--ink-soft); font-style: italic; }

/* Videos */
.video-card { overflow: hidden; }
.video-card button {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.video-poster { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #08253b; }
.video-poster img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s ease; }
.video-card button:hover img { transform: scale(1.035); }
.video-poster::after {
  content: "▶";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,95,171,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
}
.video-copy { padding: 20px; }
.video-copy .meta { margin-top: 12px; }
.media-dialog {
  width: min(1100px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background: rgba(228,249,255,.95);
  box-shadow: 0 30px 90px rgba(0,30,60,.4);
  overflow: hidden;
}
.media-dialog::backdrop { background: rgba(2,24,42,.66); backdrop-filter: blur(9px); }
.dialog-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 20px; }
.dialog-bar h2 { margin: 0; font-family: var(--chicago); letter-spacing: -.04em; }
.dialog-bar button { width: 42px; height: 42px; border-radius: 13px; }
.media-dialog video { display: block; width: 100%; max-height: 76vh; background: #000; }

/* Pictures */
.picture-section { margin-top: 26px; }
.picture-section > h2 { font-family: var(--chicago); font-size: clamp(34px, 5vw, 62px); letter-spacing: -.065em; color: #fff; text-shadow: 0 3px 0 #238dce, 0 7px 16px rgba(0,69,122,.24); }
.photo-grid { columns: 3 290px; column-gap: 16px; }
.photo-card {
  width: 100%;
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 15px 36px rgba(5,59,101,.17), inset 0 1px 0 white;
  break-inside: avoid;
}
.photo-card button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.photo-card img { display: block; width: 100%; border-radius: 12px; }
.photo-card figcaption { padding: 9px 7px 4px; color: var(--ink-soft); font-size: 12px; }
.motion-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.motion-grid .photo-card { margin: 0; }
.lightbox img { width: auto; max-width: 100%; max-height: 80vh; margin: auto; object-fit: contain; background: #06182a; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
.contact-grid article { padding: clamp(24px, 4vw, 46px); }
.contact-grid h2 { margin-top: 0; font-family: var(--chicago); font-size: clamp(34px, 5vw, 62px); letter-spacing: -.06em; }
.contact-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.contact-list li { padding: 15px 16px; border-radius: 15px; background: rgba(255,255,255,.62); }
.preview-flag { color: #7b4b00; background: rgba(255,244,180,.8) !important; border: 1px solid rgba(184,129,0,.25); }

.site-footer {
  width: min(1240px, calc(100% - 34px));
  margin: 0 auto;
  padding: 20px 0 35px;
  color: rgba(5,48,80,.72);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-mark { display: none; }
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 19px;
    background: rgba(236,250,255,.96);
    box-shadow: 0 16px 35px rgba(3,53,92,.22);
  }
  .home .main-nav {
    left: auto;
    right: 0;
    width: min(280px, calc(100vw - 42px));
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 2px;
    background: rgba(5,29,40,.88);
    box-shadow: 0 18px 42px rgba(0,15,24,.32);
    backdrop-filter: blur(12px);
  }
  .main-nav.open { display: grid; }
  .main-nav a { justify-content: flex-start; }
  .home .main-nav a { min-height: 42px; border-bottom: 1px solid rgba(255,255,255,.13); }
  .music-grid, .video-grid { grid-template-columns: 1fr; }
  .song-shell, .notes-grid, .contact-grid { grid-template-columns: 1fr; }
  .song-art-large { max-width: 420px; margin: auto; }
}

@media (max-width: 650px) {
  .hero-center { padding: 88px 14px 144px; }
  .hero-title { font-size: clamp(72px, 24vw, 128px); line-height: .78; }
  .hero-subtitle { margin-top: 20px; font-size: 10px; letter-spacing: .15em; }
  .hero-actions {
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: calc(100vw - 30px);
  }
  .hero-actions a { min-height: 42px; font-size: 13px; }
  .memory { width: 165px; opacity: .72; --drift-x: 8px; --drift-y: 9px; --drift-z: 14px; --swing-y: 7deg; --swing-x: 3deg; }
  .memory.m5, .memory.m6, .memory.m7, .memory.m8, .memory.m9 { display: none; }
  .memory.m1 { --x: -37vw; --y: -18vh; --scale: .66; }
  .memory.m2 { --x: 37vw; --y: -20vh; --scale: .62; }
  .memory.m3 { --x: -36vw; --y: 18vh; --scale: .65; }
  .memory.m4 { --x: 38vw; --y: 16vh; --scale: .64; }
  .track-card { grid-template-columns: 92px 1fr; min-height: 160px; padding: 14px; gap: 14px; }
  .audio-dock { grid-template-columns: auto 1fr; }
  .visualizer { display: none; }
  .motion-grid { grid-template-columns: 1fr; }
  .page-heading h1 { font-size: clamp(50px, 18vw, 90px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Homepage film background */
.home-world {
  background: #02030a url("../images/home/deep-end-poster.jpg") center center / cover no-repeat;
}
.home-world::after { display: none; }
.home-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  background: #02030a;
}
.home-film-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 2, 12, .46) 0%, rgba(0, 2, 12, .08) 25%, rgba(0, 2, 12, .03) 58%, rgba(0, 2, 12, .68) 100%),
    radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(0, 1, 9, .22) 100%);
}
.film-error .home-film { display: none; }
.film-paused .home-film { filter: saturate(.94); }

.memory-space { z-index: 3; }
.memory { opacity: .78; filter: saturate(.93) contrast(1.04) drop-shadow(0 19px 25px rgba(0,0,10,.5)); }
.memory .drift {
  background: rgba(246,246,239,.92);
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 0 0 1px rgba(8,9,19,.28), 0 16px 34px rgba(0,0,12,.34);
}

.home .site-header { z-index: 50; }
.home .brand,
.home .main-nav a,
.hero-subtitle,
.hero-actions a {
  text-shadow: 0 2px 4px rgba(0,0,8,.94), 0 0 18px rgba(0,0,12,.72);
}
.hero-center {
  z-index: 8;
  padding-top: 92px;
}
.hero-title {
  color: rgba(252,252,255,.93);
  -webkit-text-stroke: 1px rgba(6,7,20,.62);
  text-shadow: 0 2px 3px rgba(0,0,8,.9), 0 12px 40px rgba(0,0,12,.68);
}
.hero-actions { z-index: 22; }
.film-toggle {
  position: absolute;
  right: 24px;
  bottom: 27px;
  z-index: 24;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.42);
  border-radius: 0;
  color: rgba(255,255,255,.74);
  background: transparent;
  font-family: var(--dot);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0,0,8,.95);
  cursor: pointer;
}
.film-toggle:hover,
.film-toggle:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
  outline: none;
}

@media (max-width: 650px) {
  .home-film {
    object-fit: cover;
    object-position: center center;
  }
  .home-film-overlay {
    background:
      linear-gradient(180deg, rgba(0,2,12,.58) 0%, rgba(0,2,12,.08) 25%, rgba(0,2,12,.04) 58%, rgba(0,2,12,.76) 100%),
      radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(0,1,9,.2) 100%);
  }
  .film-toggle {
    top: 78px;
    right: 18px;
    bottom: auto;
  }
  .hero-title {
    font-size: clamp(70px, 23vw, 122px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-film { visibility: hidden; }
  .film-paused .home-film { visibility: visible; }
}