:root {
  --cream: #fff0c5;
  --faded: #ded0ad;
  --amber: #f7bd46;
  --panel: rgb(25 17 11 / 0.82);
  --rule: rgb(255 240 197 / 0.22);
  --sans: "Arial Narrow", "Franklin Gothic Medium", Arial, sans-serif;
  --display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #15100b; }
body { min-height: 100svh; margin: 0; color: var(--cream); font-family: var(--sans); }
button, input { font: inherit; }
button { cursor: pointer; }

.scene, .grain { position: fixed; inset: 0; }
.scene {
  z-index: 0;
  overflow: hidden;
  background: #15100b;
}
.scene-art { position: absolute; top: 50%; left: 50%; width: max(100vw, 177.68svh); height: max(100svh, 56.28vw); transform: translate(-50%, -50%); }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: filter 260ms ease, opacity 1.8s cubic-bezier(0.45, 0, 0.15, 1); will-change: transform; }
.scene-image-light { opacity: 0; }
body[data-theme="light"] .scene-image-light { opacity: 1; }
.scene::before { position: absolute; z-index: 3; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgb(7 5 2 / 0.63), rgb(20 12 6 / 0.13) 58%, rgb(3 7 11 / 0.5)), linear-gradient(0deg, rgb(6 4 2 / 0.74), transparent 57%); }
body[data-theme="light"] .scene::before { background: linear-gradient(90deg, rgb(82 45 13 / 0.18), transparent 58%, rgb(34 17 5 / 0.12)), linear-gradient(0deg, rgb(45 22 5 / 0.2), transparent 60%); }
.ambient-light { position: absolute; z-index: 4; top: -17rem; left: -17rem; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgb(255 217 126 / 0.28), rgb(225 113 40 / 0.12) 28%, rgb(28 120 116 / 0.08) 50%, transparent 72%); mix-blend-mode: soft-light; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.grain { z-index: 2; pointer-events: none; }
.theme-toggle { border: 1px solid var(--rule); border-radius: 99rem; padding: 0.42rem 0.7rem; color: var(--cream); background: rgb(20 14 9 / 0.32); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.theme-toggle span:first-child { margin-right: 0.35rem; color: var(--amber); font-size: 0.85rem; vertical-align: -0.07rem; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--amber); outline: none; }
.grain { z-index: 2; opacity: 0.1; 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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

.skip-link { position: fixed; z-index: 9; top: 1rem; left: 1rem; padding: 0.7rem 1rem; color: #171108; background: var(--cream); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

.site-header, main { position: relative; z-index: 1; width: min(100% - 3rem, 1240px); margin-inline: auto; }
.site-header, main { pointer-events: none; }
.wordmark, .theme-toggle, .intro, .player-panel, .collaboration { pointer-events: auto; }
.site-header { display: flex; justify-content: space-between; padding-top: 1.5rem; will-change: transform; }
.wordmark { color: var(--cream); font-size: 1.2rem; font-weight: 900; letter-spacing: 0.22em; text-decoration: none; }
.wordmark span { color: var(--amber); letter-spacing: -0.11em; }
.header-controls { display: flex; align-items: flex-start; gap: 1rem; }
.site-header p { margin: 0; color: var(--faded); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.13em; line-height: 1.55; text-align: right; text-transform: uppercase; }

main { display: flex; min-height: calc(100svh - 4.3rem); flex-direction: column; justify-content: flex-start; padding: clamp(3rem, 7vh, 5.5rem) 0 10rem; }
.intro { max-width: 430px; will-change: transform; }
.eyebrow { margin: 0 0 0.8rem; color: var(--amber); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0.8rem; font-family: var(--display); font-size: clamp(3.8rem, 8vw, 6.7rem); font-weight: 400; letter-spacing: -0.075em; line-height: 0.78; }
h1 em { color: var(--amber); font-weight: 400; }
.intro > p:last-child { max-width: 280px; margin-bottom: 0; color: var(--faded); font-size: 0.96rem; line-height: 1.5; }

.player-panel { position: fixed; z-index: 4; bottom: clamp(1rem, 6vh, 5rem); left: 50%; width: min(calc(100% - 3rem), 576px); overflow: hidden; border: 1px solid rgb(255 240 197 / 0.24); border-radius: 999px; background: linear-gradient(135deg, rgb(255 240 197 / 0.13), rgb(18 11 6 / 0.28)); box-shadow: inset 0 1px 0 rgb(255 245 214 / 0.14), 0 0.7rem 2rem rgb(0 0 0 / 0.2); transform: translateX(-50%); }
.player-main { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.75rem 1.25rem 0.75rem 0.75rem; will-change: transform; }
.record-visualizer { position: relative; display: grid; width: 5rem; height: 5rem; place-items: center; }
.record { position: relative; z-index: 1; display: grid; width: 5rem; height: 5rem; place-items: center; border: 1px solid rgb(255 240 197 / 0.4); border-radius: 50%; padding: 0; color: inherit; background: radial-gradient(circle, #b84e25 0 6%, #18110d 7% 19%, #e9ad39 20% 22%, #261812 23% 46%, #9f3b23 47% 49%, #14100d 50% 69%, #f5d277 70% 72%, #17110d 73%); box-shadow: inset 0 0 0 0.5rem rgb(12 9 7 / 0.28); transition: transform 180ms ease, box-shadow 180ms ease; }
.record:hover, .record:focus-visible { box-shadow: inset 0 0 0 0.5rem rgb(12 9 7 / 0.28), 0 0 0 0.2rem rgb(255 240 197 / 0.15); outline: none; transform: scale(1.04); }
.record-label { position: relative; display: grid; width: 2.6rem; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--amber); border-radius: 50%; background: #24130c; }
.record-label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.84; }
.record-label span { position: relative; color: #fff8df; font-family: var(--display); font-size: 0.32rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.05; text-align: center; text-shadow: 0 1px 2px #120804; }
.audio-waveform { position: absolute; z-index: 0; top: 50%; left: 50%; width: 6rem; height: 6rem; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); filter: sepia(1) saturate(4) hue-rotate(345deg) brightness(1.08) drop-shadow(0 0 0.35rem rgb(247 189 70 / 0.42)); transition: opacity 240ms ease; }
.player-panel.is-playing .audio-waveform { opacity: 0.82; }
.player-panel.is-playing .record { animation: record-spin 1.8s linear infinite; }
@keyframes record-spin { to { transform: rotate(360deg); } }
.track-details, .transport { position: relative; z-index: 1; }
.track-details { min-width: 0; }
.track-details .eyebrow { margin-bottom: 0.2rem; font-size: 0.5rem; }
.track-details .eyebrow span { margin-left: 0.55rem; color: var(--faded); }
h2 { overflow: hidden; margin-bottom: 0.05rem; font-family: var(--display); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.artist { overflow: hidden; margin-bottom: 0.35rem; color: var(--faded); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.progress-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
input[type="range"] { width: 100%; height: 0.35rem; margin: 0; accent-color: var(--amber); cursor: pointer; }
input[type="range"]:disabled { cursor: wait; opacity: 0.55; }
.time { display: flex; justify-content: space-between; margin: 0.2rem 0 0; color: var(--faded); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.62rem; }

.transport { display: flex; align-items: center; gap: 0.1rem; }
.icon-button, .play-button { display: grid; place-items: center; border: 0; color: var(--cream); background: transparent; }
.icon-button { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }
.icon-button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.play-button { width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #21170d; background: rgb(255 240 197 / 0.9); font-size: 1rem; transition: transform 180ms ease, background 180ms ease; }
.play-button:hover:not(:disabled), .play-button:focus-visible { background: var(--amber); transform: scale(1.06); outline: none; }
.icon-button:hover, .icon-button:focus-visible { color: var(--amber); outline: none; }
.play-button:disabled { cursor: wait; opacity: 0.5; }

.queue { display: none; gap: 0.75rem; padding: 0 1.25rem 1.1rem; }
.player-panel.is-queue-open { border-radius: 2rem; }
.player-panel.is-queue-open .queue { display: grid; }
.queue-label { margin: 0; color: var(--amber); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.queue-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.queue-track { display: grid; min-width: 0; gap: 0.35rem; border: 1px solid transparent; border-radius: 0.7rem; padding: 0.35rem; color: var(--faded); background: rgb(0 0 0 / 0.12); text-align: left; }
.queue-track img { width: 100%; aspect-ratio: 1; border-radius: 0.45rem; object-fit: cover; filter: saturate(0.75); opacity: 0.78; transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease; }
.queue-number { color: var(--amber); font-size: 0.4rem; font-weight: 800; letter-spacing: 0.05em; }
.queue-name { overflow: hidden; font-family: var(--display); font-size: 0.56rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.queue-track:hover, .queue-track:focus-visible, .queue-track.is-current { color: var(--cream); outline: none; }
.queue-track:hover img, .queue-track:focus-visible img, .queue-track.is-current img { filter: saturate(1); opacity: 1; transform: translateY(-0.12rem); }
#youtube-link { color: var(--cream); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-decoration-color: var(--amber); text-underline-offset: 0.35rem; text-transform: uppercase; }

.collaboration { position: fixed; z-index: 3; right: max(1rem, calc(50% - 680px)); bottom: clamp(1rem, 6vh, 5rem); display: flex; width: min(300px, calc(50% - 340px)); height: 6.5rem; flex-direction: column; justify-content: flex-end; border-radius: 1rem; padding: 0.65rem 0.8rem; will-change: transform; }
.collaboration .eyebrow { margin-bottom: 0.2rem; color: #ffd66f; font-size: 0.5rem; text-shadow: none; }
.collaboration h2 { overflow: visible; margin-bottom: 0.45rem; color: #fff8df; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1; text-overflow: clip; text-shadow: 0 2px 8px #120804; white-space: nowrap; }
.collaboration h2 br { display: none; }
.collaboration h2 em { color: #ffd66f; font-family: var(--display); font-weight: 400; }
.collaboration-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.collaboration-link { display: inline-flex; align-items: center; gap: 0.3rem; color: #fff8df; font-size: 0.48rem; font-weight: 800; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.collaboration-link svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; transition: transform 180ms ease; }
.collaboration-link:hover svg, .collaboration-link:focus-visible svg { transform: translateY(-0.14rem) scale(1.08); }
.collaboration-link:focus-visible { outline: 2px solid #ffd66f; outline-offset: 0.25rem; }

.youtube-player-wrap { position: fixed; z-index: -3; width: 200px; height: 200px; overflow: hidden; opacity: 0.01; pointer-events: none; }
.youtube-player-wrap iframe { width: 200px; height: 200px; }
body, .wordmark, .site-header p, .intro > p:last-child, .theme-toggle, .player-panel, .record span, .track-details .eyebrow span, h1, h1 em, h2, .artist, .time, .icon-button, .play-button, .queue-track, .queue-track span { transition: color 900ms ease, background-color 900ms ease, border-color 900ms ease, box-shadow 900ms ease; }
body[data-theme="light"] { --cream: #321709; --faded: #4a2a16; --amber: #a7450a; --panel: rgb(255 245 214 / 0.25); --rule: rgb(51 34 15 / 0.32); }
body[data-theme="light"] .wordmark, body[data-theme="light"] .site-header p { color: #fff6d7; text-shadow: 0 2px 5px rgb(20 9 1 / 0.9), 0 0 16px rgb(20 9 1 / 0.65); }
body[data-theme="light"] .wordmark span { color: #ffd266; }
body[data-theme="light"] .eyebrow { color: #ffe394; text-shadow: 0 2px 5px rgb(20 9 1 / 0.88), 0 0 13px rgb(20 9 1 / 0.6); }
body[data-theme="light"] h1 { color: #fff5d7; text-shadow: 0 2px 5px rgb(20 9 1 / 0.88), 0 0 13px rgb(20 9 1 / 0.6); }
body[data-theme="light"] h1 em { color: #e06a20; }
body[data-theme="light"] .intro > p:last-child { color: #fff8df; font-weight: 700; text-shadow: 0 2px 5px rgb(20 9 1 / 0.88), 0 0 13px rgb(20 9 1 / 0.6); }
body[data-theme="light"] .player-panel { border-color: rgb(255 244 208 / 0.52); background: linear-gradient(135deg, rgb(91 49 13 / 0.34), rgb(180 104 20 / 0.24)); box-shadow: inset 0 1px 0 rgb(255 253 239 / 0.3), 0 0.7rem 2rem rgb(76 42 10 / 0.2); }
body[data-theme="light"] .player-panel, body[data-theme="light"] .player-panel .artist, body[data-theme="light"] .player-panel .time, body[data-theme="light"] .player-panel .track-details .eyebrow span, body[data-theme="light"] .player-panel .icon-button { color: #fff6dc; text-shadow: 0 1px 4px rgb(24 11 2 / 0.9); }
body[data-theme="light"] .player-panel .track-details .eyebrow { color: #ffd266; text-shadow: 0 1px 4px rgb(24 11 2 / 0.9); }
body[data-theme="light"] .player-panel h2 { color: #fff9e6; text-shadow: 0 1px 4px rgb(24 11 2 / 0.9); }
body[data-theme="light"] .theme-toggle { color: #fff6d7; background: rgb(20 10 2 / 0.24); border-color: rgb(255 244 208 / 0.58); box-shadow: none; text-shadow: 0 1px 4px rgb(20 9 1 / 0.9); }
body[data-theme="light"] .play-button { color: #2b1608; background: #ffe08a; }
body[data-theme="light"] .audio-waveform { filter: sepia(0.95) saturate(5) hue-rotate(352deg) brightness(0.82) drop-shadow(0 0 0.35rem rgb(167 69 10 / 0.35)); }

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .site-header, main { width: min(100% - 1.5rem, 1240px); }
  main { min-height: calc(100svh - 3.75rem); padding-top: 3.5rem; }
  .header-controls { gap: 0.55rem; }
  .theme-toggle { padding-inline: 0.5rem; }
  main { padding-bottom: 7rem; }
  .player-panel { bottom: 1rem; width: calc(100% - 1.75rem); }
  .player-main { grid-template-columns: 4rem 1fr auto; gap: 0.65rem; padding: 0.65rem 0.75rem 0.65rem 0.65rem; }
  .record-visualizer, .record { width: 4rem; height: 4rem; }
  .audio-waveform { width: 4.75rem; height: 4.75rem; }
  .record-label { width: 2.15rem; }
  .record-label span { font-size: 0.28rem; }
  .track-details .eyebrow { display: none; }
  h2 { font-size: 0.78rem; }
  .artist { margin-bottom: 0.25rem; font-size: 0.56rem; }
  .transport { gap: 0; }
  .icon-button { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
  .play-button { width: 2.45rem; height: 2.45rem; font-size: 0.85rem; }
  .queue-list { grid-template-columns: repeat(5, 4.3rem); overflow-x: auto; padding-bottom: 0.25rem; }
  .queue { padding-inline: 0.85rem; }
  .collaboration { position: static; width: auto; height: auto; max-width: 250px; margin-top: 8rem; padding: 0.9rem; }
  .collaboration h2 { white-space: normal; }
  .collaboration h2 br { display: initial; }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .collaboration { position: static; width: auto; height: auto; margin-top: 8rem; }
  .collaboration h2 { white-space: normal; }
  .collaboration h2 br { display: initial; }
}

@media (min-width: 1121px) {
  .collaboration h2 em::before { content: " "; }
}

@media (prefers-reduced-motion: reduce) { .play-button, .scene-image, body, .wordmark, .site-header p, .intro > p:last-child, .theme-toggle, .player-panel, .record, .record-label span, .track-details .eyebrow span, h1, h1 em, h2, .artist, .time, .icon-button, .queue-track, .queue-track img, .queue-track span, .collaboration-link svg, .audio-waveform { transition: none; } .ambient-light { display: none; } .player-panel.is-playing .record { animation: none; } }