:root {
  --night: #07101c;
  --ink: #090d14;
  --paper: #e8e4dc;
  --muted: rgba(232, 228, 220, 0.62);
  --line: rgba(232, 228, 220, 0.22);
  --blue: #78a8c8;
  --dusk: #d4aa7d;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --display: "Cormorant Garamond", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}
body::selection { background: rgba(120, 168, 200, 0.45); color: white; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  top: -80px;
  left: 1rem;
  z-index: 1000;
  padding: 0.8rem 1rem;
  color: var(--ink);
  background: var(--paper);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.film-grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: grain 0.22s steps(2) infinite;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(3%, -2%, 0); }
  50% { transform: translate3d(-2%, 3%, 0); }
  75% { transform: translate3d(2%, 2%, 0); }
  100% { transform: translate3d(-3%, -1%, 0); }
}

.cursor-light {
  position: fixed;
  z-index: 80;
  width: 32rem;
  height: 32rem;
  margin: -16rem 0 0 -16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 156, 189, 0.08), transparent 64%);
  pointer-events: none;
  transform: translate3d(-100vw, -100vh, 0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.5rem;
  padding: 0 3.5rem;
  mix-blend-mode: difference;
}
.wordmark { text-decoration: none; font-family: var(--display); font-size: 1.45rem; letter-spacing: 0.08em; }
.wordmark span { font-style: italic; color: var(--blue); }
.header-actions { display: flex; gap: 2rem; align-items: center; }
.text-button, .text-link {
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.text-button:hover, .text-link:hover { color: var(--blue); }
.play-mark { margin-right: 0.35rem; font-size: 0.65rem; }

.night-clock {
  position: fixed;
  z-index: 95;
  left: 3.5rem;
  bottom: 3.5rem;
  display: grid;
  grid-template-columns: auto 1px auto;
  gap: 1rem;
  align-items: end;
  mix-blend-mode: difference;
  pointer-events: none;
}
.night-clock__time { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.12em; }
.night-clock__line { position: relative; width: 1px; height: 5rem; background: rgba(255,255,255,0.24); overflow: hidden; }
.night-clock__line i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: white; transition: height 0.35s ease; }
.night-clock__label { color: rgba(255,255,255,0.58); font-family: var(--display); font-size: 0.58rem; line-height: 1.45; letter-spacing: 0.15em; }

.eyebrow { margin: 0 0 1.5rem; font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.24em; color: var(--muted); }
.hero, .film-scene, .album-feature, .interlude, .about, .finale { position: relative; min-height: 100svh; overflow: hidden; }

.hero { display: grid; place-items: center; background: #102744; }
.hero__image, .hero__wash, .about__image, .about__veil, .finale__image, .finale__veil {
  position: absolute;
  inset: 0;
}
.hero__image {
  background: url('/assets/backgrounds/hometown-sky-textless.webp') 48% 50% / cover no-repeat;
  transform: scale(1.045);
  animation: hero-breathe 18s ease-in-out infinite alternate;
}
@keyframes hero-breathe { to { transform: scale(1.105) translate3d(-0.7%, -0.6%, 0); } }
.hero__wash { background: linear-gradient(180deg, rgba(6,12,22,0.18), rgba(6,12,22,0.18) 42%, rgba(6,12,22,0.72)); }
.hero__content { position: relative; z-index: 2; width: min(84vw, 1040px); padding-top: 6vh; text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(4.2rem, 10vw, 10rem); letter-spacing: 0.025em; line-height: 0.85; }
.hero__tagline { margin: 3.4rem 0 0 43%; font-size: clamp(1.15rem, 2.2vw, 2rem); line-height: 2; letter-spacing: 0.13em; }
.scroll-cue {
  position: absolute;
  z-index: 3;
  right: 3.5rem;
  bottom: 3.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
}
.scroll-cue i { position: relative; display: block; width: 4.5rem; height: 1px; background: rgba(255,255,255,0.4); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: white; transform: translateX(-100%); animation: scroll-line 2.3s ease-in-out infinite; }
@keyframes scroll-line { 55%, 100% { transform: translateX(100%); } }

.prologue {
  position: relative;
  min-height: 110svh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 22% 80%, #172535 0, #090d14 38%, #06080d 74%);
}
.prologue__glow { position: absolute; width: 35vw; height: 35vw; border-radius: 50%; background: rgba(69, 99, 127, 0.12); filter: blur(80px); animation: float 10s ease-in-out infinite alternate; }
@keyframes float { to { transform: translate3d(7vw, -4vh, 0) scale(1.15); } }
.prologue__copy { position: relative; width: min(76vw, 760px); text-align: center; }
.prologue h2 { margin: 0 0 2.5rem; font-size: clamp(2rem, 4.2vw, 4.2rem); font-weight: 300; letter-spacing: 0.12em; }
.prologue__copy > p:not(.eyebrow):not(.prologue__note) { font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 2.2; }
.prologue__note { margin: 9rem 0 0; color: rgba(232,228,220,0.37); font-family: var(--display); font-size: 0.72rem; line-height: 2; letter-spacing: 0.2em; }

.film-scene { min-height: 118svh; display: grid; background: #0b1017; isolation: isolate; }
.film-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 5rem 7rem rgba(0,0,0,.34), inset 0 -6rem 8rem rgba(0,0,0,.44);
  pointer-events: none;
}
.scene-memory, .scene-shade { position: absolute; inset: 0; }
.scene-memory { z-index: -3; background-size: cover; background-position: center; transform: scale(1.04); filter: saturate(0.78) contrast(1.07); animation: scene-drift 22s ease-in-out infinite alternate; }
@keyframes scene-drift { to { transform: scale(1.095) translate3d(-.7%, -.35%, 0); } }
.scene-shade { z-index: -2; background: linear-gradient(90deg, rgba(5,8,13,0.84) 0%, rgba(5,8,13,0.4) 50%, rgba(5,8,13,0.76) 100%); }
.scene-memory--yui { background-image: url('/assets/scenes-v2/yui-environment.webp'); background-position: center; }
.scene-memory--rei { background-image: url('/assets/scenes-v2/rei-environment.webp'); background-position: center; }
.scene-memory--window { background-image: url('/assets/scenes-v2/night-window-0132.webp'); background-position: right center; }
.scene-memory--nami { background-image: url('/assets/scenes-v2/nami-environment.webp'); background-position: center; }
.scene-memory--kanata { background-image: url('/assets/scenes-v2/kanata-environment.webp'); background-position: center; }
.film-scene--one .scene-shade, .film-scene--three .scene-shade, .film-scene--five .scene-shade { background: linear-gradient(90deg, rgba(5,8,13,.88) 0%, rgba(5,8,13,.34) 58%, rgba(5,8,13,.2)); }
.film-scene--two .scene-shade, .film-scene--four .scene-shade { background: linear-gradient(90deg, rgba(5,8,13,.2), rgba(5,8,13,.34) 42%, rgba(5,8,13,.9) 100%); }
.film-scene__copy { position: relative; z-index: 1; align-self: end; width: min(49vw, 730px); margin: 0 0 14svh 8vw; text-shadow: 0 3px 32px rgba(0,0,0,.72); }
.film-scene__copy--right { justify-self: end; margin-right: 8vw; margin-left: 0; }
.film-scene__copy h2 { margin: 0; font-size: clamp(2.6rem, 5.1vw, 5.7rem); font-weight: 300; line-height: 1.48; letter-spacing: .09em; text-wrap: balance; }
.film-scene--three .film-scene__copy, .film-scene--four .film-scene__copy { width: min(55vw, 850px); }
.film-scene--three .film-scene__copy h2, .film-scene--four .film-scene__copy h2 { font-size: clamp(2.6rem, 4.4vw, 4.7rem); letter-spacing: .07em; }
.film-scene--five .film-scene__copy h2 { font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: .03em; }
.line-lock { white-space: nowrap; }
.film-scene__line { margin: 2.6rem 0 0; color: rgba(232,228,220,.76); font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 2.1; letter-spacing: .1em; }
.film-scene__caption { display: inline-block; margin-top: 3.5rem; padding-top: .85rem; border-top: 1px solid var(--line); color: rgba(232,228,220,.5); font-family: var(--display); font-size: .68rem; letter-spacing: .19em; }
.film-scene__number { position: absolute; right: 4vw; bottom: 1vh; z-index: 1; color: rgba(255,255,255,.085); font-family: var(--display); font-size: clamp(8rem, 16vw, 17rem); font-weight: 300; line-height: 1; pointer-events: none; }
.film-scene__number--left { right: auto; left: 4vw; }

.album-feature { display: grid; align-items: center; min-height: 120svh; background: #08121f; }
.album-feature__backdrop { position: absolute; inset: -8%; background: linear-gradient(rgba(5,10,17,0.74), rgba(5,10,17,0.93)), url('/assets/backgrounds/blue-nocturne-textless.webp') center / cover; filter: blur(24px); transform: scale(1.1); }
.album-feature__inner { position: relative; display: grid; grid-template-columns: minmax(300px, 0.88fr) 1.12fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; width: min(78vw, 1180px); margin: 0 auto; padding: 8rem 0; }
.album-cover { margin: 0; }
.album-cover img { width: 100%; box-shadow: 0 3rem 7rem rgba(0,0,0,0.45); }
.album-cover figcaption { margin-top: 1rem; color: var(--muted); font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.2em; }
.album-copy h2 { margin: 0 0 2rem; font-family: var(--display); font-size: clamp(3.7rem, 7vw, 7rem); font-weight: 400; font-style: italic; line-height: 0.9; }
.album-copy h2.album-copy__title--jp { font-family: var(--serif); font-size: clamp(2.7rem, 5.4vw, 5.5rem); font-style: normal; line-height: 1.22; letter-spacing: .12em; white-space: nowrap; }
.album-copy__jp { font-size: 1rem; line-height: 2; color: rgba(232,228,220,0.72); }
.album-lyric { margin: 4.5rem 0; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 2; letter-spacing: 0.11em; }
.listen-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.listen-link { display: inline-flex; align-items: center; min-height: 2.8rem; padding: 0.7rem 1rem; border: 1px solid var(--line); color: var(--paper); background: transparent; text-decoration: none; font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.15em; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.listen-link:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.listen-link--primary { color: var(--ink); background: var(--paper); }
.listen-link--primary:hover { color: white; background: #31587a; border-color: #31587a; }
.single-feature { min-height: 112svh; background: #17141a; }
.single-feature__backdrop { background: radial-gradient(circle at 76% 30%, rgba(100,137,174,.28), transparent 34%), radial-gradient(circle at 18% 72%, rgba(190,128,83,.18), transparent 38%), linear-gradient(145deg, #111927, #0b0d14 64%, #171017); filter: none; }
.album-feature__inner--reverse { grid-template-columns: 1.12fr minmax(300px, .88fr); }
.single-feature .album-copy h2 { font-size: clamp(2.7rem, 5.1vw, 5.2rem); line-height: 1.05; }

.interlude { min-height: 105svh; display: grid; place-items: center; background: #05070b; }
.interlude__lights { position: absolute; inset: 0; opacity: 0.15; background: radial-gradient(circle at 24% 60%, #d4aa7d 0 2px, transparent 3px), radial-gradient(circle at 75% 48%, #79a9c9 0 1px, transparent 3px), radial-gradient(circle at 54% 71%, #fff 0 1px, transparent 2px); filter: blur(1px); }
.interlude p { position: relative; text-align: center; font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 2.25; letter-spacing: 0.16em; }
.interlude__time { position: absolute; right: 3.5rem; bottom: 3.5rem; color: rgba(255,255,255,0.2); font-family: var(--display); font-size: clamp(5rem, 13vw, 11rem); }

.works { position: relative; min-height: 100svh; padding: 11rem 0 12rem; background: linear-gradient(155deg, #151018, #090b10 62%); overflow: hidden; }
.works__heading { width: min(650px, 88vw); margin: 0 0 8rem 10vw; }
.works__heading h2 { margin: 0 0 2rem; font-size: clamp(2.6rem, 5vw, 5rem); font-weight: 300; letter-spacing: 0.12em; }
.works__heading > p:last-child { color: var(--muted); line-height: 2; }
.works__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 23vw);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding: 0 8vw 2.5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-color: rgba(232,228,220,.34) transparent;
}
.work-card { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; color: inherit; scroll-snap-align: center; }
.work-card:nth-child(even) { margin-top: 6rem; }
.work-card__art { grid-column: 1 / -1; display: block; margin: 0 0 1.5rem; overflow: hidden; }
.work-card img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .4s; }
.work-card:hover img { transform: scale(1.035); filter: brightness(1.08); }
.work-card > span { color: var(--muted); font-family: var(--display); font-size: 0.7rem; }
.work-card h3 { margin: 0; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 300; letter-spacing: 0.08em; }
.work-card__links { grid-column: 2; display: flex; gap: 1rem; margin-top: .85rem; }
.work-card__links a { color: var(--muted); text-decoration: none; font-family: var(--display); font-size: .66rem; letter-spacing: .1em; }
.work-card__links a:hover { color: white; }

.playlists { position: relative; min-height: 100svh; padding: 10rem 8vw 12rem; background: radial-gradient(circle at 75% 18%, #1a3249 0, #0a111c 38%, #070a10 72%); }
.playlists__heading { width: min(760px, 86vw); margin: 0 auto 6rem; text-align: center; }
.playlists__heading h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 300; letter-spacing: .12em; }
.playlists__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: min(1180px, 100%); margin: 0 auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.playlist-card { position: relative; display: block; min-height: 260px; overflow: hidden; color: white; background: #0a0e14; text-decoration: none; }
.playlist-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 22%, rgba(4,7,12,.88)); transition: background .35s; }
.playlist-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(.7); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.playlist-card:hover img { transform: scale(1.045); filter: saturate(.92) brightness(.9); }
.playlist-card span { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.15rem; font-family: var(--display); font-size: .8rem; letter-spacing: .15em; }
.playlist-card small { display: block; margin-top: .45rem; color: rgba(255,255,255,.66); font-family: var(--serif); font-size: .7rem; letter-spacing: .09em; }

.about { display: grid; align-items: center; min-height: 125svh; background: #111016; }
.about__image { background: url('/assets/backgrounds/rainy-city-epilogue-v2.webp') 50% 52% / cover no-repeat; filter: saturate(0.68) brightness(0.72); animation: scene-drift 24s ease-in-out infinite alternate; }
.about__veil { background: linear-gradient(90deg, rgba(7,9,14,0.96) 0%, rgba(7,9,14,0.83) 42%, rgba(7,9,14,0.3) 76%, rgba(7,9,14,0.46)); }
.about__copy { position: relative; width: min(50vw, 850px); margin-left: 8vw; padding: 11rem 0; text-shadow: 0 3px 28px rgba(0,0,0,.66); }
.about h2 { margin: 0 0 3.5rem; font-size: clamp(2.5rem, 4.7vw, 5.1rem); font-weight: 300; line-height: 1.48; letter-spacing: 0.075em; }
.about__copy > p:not(.eyebrow) { margin: 0 0 1.55rem; color: rgba(232,228,220,0.78); font-size: clamp(.9rem, 1.1vw, 1.05rem); line-height: 2.2; letter-spacing: .055em; }
.about__copy > .about__closing { margin-top: 2.6rem; color: rgba(232,228,220,0.9); }
.about__credit { display: block; margin-top: 4.5rem; color: var(--muted); font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.2em; }

.finale { display: grid; place-items: center; min-height: 110svh; background: #8d684c; }
.finale__image { background: url('/assets/backgrounds/embarrassing-past-textless.webp') center 43% / cover no-repeat; animation: hero-breathe 22s ease-in-out infinite alternate; }
.finale__veil { background: linear-gradient(180deg, rgba(8,11,17,0.24), rgba(8,11,17,0.28) 46%, rgba(8,11,17,0.75)); }
.finale__copy { position: relative; width: min(78vw, 900px); text-align: center; text-shadow: 0 2px 25px rgba(0,0,0,0.4); }
.finale h2 { margin: 0; font-size: clamp(3rem, 7vw, 7rem); font-weight: 300; line-height: 1.55; letter-spacing: 0.15em; }
.finale__wordmark { margin: 5rem 0 2.5rem; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: 0.08em; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem 2rem; }
.social-links a { text-decoration: none; font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.17em; }
.social-links a:hover { color: #b8dcf3; }

footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2.5rem 3.5rem; color: rgba(232,228,220,0.45); background: #05070a; font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.18em; }
footer a { text-decoration: none; }

.reveal { opacity: 0; transform: translate3d(0, 2.5rem, 0); transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.2,.75,.25,1); }
.reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }

.preview-dialog { width: min(92vw, 920px); padding: 0; border: 1px solid rgba(255,255,255,.17); color: var(--paper); background: #090d14; box-shadow: 0 2rem 8rem rgba(0,0,0,.65); }
.preview-dialog::backdrop { background: rgba(3,5,8,.82); backdrop-filter: blur(12px); }
.preview-dialog__head { display: flex; justify-content: space-between; align-items: start; padding: 1.6rem 1.8rem 1.25rem; }
.preview-dialog__head h2 { margin: 0; font-size: 1.2rem; font-weight: 300; letter-spacing: .1em; }
.preview-dialog__head .eyebrow { margin-bottom: .45rem; }
.preview-dialog__head button { border: 0; color: white; background: transparent; font-family: var(--display); font-size: 2rem; cursor: pointer; }
.preview-dialog__video { aspect-ratio: 16 / 9; background: #000; }
.preview-dialog iframe { width: 100%; height: 100%; border: 0; }
.preview-dialog > p { margin: 0; padding: 1rem 1.8rem 1.4rem; color: var(--muted); font-size: .72rem; }

@media (max-width: 900px) {
  .site-header { height: 4.5rem; padding: 0 1.25rem; }
  .wordmark { font-size: 1.15rem; }
  .header-actions { gap: 1rem; }
  .text-button { display: none; }
  .night-clock { left: 1.25rem; bottom: 1.5rem; transform: scale(.88); transform-origin: bottom left; }
  .scroll-cue { right: 1.25rem; bottom: 1.7rem; }
  .hero__content { width: 87vw; }
  .hero h1 { font-size: clamp(3.8rem, 18vw, 7rem); line-height: .92; }
  .hero__tagline { margin: 3rem 0 0 18%; }
  .film-scene { min-height: 112svh; }
  .film-scene__copy, .film-scene__copy--right { align-self: end; justify-self: start; width: 82vw; margin: 0 0 17svh 9vw; }
  .film-scene__copy h2 { font-size: clamp(2.35rem, 9vw, 4.8rem); line-height: 1.55; }
  .film-scene--three .film-scene__copy, .film-scene--four .film-scene__copy { width: 82vw; }
  .film-scene--three .film-scene__copy h2, .film-scene--four .film-scene__copy h2 { font-size: clamp(2.05rem, 7.2vw, 4.1rem); letter-spacing: .055em; }
  .film-scene--five .film-scene__copy h2 { font-size: clamp(1.9rem, 7.1vw, 3.2rem); letter-spacing: .02em; }
  .film-scene__line { max-width: 78vw; }
  .film-scene--one .scene-shade, .film-scene--two .scene-shade, .film-scene--three .scene-shade, .film-scene--four .scene-shade, .film-scene--five .scene-shade { background: linear-gradient(180deg, rgba(5,8,13,.18) 0, rgba(5,8,13,.25) 38%, rgba(5,8,13,.9) 100%); }
  .film-scene__number, .film-scene__number--left { right: 2vw; left: auto; bottom: 4vh; }
  .album-feature__inner { grid-template-columns: 1fr; width: min(84vw, 620px); padding: 7rem 0; }
  .album-cover { width: 82%; }
  .album-copy h2 { font-size: clamp(3.6rem, 18vw, 6rem); }
  .album-copy h2.album-copy__title--jp { font-size: clamp(2.1rem, 8.3vw, 4rem); }
  .album-feature__inner--reverse { grid-template-columns: 1fr; }
  .single-feature .album-cover { order: -1; }
  .single-feature .album-copy h2 { font-size: clamp(2rem, 9.2vw, 4.5rem); }
  .listen-row { gap: .55rem; }
  .listen-link { min-height: 2.6rem; padding: .6rem .8rem; }
  .works { padding: 8rem 0 9rem; }
  .works__heading { margin: 0 0 5rem 8vw; }
  .works__track { grid-auto-columns: minmax(250px, 72vw); gap: 1.5rem; width: 100%; padding: 0 10vw 2rem; }
  .work-card:nth-child(even) { margin-top: 4rem; }
  .playlists { padding: 8rem 1.25rem 9rem; }
  .playlists__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .playlist-card { min-height: 210px; }
  .about__copy { width: 84vw; margin-left: 8vw; }
  .about__veil { background: rgba(8,10,14,.76); }
  .finale__copy { width: 86vw; }
  .finale h2 { font-size: clamp(2.7rem, 12vw, 5.5rem); }
  footer { flex-direction: column; padding: 2.5rem 1.25rem 7rem; }
}

@media (max-width: 520px) {
  .hero__image { background-position: 41% 50%; }
  .hero__content { padding-top: 0; }
  .hero .eyebrow { font-size: .62rem; }
  .hero__tagline { margin-left: 8%; font-size: 1.05rem; }
  .scroll-cue span { display: none; }
  .prologue__copy { width: 84vw; }
  .prologue__note { margin-top: 6rem; }
  .film-scene__copy, .film-scene__copy--right { width: 84vw; margin-left: 8vw; }
  .film-scene__caption { max-width: 78vw; line-height: 1.7; }
  .album-cover { width: 100%; }
  .interlude__time { right: 1rem; bottom: 8rem; font-size: 5rem; }
  .about h2 { font-size: clamp(1.95rem, 8.4vw, 2.4rem); letter-spacing: .045em; }
  .playlists__heading h2 { font-size: 2.2rem; }
  .playlists__grid { grid-template-columns: 1fr; width: min(82vw, 420px); }
  .playlist-card { min-height: 260px; }
  .social-links { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-light { display: none; }
}