:root {
  --ground: #0b0b0d;
  --ink: #ece6dc;
  --muted: #948d83;
  --line: #2a2725;
  --bar-off: #3a3633;
  --accent: #e5483f;
  --glow: 0.16;
  --lx: 70vw;
  --ly: 30vh;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The stage light: fixed layer under the content, position and strength set from app.js */
#light {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(640px circle at var(--lx) var(--ly),
              rgba(200, 40, 35, var(--glow)), rgba(11, 11, 13, 0) 65%);
}

.wrap, .bar { position: relative; z-index: 1; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.small { font-size: 12px; }
.label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Header */
.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding: 96px 0 56px;
}
.top h1 {
  margin: 0;
  font-family: "Special Elite", "Courier New", monospace;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.tagline { margin: 0; font-size: 13px; line-height: 1.8; text-align: right; }

/* Photo */
.hero { margin: 0; border: 1px solid var(--line); }
.hero img { display: block; width: 100%; height: 72vh; min-height: 420px; object-fit: cover; object-position: 50% 18%; }

/* Now playing */
.now { padding: 88px 0 24px; }
.now h2 {
  margin: 12px 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
}

.timeline { position: relative; margin-top: 40px; }
.notes { position: relative; height: 0; }
.timeline.has-notes { padding-top: 72px; }
.note {
  position: absolute;
  top: -72px;
  height: calc(72px + 140px);
  border-left: 1px solid var(--bar-off);
  padding-left: 8px;
  pointer-events: none;
}
.note.passed { border-left-color: var(--accent); }
.note span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--ground);
  padding: 2px 6px 2px 0;
}

.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 140px;
  cursor: pointer;
  outline-offset: 6px;
}
.wave:focus-visible { outline: 1px solid var(--accent); }
.wave i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
  background: var(--bar-off);
  transition: height 0.4s ease;
}
.wave i.on { background: var(--accent); }
.wave.loading i { opacity: 0.5; }

/* Logbook */
.log { padding: 72px 0 160px; }
.log .label { padding-bottom: 20px; }
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks button {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  padding: 28px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.tracks button:hover .t-title { color: #fff; }
.tracks button:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.tracks li.current button { border-top-color: var(--accent); }
.t-meta { flex: 0 0 150px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--muted); }
.t-title { flex: 1 1 320px; font-family: "Instrument Serif", Georgia, serif; font-size: 38px; line-height: 1.1; }
.t-with { flex: 1 1 220px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--muted); }

/* Player bar */
.bar {
  position: sticky;
  bottom: 0;
  background: rgba(11, 11, 13, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.progress { height: 2px; background: var(--line); }
#progress { height: 2px; width: 0; background: var(--accent); }
.bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.play-btn, .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.play-btn { width: 48px; height: 48px; border: 1px solid var(--accent); }
.icon-btn { width: 44px; height: 44px; border: 0; color: var(--muted); }
.icon-btn:hover { color: var(--ink); }
.play-btn svg, .icon-btn svg { width: 16px; height: 16px; }
.i-pause { display: none; }
body.playing .i-play { display: none; }
body.playing .i-pause { display: block; }
.bar-text { flex: 1 1 auto; min-width: 0; }
.bar-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .bar-inner { padding: 12px 16px; gap: 8px; }
  .top { padding-top: 64px; }
  .tagline { text-align: left; }
  .t-meta { flex-basis: 100%; }
  .note span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wave i { transition: none; }
}