:root {
  --ink: #080808;
  --ink-soft: #121212;
  --paper: #eeeae2;
  --cream: #d8d2c6;
  --gold: #d7b466;
  --gold-bright: #f0cc79;
  --line: rgba(255, 255, 255, 0.13);
  --muted: #9b978f;
  --max: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--gold);
  color: var(--ink);
  transition: top .2s;
}

.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
}

.wordmark span { color: var(--gold); }

nav { display: flex; gap: 28px; }

.nav-link {
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
}

.nav-link:hover, .nav-link:focus-visible, .nav-link.active { color: var(--paper); }

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 135px max(24px, calc((100vw - var(--max)) / 2)) 80px;
  background:
    radial-gradient(circle at 76% 48%, rgba(215,180,102,.1), transparent 29%),
    linear-gradient(125deg, #050505, #10100f 70%, #080808);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(117deg, transparent 0, transparent 3px, rgba(255,255,255,.035) 4px),
    repeating-linear-gradient(27deg, transparent 0, transparent 7px, rgba(215,180,102,.025) 8px);
}

.hero-content { position: relative; z-index: 2; width: min(750px, 72%); }

.eyebrow {
  margin: 0 0 24px;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .96;
}

h1 { font-size: clamp(4.1rem, 9.5vw, 8.8rem); }

h1 em, .contact h2 em {
  color: var(--gold);
  font-family: Georgia, serif;
  font-weight: 400;
}

.hero-intro {
  max-width: 590px;
  margin: 34px 0 0;
  color: #aaa69e;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 42px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, .contact-link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.button-primary { background: var(--gold); color: var(--ink); }
.button-primary:hover { background: var(--gold-bright); }
.button-quiet { border-color: var(--line); color: var(--paper); }
.button-quiet span { color: var(--gold); }
.button-quiet:hover { border-color: var(--gold); }

.hero-orbit {
  position: absolute;
  right: clamp(-120px, 2vw, 30px);
  top: 50%;
  width: min(51vw, 720px);
  aspect-ratio: 1;
  transform: translateY(-46%);
}

.orbit, .orbit-core {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(215,180,102,.3);
  border-radius: 50%;
}

.orbit-one { animation: breathe 7s ease-in-out infinite; }
.orbit-two { inset: 22%; border-color: rgba(255,255,255,.12); animation: breathe 7s 1.2s ease-in-out infinite; }
.orbit-core { inset: 38%; border: 0; background: radial-gradient(circle at 38% 35%, #d6b568, #3a2e16 42%, #080808 69%); box-shadow: 0 0 80px rgba(215,180,102,.15); }

.side-note {
  position: absolute;
  right: 20px;
  bottom: 64px;
  margin: 0;
  color: #6c6963;
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.section-pad {
  display: grid;
  grid-template-columns: minmax(160px, .35fr) 1fr;
  gap: 7vw;
  padding: clamp(90px, 12vw, 180px) max(24px, calc((100vw - var(--max)) / 2));
}

.section-label {
  padding-top: 9px;
  color: #68655f;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.section-label span { display: inline-block; width: 42px; color: var(--gold); }
.section-label.light { color: #77736b; }

.about { background: var(--paper); color: var(--ink); }
.about-copy { max-width: 830px; }
.about h2, .specialisms h2, .sound h2 { font-size: clamp(3rem, 6vw, 6rem); }
.about .lead { margin: 45px 0 24px; font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1.3; }
.about-copy > p:last-child { max-width: 690px; color: #5d5a55; font-size: 1.05rem; line-height: 1.8; }

.specialisms { background: var(--ink-soft); }
.skill-list { margin: 55px 0 0; padding: 0; list-style: none; }
.skill-list li { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; border-bottom: 1px solid var(--line); }
.skill-list li:first-child { border-top: 1px solid var(--line); }
.skill-list span { font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-size: clamp(1.15rem, 2.2vw, 2rem); }
.skill-list b { color: #5f5c56; font-size: .7rem; font-weight: 500; }

.sound { position: relative; overflow: hidden; background: #d8d2c6; color: var(--ink); }
.sound-copy { position: relative; z-index: 1; max-width: 890px; }
.sound-copy p { max-width: 630px; margin: 44px 0 0; color: #4f4c47; font-size: 1.15rem; line-height: 1.8; }
.sound-mark { position: absolute; right: -2vw; bottom: -7vw; color: rgba(8,8,8,.045); font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-size: clamp(12rem, 28vw, 30rem); font-weight: 700; letter-spacing: -.1em; line-height: 1; }
.sound-mark span { color: rgba(181,142,59,.11); }

.release { background: #0d0d0d; }
.release-card { display: grid; grid-template-columns: minmax(260px, .8fr) 1fr; gap: clamp(35px, 7vw, 90px); align-items: center; }
.release-art { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 35% 30%, #594620, #19150d 34%, #070707 70%); border: 1px solid var(--line); }
.release-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 48%, rgba(215,180,102,.18)); }
.release-disc { position: absolute; inset: 18%; border: 1px solid rgba(215,180,102,.45); border-radius: 50%; box-shadow: 0 0 0 30px rgba(215,180,102,.03), 0 0 0 60px rgba(215,180,102,.02); }
.release-monogram { position: absolute; left: 50%; top: 50%; z-index: 1; color: var(--gold); font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 600; letter-spacing: -.09em; transform: translate(-50%, -50%); }
.release-info h2 { font-size: clamp(3.2rem, 7vw, 7rem); }
.release-type { margin: 12px 0 30px; color: var(--gold); font-family: Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.6rem); }
.release-info > p:not(.eyebrow):not(.release-type) { max-width: 500px; color: var(--muted); line-height: 1.75; }
.release-info .button { margin-top: 24px; }

.contact { display: block; text-align: center; background: var(--paper); color: var(--ink); }
.contact h2 { font-size: clamp(4rem, 9vw, 9rem); }
.contact > p:not(.eyebrow) { max-width: 520px; margin: 35px auto 20px; color: #5f5b55; line-height: 1.7; }
.contact-link { display: inline-flex; gap: 14px; margin-top: 14px; border-bottom: 1px solid #b59a60; color: var(--ink); font-size: 1.4rem; text-decoration: none; }
.contact-link span { color: #9b7730; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 34px max(24px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); color: #77736b; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
footer p { margin: 0; }
footer p:last-child { text-align: right; }

/* Track page */
.track-page { background: #0b0b0b; }

.track-hero {
  min-height: 100svh;
  padding: 135px max(24px, calc((100vw - var(--max)) / 2)) 90px;
  background:
    radial-gradient(circle at 17% 51%, rgba(215,180,102,.12), transparent 27%),
    linear-gradient(125deg, #070707, #10100e 70%, #080808);
}

.back-link {
  display: inline-flex;
  gap: 12px;
  margin-bottom: 40px;
  color: #848078;
  font-size: .72rem;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.back-link:hover { color: var(--paper); }

.track-layout {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) 1fr;
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
}

.track-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(circle at 50% 41%, rgba(224,190,112,.2), transparent 31%),
    linear-gradient(145deg, #251d0e, #0e0d0a 55%, #070707);
  border: 1px solid rgba(215,180,102,.32);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}

.track-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(215,180,102,.1));
}

.cover-rings, .cover-rings::before, .cover-rings::after {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 54%;
  aspect-ratio: 1;
  border: 1px solid rgba(215,180,102,.48);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cover-rings::before, .cover-rings::after { content: ""; width: 135%; top: 50%; }
.cover-rings::after { width: 175%; opacity: .5; }
.track-cover p, .track-cover strong, .track-cover span, .track-cover small { position: relative; z-index: 1; }
.track-cover p { margin: 0 auto auto 0; color: var(--gold); font-size: .7rem; font-weight: 600; letter-spacing: .25em; }
.track-cover strong { font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-size: clamp(2.2rem, 5vw, 5rem); letter-spacing: -.07em; line-height: .9; }
.track-cover span { margin-top: 12px; color: var(--gold); font-family: Georgia, serif; font-size: clamp(1.05rem, 2vw, 1.7rem); }
.track-cover small { position: absolute; right: 22px; top: 26px; color: #817b70; font-size: .58rem; letter-spacing: .2em; writing-mode: vertical-rl; }

.track-content h1 { font-size: clamp(3.8rem, 7.5vw, 7.8rem); }
.track-subtitle { margin: 14px 0 42px; color: var(--gold); font-family: Georgia, serif; font-size: clamp(1.8rem, 3.4vw, 3rem); }

.player-shell {
  padding: 24px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
}

.player-shell.is-playing { border-color: rgba(215,180,102,.45); }
.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.player-heading span { display: block; margin-bottom: 5px; color: #706d67; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; }
.player-heading strong { font-size: .86rem; font-weight: 500; }
.player-shell audio { display: none; }
.player-status { margin: 13px 0 0; color: #736f68; font-size: .7rem; line-height: 1.5; }
.player-status.is-error { color: #c6a967; }

.custom-player { display: flex; align-items: center; gap: 18px; }
.play-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 112px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.play-toggle:hover { background: var(--gold-bright); transform: scale(1.04); }
.play-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.play-toggle:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.play-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--ink);
}
.is-playing .play-icon { width: 11px; height: 13px; border: 0; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); }
.play-label { line-height: 1; }
.player-timeline { flex: 1; min-width: 0; }
.player-timeline input { display: block; width: 100%; margin: 0; accent-color: var(--gold); cursor: pointer; }
.player-timeline input:disabled { cursor: not-allowed; opacity: .45; }
.player-times { display: flex; justify-content: space-between; margin-top: 7px; color: #77736b; font-size: .65rem; font-variant-numeric: tabular-nums; }

.playing-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.playing-bars i { width: 2px; height: 35%; background: var(--gold); animation: bars .65s ease-in-out infinite alternate; animation-play-state: paused; }
.playing-bars i:nth-child(2) { height: 70%; animation-delay: -.3s; }
.playing-bars i:nth-child(3) { height: 45%; animation-delay: -.1s; }
.playing-bars i:nth-child(4) { height: 90%; animation-delay: -.5s; }
.is-playing .playing-bars i { animation-play-state: running; }

.track-details { background: var(--paper); color: var(--ink); }
.track-details h2 { font-size: clamp(3rem, 6vw, 6rem); }
.track-lead { max-width: 820px; margin: 42px 0 22px; font-size: clamp(1.45rem, 2.7vw, 2.35rem); line-height: 1.35; }
.track-body { max-width: 690px; color: #5c5852; font-size: 1.05rem; line-height: 1.8; }
.track-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 60px 0 0; border-top: 1px solid rgba(8,8,8,.18); }
.track-meta div { padding: 22px 18px 22px 0; border-bottom: 1px solid rgba(8,8,8,.18); }
.track-meta dt { margin-bottom: 8px; color: #8a847a; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; }
.track-meta dd { margin: 0; font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; font-size: 1.08rem; }

.track-cta { padding: clamp(100px, 13vw, 180px) 24px; text-align: center; background: #0b0b0b; }
.track-cta h2 { font-size: clamp(4rem, 9vw, 9rem); }
.track-cta h2 em { color: var(--gold); font-family: Georgia, serif; font-weight: 400; }
.track-cta > p:not(.eyebrow) { max-width: 560px; margin: 34px auto; color: var(--muted); line-height: 1.7; }

@keyframes bars { to { height: 100%; } }

.reveal { animation: reveal .8s both; }
.delay-one { animation-delay: .12s; }
.delay-two { animation-delay: .24s; }
.delay-three { animation-delay: .36s; }

@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }
@keyframes breathe { 50% { transform: scale(1.035); opacity: .65; } }

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

@media (max-width: 760px) {
  .site-header { width: calc(100% - 36px); }
  .hero { min-height: 820px; padding-inline: 20px; }
  .hero-content { width: 100%; }
  h1 { font-size: clamp(3.7rem, 19vw, 6rem); }
  .hero-orbit { width: 96vw; right: -44vw; top: 32%; opacity: .6; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 390px; }
  .side-note { display: none; }
  .section-pad { grid-template-columns: 1fr; gap: 38px; }
  .release-card { grid-template-columns: 1fr; }
  .track-hero { padding-top: 120px; }
  .track-layout { grid-template-columns: 1fr; }
  .track-cover { width: min(100%, 540px); }
  .track-meta { grid-template-columns: 1fr; }
  .release-art { max-width: 520px; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > p:nth-child(2) { display: none; }
}

@media (max-width: 430px) {
  .site-header { padding-top: 22px; }
  nav { gap: 18px; }
  .nav-link { font-size: .7rem; }
  .hero { min-height: 760px; padding-top: 118px; }
  .hero-intro { font-size: .97rem; }
  .section-pad { padding-inline: 20px; }
  .track-hero { padding-inline: 20px; }
  .player-shell { padding: 18px; }
  .custom-player { gap: 14px; }
}