/* ── Self-hosted fonts ── */
@font-face {
  font-family: 'EB Garamond';
  src: url('EBGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('EBGaramond-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('IBMPlexMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── Grain texture overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Typography: serif headings (EB Garamond) ── */

/* Site title on homepage, release titles on release pages */
h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Track titles */
a.title {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Release / track description text */
.text p {
  font-size: 0.68rem;
  color: var(--fg-3);
  line-height: 1.7;
}

/* Logo text in header */
#logo > span {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ── Blob animation seed values (overridden by blob-anim.js at runtime) ── */
:root {
  --blob1-h: 62;
  --blob2-h: 320;
  --blob1-x: 35%;
  --blob1-y: 30%;
  --blob2-x: 78%;
  --blob2-y: 70%;
}

/* ── Accent color: paler amber ── */
:root {
  --bg-acc: oklch(60% 14% 62);
  --bg-acc-overlay: oklch(60% 14% 62 / 80%);
  --mg-acc: oklch(60% 14% 62);
  --mg-acc-overlay: oklch(60% 14% 62 / 80%);
  --fg-acc: oklch(18% 4% 62);
}

/* ── Warm cream background palette (override faircamp's cool grey-purple) ── */
:root {
  --bg-1: oklch(93.5% 0.9% 78);
  --bg-1-90: oklch(93.5% 0.9% 78 / 90%);
  --bg-1-overlay: oklch(93.5% 0.9% 78 / 80%);
  --bg-2: oklch(87% 1.6% 78);
  --bg-2-overlay: oklch(87% 1.6% 78 / 80%);
  --bg-3: oklch(77% 2.2% 78);
  --bg-mg: oklch(60% 2.5% 78);
}

/* ── Typography: monospace UI (IBM Plex Mono) ── */

body {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 300;
  background-image:
    radial-gradient(ellipse 70% 55% at var(--blob1-x) var(--blob1-y), oklch(74% 13% var(--blob1-h) / 0.75) 0%, transparent 75%),
    radial-gradient(ellipse 55% 65% at var(--blob2-x) var(--blob2-y), oklch(72% 10% var(--blob2-h) / 0.65) 0%, transparent 75%);
}

/* Nav, browse, labels */
.browse,
.label,
.number,
.time,
.release_artists,
.faircamp_signature {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 300;
  letter-spacing: 0.06em;
}

/* ── Homepage layout ── */

.page_grid {
  min-height: 0;
}

/* Title section: compact, aligned with release grid */
.page_split:not(:has(.cover)) {
  min-height: 0;
}

.page_split:not(:has(.cover)) .abstract {
  flex-grow: 0;
  width: min(48rem, calc(100vw - var(--page-margin-h) * 2));
  max-width: none;
}

/* Hide only the actions row (copy link, subscribe) */
.page_split:not(:has(.cover)) .actions {
  display: none;
}

/* Homepage h1: large serif title */
.page_split:not(:has(.cover)) h1 {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin-bottom: 0;
}

/* Tagline below title */
.page_split:not(:has(.cover)) h1::after {
  content: 'experimental electronic music';
  display: block;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 0.8rem;
}


/* ── Release cover art: slightly transparent ── */
.release img {
  opacity: 0.82;
}

/* ── Release card titles: clean serif, no box ── */
.release > a:last-child {
  display: block;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 300;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  background: none;
  padding: 0.3em 0 0;
  margin-top: 0.3rem;
}

/* ── Docked player: float as centered card at top ── */
.docked_player {
  left: 50%;
  right: auto;
  top: 1rem;
  bottom: auto;
  transform: translateX(-50%);
  width: min(46rem, calc(100vw - 2rem));
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}

.docked_player .elements {
  background: oklch(97% 0.6% 78 / 75%);
  backdrop-filter: blur(12px) brightness(110%);
  -webkit-backdrop-filter: blur(12px) brightness(110%);
  display: flex;
  width: 100%;
}

.docked_player .elements .track_info {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  position: static;
  bottom: auto;
}

.docked_player .elements .time {
  flex: 0 0 auto;
  padding-right: 0.8rem;
  margin-left: 0;
  font-size: 0.72rem;
}

.track .time {
  font-size: 0.72rem;
}

.docked_player .timeline {
  order: 1;
  height: 2px;
  margin: 0;
  background: oklch(97% 0.6% 78 / 75%);
}

.docked_player .timeline .base,
.docked_player .timeline .progress {
  bottom: 0;
  height: 100%;
}

.docked_player .timeline:hover > div,
.docked_player .timeline.focus:not(.focus_from_click) > div {
  bottom: 0;
  height: 100%;
}

/* Anchor content to top so player activation never shifts anything */
main {
  align-content: start;
}

/* Let footer follow content rather than pinning to viewport bottom */
/* position: relative + z-index keeps content above the solar canvas (z-index: 0) */
.layout {
  min-height: 0;
  position: relative;
  z-index: 1;
}

body.player_active footer {
  margin-bottom: 0;
}

/* ── Hide copy link buttons ── */
button[data-copy] {
  display: none;
}

/* ── Track playback button ── */
.track .track_playback,
.track .track_playback img {
  border-radius: 0;
}

.track .track_playback {
  font-size: 0.85rem;
  opacity: 0.72;
}

.track .track_playback:hover {
  opacity: 1;
}

.js_enabled .track:not(.active) .track_playback {
  background: var(--bg-2-overlay);
  color: var(--fg-2);
}

.js_enabled .track:not(.active) .track_playback:hover {
  background: var(--bg-3);
  color: var(--fg-1);
}

/* ── Listen / Download buttons ── */
.actions.primary {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 0.5rem;
}

.actions.primary a,
.actions.primary button {
  padding: 0.28em 0.9em 0.32em;
  border-radius: 0;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 300;
}

/* Listen: solid accent pill */
.actions.primary > .emphasized {
  background: var(--bg-acc);
  color: var(--fg-acc);
  opacity: 0.72;
}

.actions.primary > .emphasized:hover {
  opacity: 1;
}

/* Download: ghost outline */
.actions.primary > a {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bg-3);
  color: var(--fg-2);
}

.actions.primary > a:hover {
  background: var(--bg-2);
  box-shadow: none;
  color: var(--fg-1);
}

/* ── Footer: small text ── */
footer {
  font-size: 0.66rem;
}

/* ── Hide header elements ── */
header #logo svg,
header #logo > span,
header .browse {
  display: none;
}