/* ORIGIN — a placeholder page for now. Minimal, self-contained like
   hues.css / lines.css: loads observed.css for shared tokens (--pad,
   --quiet, --dormant, --rule, --serif, --ease) and restates its own
   head/foot rules locally so this page can change independently. */

.eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#a4a399; }

.origin {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(60px, 14vh, 140px) var(--pad) clamp(60px, 10vh, 120px);
}

.origin .eyebrow { margin: 0 0 clamp(20px, 3vh, 34px); }

.origin-placeholder {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--quiet);
}

.origin-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 0 var(--pad) 40px;
  font-size: 12px;
  color: #a4a399;
}

.origin-foot a { display: inline-block; padding: 12px 0; }

.rights {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--dormant);
  white-space: nowrap;
}

/* Vinyl — the play control, a spinning picture disc using the single's own
   cover art. Spins while the track plays (paused/running so it never
   jumps on resume) and sits still otherwise. */

.origin-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.origin-player a { padding: 0; }

.vinyl {
  position: relative;
  width: 204px;
  height: 204px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: #0d0d0a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  animation: vinyl-spin 3.2s linear infinite;
  animation-play-state: paused;
}

.vinyl[aria-pressed="true"] { animation-play-state: running; }

.vinyl:hover, .vinyl:focus-visible { box-shadow: 0 2px 12px rgba(0, 0, 0, .5), 0 0 0 1px var(--rule); }

.vinyl-cover {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background-image: url('https://lastfm-img.freetls.fastly.net/i/u/ar0/08e66813b105906d718c6741cdaa2c5e.jpg');
  background-size: cover;
  background-position: center;
}

.vinyl-grooves {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 7%, rgba(0, 0, 0, .16) 7% 7.6%, transparent 7.6% 13%);
  pointer-events: none;
}

.vinyl-hole {
  position: absolute;
  inset: 46%;
  border-radius: 50%;
  background: #0d0d0a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

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

@media (prefers-reduced-motion: reduce) {
  .vinyl { animation: none; }
}