:root {
  --black: #080706;
  --charcoal: #12100e;
  --brown: #2a1810;
  --cream: #efe1c0;
  --muted: #b8a988;
  --orange: #d76d2a;
  --line: rgba(239, 225, 192, .16);
  --shadow: rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--black); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--cream);
  background:
    radial-gradient(circle at 52% 8%, rgba(215,109,42,.15), transparent 31rem),
    radial-gradient(circle at 14% 20%, rgba(239,225,192,.07), transparent 28rem),
    linear-gradient(135deg, #050403, #120c08 55%, #070605);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  letter-spacing: .01em;
}

button { font: inherit; }

.site-shell { min-height: 100vh; }

.welcome-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  transition: opacity 900ms ease, visibility 900ms ease;
}

.welcome-screen.is-leaving { opacity: 0; visibility: hidden; }

.welcome-inner {
  text-align: center;
  max-width: 760px;
  animation: arrive 1.1s ease both;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  color: var(--orange);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  margin: 0 0 1.2rem;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: clamp(3rem, 9vw, 7.8rem);
  line-height: .86;
  margin-bottom: 1.3rem;
  text-shadow: 0 8px 30px var(--shadow);
}

h1 span, h2 span { color: var(--orange); }

.artist {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: 4rem;
}

.headphones {
  color: var(--cream);
  font-size: 1.08rem;
  margin-bottom: 1.1rem;
}

.enter-button {
  border: 0;
  background: transparent;
  color: var(--cream);
  padding: .8rem 1.1rem;
  cursor: pointer;
  font-size: 1.08rem;
  letter-spacing: .08em;
  transition: color 240ms ease, transform 240ms ease;
}

.enter-button:hover, .enter-button:focus-visible {
  color: var(--orange);
  transform: translateY(-1px);
  outline: none;
}

.room-is-hidden { display: none !important; }

.room {
  padding: clamp(1.2rem, 3vw, 3rem);
  opacity: 0;
  transform: translateY(12px);
}

.room.is-visible {
  animation: roomIn 1000ms ease forwards;
}

@keyframes roomIn {
  to { opacity: 1; transform: translateY(0); }
}

.room-grid {
  min-height: 88vh;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(280px, .95fr);
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

.turntable-panel, .jacket-panel { min-width: 0; }

.turntable {
  display: grid;
  place-items: center;
}

.plinth {
  position: relative;
  width: min(82vw, 600px);
  aspect-ratio: 1.26 / 1;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.08), transparent 8rem),
    linear-gradient(145deg, #2b180f, #120c08 48%, #070605);
  box-shadow: 0 50px 100px rgba(0,0,0,.55), inset 0 0 0 1px rgba(239,225,192,.08);
  display: grid;
  place-items: center start;
  padding-left: 7%;
}

.platter {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #23211f 0 52%, #0e0d0c 53% 100%);
  box-shadow: inset 0 0 0 7px rgba(239,225,192,.08), 0 20px 50px rgba(0,0,0,.5);
}

.record {
  position: relative;
  width: 91%;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.055) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 37% 31%, rgba(255,255,255,.16), transparent 4rem),
    radial-gradient(circle, #171717, #050505 78%);
  box-shadow: inset 0 0 24px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(0deg);
  will-change: transform;
}

.progress-ring {
  position: absolute;
  inset: 29.4%;
  border-radius: 999px;
  background: conic-gradient(var(--orange) 0deg, rgba(239,225,192,.08) 0deg 360deg);
  opacity: .75;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.record-label {
  width: 36%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #ddc18f 58%, #af6a36 100%);
  color: #150d09;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .72rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.label-small, .label-side {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(.28rem, .78vw, .44rem);
}

.label-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  line-height: .92;
  font-size: clamp(.52rem, 1.72vw, .86rem);
  margin: .22rem 0;
}

.spindle {
  position: absolute;
  width: 3%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #ddd0ae;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
}

.tonearm {
  position: absolute;
  top: 17%;
  right: 11%;
  width: 30%;
  height: 52%;
  transform-origin: 82% 12%;
  transform: rotate(-18deg);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.tonearm.is-playing { transform: rotate(7deg); }

.arm-base {
  position: absolute;
  right: 0;
  top: 0;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle at 38% 30%, #d7ccb2, #6e6250 72%);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.arm {
  position: absolute;
  right: 15%;
  top: 15%;
  width: 12%;
  height: 79%;
  border-radius: 99px;
  background: linear-gradient(90deg, #c7bca2, #675f53, #f1e2c2);
  transform: rotate(31deg);
  transform-origin: top center;
}

.headshell {
  position: absolute;
  left: 9%;
  bottom: 4%;
  width: 22%;
  height: 12%;
  border-radius: 2px;
  background: #12100e;
  transform: rotate(31deg);
  box-shadow: 0 3px 0 #d1c09f;
}

.cover {
  display: block;
  width: min(100%, 430px);
  border-radius: 2px;
  box-shadow: 0 35px 80px rgba(0,0,0,.5);
}

.release-copy { margin: 1.5rem 0 1rem; }
.release-copy h2 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: .88;
  margin-bottom: .6rem;
}
.release-copy p:not(.eyebrow) {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .78rem;
}

.side-controls {
  display: grid;
  gap: .8rem;
  margin-top: 1.4rem;
}

.side-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.025);
  transition: border-color 240ms ease, background 240ms ease;
}

.side-card.active {
  border-color: rgba(215,109,42,.7);
  background: rgba(215,109,42,.07);
}

.side-card p {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .12em;
  font: .68rem ui-sans-serif, system-ui, sans-serif;
  margin-bottom: .36rem;
}

.side-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
}

.play-button {
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(239,225,192,.35);
  border-radius: 999px;
  padding: .58rem 1rem;
  cursor: pointer;
  min-width: 86px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.play-button:hover, .play-button:focus-visible {
  color: #170d08;
  background: var(--cream);
  border-color: var(--cream);
  outline: none;
}

.status {
  min-height: 1.4rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: .98rem;
}

.notes {
  max-width: 1030px;
  margin: 0 auto;
  padding: 2rem 0 6rem;
  border-top: 1px solid var(--line);
}

.notes-header h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  max-width: 680px;
  margin-bottom: 2rem;
}

.notes-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 4vw, 4rem);
  margin-bottom: 2rem;
}

.notes h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 2rem;
  line-height: .95;
  margin-bottom: .55rem;
}

.credit-line, .recording, .essay, .lyrics-body {
  color: #dac9a6;
  line-height: 1.66;
}

.recording {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
  margin: 1.5rem 0 2.5rem;
}

.essay {
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  max-width: 810px;
}

.essay-section { margin-bottom: 2.4rem; }
.essay-section h3 { margin-bottom: .85rem; }

.lyrics {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}

.lyrics summary {
  cursor: pointer;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  font: .78rem ui-sans-serif, system-ui, sans-serif;
}

.lyrics-body {
  margin-top: 1.5rem;
  columns: 2 280px;
  column-gap: 3rem;
}

@media (max-width: 860px) {
  .room-grid { grid-template-columns: 1fr; min-height: auto; padding-top: 1rem; }
  .turntable-panel { order: 2; }
  .jacket-panel { order: 1; }
  .cover { width: min(100%, 360px); margin: 0 auto; }
  .release-copy { text-align: center; }
  .plinth { width: min(95vw, 520px); padding-left: 6%; }
  .notes-columns { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .room { padding: 1rem; }
  .plinth { width: 100%; }
  .side-card { align-items: flex-start; flex-direction: column; }
  .play-button { width: 100%; }
  .artist { margin-bottom: 3rem; }
}

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


.production-credits {
  max-width: 760px;
  margin: 4.5rem auto 2rem;
  padding: 2.5rem 1.25rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.production-credits .eyebrow {
  margin-bottom: 1.2rem;
}

.production-credits p:last-child {
  margin: 0;
  line-height: 1.65;
  color: var(--cream);
}