:root {
  --blue: #3fc6ff;
  --pink: #f0a8c4;
  --bg-dark: #0b0c10;
  --text-main: #f2f0ee;
  --text-dim: #b8b6bd;

  /* Grit controls — adjust these two values to change the noise texture */
  --grit-opacity: 0.55;  /* 0 = invisible, 1 = fully opaque */
  --grit-size: 180px;    /* smaller = finer grain, larger = chunkier grain */
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 12% 8%, rgba(63, 198, 255, 0.55), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(240, 168, 196, 0.45), transparent 48%),
    radial-gradient(circle at 60% 95%, rgba(63, 198, 255, 0.3), transparent 55%),
    radial-gradient(circle at 20% 85%, rgba(240, 168, 196, 0.2), transparent 50%),
    linear-gradient(160deg, #0a0a0d 0%, #121016 40%, #17131a 70%, #0a0a0d 100%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 60px;
  position: relative;
  overflow-x: hidden;
}

/* noise texture — the only source of grit */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grit-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 3.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: var(--grit-size) var(--grit-size);
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo row */
.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 12px;
  margin-bottom: 40px;
}

.logo-slot {
  width: clamp(56px, 14vw, 84px);
  height: clamp(56px, 14vw, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 11px;
  text-align: center;
  padding: 6px;
  border-radius: 50%;
  overflow: hidden;
}

.logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.logo-x {
  font-size: 22px;
  color: var(--text-dim);
  font-weight: 300;
  opacity: 0.7;
}

/* Title + description */
.hero {
  margin-bottom: 48px;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.2rem);
  margin: 0 0 16px;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.hero p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 auto;
  text-align: left;
}

/* Track title/description on the background, above the card */
.track-info {
  text-align: center;
  margin: 40px 0 20px;
}

.track-header {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.track-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: left;
  color: var(--text-main);
}

.track-desc {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.5;
  text-align: left;
  margin: 0 auto;
}

/* Player wrapper (no card styling — sits flush on the background) */
.track-card {
  width: 100%;
  margin-bottom: 40px;
}

.player-slot {
  width: 100%;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

audio {
  width: 100%;
  margin-top: 14px;
  filter: invert(0.9) hue-rotate(180deg);
  border-radius: 8px;
}

footer {
  margin-top: 48px;
  font-size: 0.78rem;
  color: rgba(184, 182, 189, 0.5);
  text-align: center;
}

/* Hyperlinks — styled to match the site instead of default blue */
a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 198, 255, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--pink);
  border-bottom-color: rgba(240, 168, 196, 0.7);
}

a:visited {
  color: var(--pink);
}

a:active {
  opacity: 0.8;
}