@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --paper: #100d0a;
  --ink: #fff3e4;
  --muted: #cfbba6;
  --dark: #1b140e;
  --mint: #efc995;
  --line: #493320;
  --gold-gradient: linear-gradient(135deg, #e0b47c, #d6a363 58%, #bf864c);
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(ellipse at 90% 0, #a96d361a, transparent 65%), var(--paper);
}

header { height: 88px; }
.brand { color: var(--mint); font-size: 16px; letter-spacing: 0; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: 0; }
.brand-icon {
  width: 40px;
  height: 40px;
  flex: none;
  background: url('./misha-radio-icon.svg') center / contain no-repeat;
}
.brand-icon i { display: none; }
.dot, .cover-tag .dot { background: #e0b47c; }
.eyebrow, .micro, .about-heading .micro { color: var(--mint); font-size: 10px; }

h1 {
  font-size: clamp(42px, 5.5vw, 76px);
  font-weight: 800;
  letter-spacing: -.055em;
}
h1 em { color: var(--mint); font: inherit; }
.text-link {
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #805630;
  border-radius: 10px;
  color: var(--mint);
  font-size: 13px;
}
.text-link:hover { background: #362518; opacity: 1; }
.text-link span { font-size: 16px; }

.player {
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  box-shadow: 0 24px 64px #0008;
}
.cover { aspect-ratio: 2; background: #080605; border-bottom: 1px solid var(--line); }
.cover > img { display: block; object-position: center 67%; }
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #100d0af2, transparent 68%);
  pointer-events: none;
}
.cover-tag, .cover-caption, .cover-number { z-index: 1; }
.cover-tag, .cover-number {
  padding: 7px 10px;
  border: 1px solid #805630;
  border-radius: 20px;
  background: #18120ded;
  color: var(--mint);
}
.cover-number { top: 22px; }
.cover-caption { font-family: inherit; font-weight: 700; font-size: clamp(20px, 3vw, 28px); }
.cover-caption small { font-family: inherit; font-size: 9px; }

.track-row h2 { font-weight: 700; }
.track-row p, #status, .quality, .quality small, .volume-row span {
  color: var(--muted);
  font-size: 11px;
}
.volume-row svg { fill: var(--mint); }
.volume-row { border-color: var(--line); }
#play { background: var(--gold-gradient); color: #160e07; }
#play:hover { background: var(--mint); }
.channel-heading button, #channel, .channels button {
  background: #18120d;
  border-color: #68482e;
  border-radius: 9px;
  color: var(--ink);
}
.channel-heading button { min-width: 36px; min-height: 34px; }
.channels button { font-size: 12px; min-height: 36px; }
.channels button[aria-pressed="true"] {
  color: #160e07;
  border-color: #e4bc87;
  background: var(--gold-gradient);
  font-weight: 700;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: #e0b47c;
}
.about-heading h2 { font-weight: 700; }
.about-copy a, footer a { color: var(--mint); text-decoration: underline; }
footer { font-size: 11px; }

@media (max-width: 900px) {
  .hero { gap: 32px; }
}
@media (max-width: 640px) {
  .page { padding-inline: 16px; }
  header { height: auto; min-height: 76px; gap: 12px; }
  .brand { font-size: 14px; }
  nav { flex-wrap: wrap; gap: 6px 12px; justify-content: end; }
  .hero { padding-top: 32px; gap: 24px; }
  .player { max-width: none; }
  .cover > img { object-position: center 65%; }
  .cover-tag, .cover-number { top: 14px; }
  .cover-tag, .cover-caption { left: 15px; }
  .cover-number { right: 15px; }
  .cover-caption { bottom: 15px; }
  .player-body { padding: 16px; }
}