:root {
  --ink: #1a1512;
  --ink-soft: #241d18;
  --amber: #e8a33d;
  --amber-dim: #a9762c;
  --cream: #f2e4cd;
  --rule: rgba(242, 228, 205, 0.14);
  /* half the player card's height — used to centre it on her face */
  --card-half: 109px;
  --mono: "SF Mono", "IBM Plex Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* the display rules below would otherwise beat the `hidden` attribute */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

.deck {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(20px, 4vh, 40px);
  padding: clamp(20px, 4vw, 48px);
  isolation: isolate;
}

/* The card has to sit on her face, and the face moves with the crop:
   `cover` scales by width on wide viewports and by height on tall ones,
   which puts her eye at max(22vw, 33vh) either way. Centre the card
   there rather than in the viewport, or she surfaces above it in
   portrait — iPad was the case that caught this. */
.player-wrap {
  margin-top: max(0px, calc(max(22vw, 33vh) - var(--card-half)));
}

/* ---- backdrop ------------------------------------------------------ */
/* Photo: a Madras market shot through hanging fabric. The gradient below
   it is the fallback if the image ever fails to load. The filter is doing
   structural work, not mood — the photo runs across blue/magenta/yellow
   and the UI is one amber, so saturation comes down and the whole frame
   is pulled warm until the two read as a single image. */

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(232, 163, 61, 0.34), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(120, 62, 30, 0.42), transparent 62%),
    linear-gradient(168deg, #2a201a 0%, #1a1512 46%, #120e0c 100%);
  background-size: cover;
  background-position: center;
}

.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/hero.jpg");
  background-size: cover;
  /* Anchored to the top so her face falls behind the player card.
     On wide screens the image fills the width and only Y does anything;
     on narrow screens the 40% is what keeps her in frame. */
  background-position: 40% 0%;
  filter: saturate(0.9) sepia(0.1) contrast(0.98) brightness(1.02);
}

/* amber wash — ties the remaining colour to the type */
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(232, 163, 61, 0.14), rgba(120, 62, 30, 0.16) 55%, rgba(18, 14, 12, 0.2));
  mix-blend-mode: overlay;
}

/* Two scrims: top-to-bottom as before, plus one from the left so the
   title and player always have something dark to sit on. */
.veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(18, 14, 12, 0.86) 0%, rgba(18, 14, 12, 0.42) 34%, rgba(18, 14, 12, 0) 66%),
    linear-gradient(180deg, rgba(18, 14, 12, 0.45) 0%, rgba(18, 14, 12, 0.02) 32%, rgba(18, 14, 12, 0.82) 100%);
  mix-blend-mode: multiply;
}

/* film grain over the photo — the faded-print half of the nostalgia */
.veil::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---- chrome -------------------------------------------------------- */

.clock,
.presence {
  position: absolute;
  top: clamp(20px, 4vw, 48px);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.clock {
  right: clamp(20px, 4vw, 48px);
  font-variant-numeric: tabular-nums;
}

.presence {
  left: clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(242, 228, 205, 0.6);
}

.presence strong {
  color: var(--amber);
  font-weight: 500;
}

.pulse {
  display: grid;
  place-items: center;
  width: 8px;
  height: 8px;
}

.pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(232, 163, 61, 0.6);
  animation: pulse 2.6s ease-out infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(232, 163, 61, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 163, 61, 0);
  }
}

.links {
  position: absolute;
  top: clamp(52px, 8vw, 92px);
  right: clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: rgba(242, 228, 205, 0.72);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}

.links a:hover {
  color: var(--amber);
  border-color: rgba(232, 163, 61, 0.5);
  transform: translateY(-1px);
}

.links svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.links b {
  font-weight: 400;
  opacity: 0.5;
}

/* ---- identity ------------------------------------------------------ */

.identity {
  max-width: 100%;
}

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(242, 228, 205, 0.46);
}

.identity h1 {
  margin: 12px 0 0;
  font-size: clamp(34px, 8.5vw, 96px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--cream);
}

.identity h1 em {
  font-style: normal;
  color: var(--amber);
}

/* ---- player -------------------------------------------------------- */

/* Her face also drifts right as the viewport widens (it sits at 33% of
   the image, and the image spans the full width here), so the card has
   to keep pace or she reappears past its right edge on 1920+ screens. */
.player-wrap {
  width: min(max(560px, 40vw), 100%);
}

.player {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px 20px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(26, 21, 18, 0.62);
  backdrop-filter: blur(14px);
}

.artwork {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 116px;
  height: 116px;
  padding: 12px 10px;
  border: 1px solid rgba(242, 228, 205, 0.16);
  border-radius: 8px;
  background: linear-gradient(160deg, #37291f, #1d1613);
  color: rgba(242, 228, 205, 0.62);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.artwork:hover {
  border-color: rgba(232, 163, 61, 0.55);
  transform: translateY(-2px);
}

.cassette {
  display: flex;
  align-items: center;
  gap: 5px;
}

.reel {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(242, 228, 205, 0.28);
  background: radial-gradient(circle, #120e0c 0 34%, #4b382a 35% 100%);
}

.reel i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--amber) 0 12%, transparent 12% 33%, var(--amber) 33% 45%, transparent 45% 66%, var(--amber) 66% 78%, transparent 78% 100%);
  animation: spin 2.4s linear infinite;
  animation-play-state: paused;
}

body.is-playing .reel i {
  animation-play-state: running;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tape-window {
  width: 24px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(242, 228, 205, 0.2);
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.28), rgba(18, 14, 12, 0.6));
}

.art-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-align: center;
}

.track-details {
  min-width: 0;
}

.track-name {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist {
  margin: 4px 0 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(242, 228, 205, 0.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--amber) 0 var(--progress, 0%),
    rgba(242, 228, 205, 0.16) var(--progress, 0%) 100%
  );
  cursor: pointer;
}

.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--amber);
}

.seek::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--amber);
}

.time {
  display: flex;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: rgba(242, 228, 205, 0.4);
}

.controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.controls button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: rgba(242, 228, 205, 0.72);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.controls button:hover {
  color: var(--amber);
  border-color: rgba(232, 163, 61, 0.5);
}

.controls .play {
  width: 46px;
  height: 46px;
  border-color: rgba(232, 163, 61, 0.55);
  color: var(--amber);
  font-size: 13px;
}

.controls .shuffle {
  margin-left: auto;
  font-size: 16px;
}

.controls .shuffle[aria-pressed="true"] {
  color: var(--amber);
  border-color: rgba(232, 163, 61, 0.5);
  background: rgba(232, 163, 61, 0.1);
}

.nudge {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(232, 163, 61, 0.72);
}

.nudge a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.credit {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 48px);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(242, 228, 205, 0.28);
  text-decoration: none;
  transition: color 0.2s;
}

.credit:hover,
.credit:focus-visible {
  color: rgba(232, 163, 61, 0.8);
}

.youtube-player {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- library ------------------------------------------------------- */

.library {
  width: min(520px, 92vw);
  max-height: 82vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #1d1714;
  color: var(--cream);
}

.library::backdrop {
  background: rgba(12, 9, 8, 0.72);
  backdrop-filter: blur(3px);
}

.library-panel {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  padding: 22px;
}

.library-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.library-heading h2 {
  margin: 8px 0 0;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--amber);
}

.library-heading button {
  border: 0;
  background: transparent;
  color: rgba(242, 228, 205, 0.5);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.library-heading button:hover {
  color: var(--amber);
}

.library ol {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.side-break {
  padding: 14px 6px 6px;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--amber-dim);
}

.side-break:first-child {
  padding-top: 4px;
}

.library li button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.library li button:hover {
  background: rgba(242, 228, 205, 0.05);
}

.library li button[data-active="true"] {
  background: rgba(232, 163, 61, 0.12);
}

.library li button[data-active="true"] strong,
.library li button[data-active="true"] .track-index {
  color: var(--amber);
}

.track-index {
  font-size: 10px;
  color: rgba(242, 228, 205, 0.34);
  font-variant-numeric: tabular-nums;
}

.library li span > strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.library li small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(242, 228, 205, 0.42);
}

.library li span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.library li time {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(242, 228, 205, 0.34);
}

.library-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(242, 228, 205, 0.38);
}

/* ---- small screens ------------------------------------------------- */

@media (max-width: 640px) {
  /* the stacked player card is taller */
  :root {
    --card-half: 165px;
  }

  /* everything but the clock runs down the middle of the phone */
  .deck {
    align-items: center;
  }

  /* links sit above the credit line rather than on top of it */
  .links {
    top: auto;
    right: 0;
    bottom: 58px;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .credit {
    display: block;
    right: 0;
    bottom: 22px;
    left: 0;
    text-align: center;
  }

  .identity {
    text-align: center;
  }

  .player {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .controls {
    justify-content: center;
  }

  /* the shuffle button no longer needs pushing to the far edge */
  .controls .shuffle {
    margin-left: 0;
  }

  .time {
    justify-content: center;
  }

  .nudge {
    text-align: center;
  }

  .track-details {
    width: 100%;
  }

  .player-wrap {
    margin-bottom: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel i,
  .pulse i {
    animation: none;
  }
}