/* Album Drop. Change the colors here. */
:root {
  --bg: #1a0708;
  --bg-2: #2a0d0f;
  --cream: #f6e7cf;
  --muted: #c9a99a;
  --amber: #f0a43a;
  --rust: #c4512f;
  --line: rgb(246 231 207 / 0.16);
  --serif: "Bookman Old Style", "URW Bookman", Georgia, ui-serif, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 20% 30%, rgb(196 81 47 / 0.25), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgb(240 164 58 / 0.12), transparent 70%),
    var(--bg);
  color: var(--cream);
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--amber); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; width: min(1140px, 100% - 40px); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 0 32px; }

/* sleeve with the record sliding out to the right */
.art { position: relative; width: min(440px, 100%); aspect-ratio: 1 / 1; margin-right: 18%; }
.sleeve, .record { position: absolute; top: 0; width: 100%; height: 100%; }
.sleeve { left: 0; z-index: 1; box-shadow: 0 30px 60px rgb(0 0 0 / 0.5); }
.sleeve svg { display: block; width: 100%; height: 100%; }
.sl-bg { fill: #f3dcb6; }
.sl-moon { fill: var(--rust); }
.sl-sea { fill: #2c3f57; }
.sl-wave { fill: none; stroke: #f3dcb6; stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
.sl-swimmer { fill: none; stroke: #f3dcb6; stroke-width: 4; stroke-linecap: round; }
.sl-head { fill: #f3dcb6; }
.sleeve-title { position: absolute; left: 18px; top: 16px; margin: 0; color: #2c3f57; font: 800 clamp(1rem, 2.4vw, 1.4rem)/1 var(--serif); letter-spacing: 0.04em; }

.record { left: 0; animation: slide-out 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.3s; }
.record svg { display: block; width: 96%; height: 96%; margin: 2%; animation: spin 3.2s linear infinite; }
.vinyl { fill: #0d0d0f; }
.grooves circle { fill: none; stroke: #26262b; stroke-width: 1.2; }
.sheen { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 14; stroke-linecap: round; }
.label { fill: var(--amber); }
.label-art { fill: var(--rust); }
.hole { fill: var(--bg); }

.artist { margin: 0 0 6px; color: var(--amber); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.9rem; }
h1 { margin: 0 0 6px; font: 800 clamp(2.6rem, 6.5vw, 4.6rem)/0.98 var(--serif); letter-spacing: -0.02em; }
.meta { margin: 0 0 24px; color: var(--muted); }

.countdown { display: flex; gap: 10px; margin-bottom: 8px; }
.countdown[hidden] { display: none; }
.countdown p { display: flex; flex-direction: column; align-items: center; min-width: 72px; margin: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 14px; background: rgb(0 0 0 / 0.2); color: var(--muted); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.countdown span { color: var(--cream); font: 800 2rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.out { margin: 0 0 24px; color: var(--amber); font-weight: 700; }
.is-out .out { font: 800 1.8rem/1.2 var(--serif); }

.listen { display: grid; gap: 10px; margin-bottom: 32px; }
.listen a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgb(246 231 207 / 0.05); color: var(--cream); font-weight: 700; text-decoration: none; transition: background-color 0.2s, border-color 0.2s, transform 0.2s; }
.listen a:first-child { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.listen a:hover { border-color: var(--amber); transform: translateX(4px); }
.listen svg { width: 20px; height: 20px; }

.tracks h2 { margin: 0 0 8px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; }
.tracks ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.tracks li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); counter-increment: t; }
.tracks li::before { content: counter(t, decimal-leading-zero); color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tracks li span { flex: 1; }
.tracks time { color: var(--muted); font-variant-numeric: tabular-nums; }
.tracks em { padding: 1px 8px; border-radius: 999px; background: var(--rust); color: var(--cream); font-size: 0.7rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tracks .more { color: var(--muted); font-style: italic; border-bottom: 0; }
.tracks .more::before { content: ""; }

.foot { padding: 16px 20px 32px; color: var(--muted); font-size: 0.85rem; text-align: center; }

@media (max-width: 880px) {
  .wrap { grid-template-columns: 1fr; }
  .art { margin: 0 auto; width: min(320px, 70vw); transform: translateX(-12%); }
}
@media (max-width: 480px) {
  .countdown p { min-width: 0; flex: 1; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(34%); } }
.record { transform: translateX(34%); }

@media (prefers-reduced-motion: reduce) {
  .record, .record svg { animation: none; }
  .listen a { transition: none; }
}