/* Tasty TV — the set.
   Tokens, fonts and textures are the web client's "Record Store Editorial" system
   (packages/web/src/b/styles/variables.css), so the three surfaces read as one brand. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&family=Bebas+Neue&display=swap');

:root {
  --b-black: #0a0a0a;
  --b-white: #f8f7f4;
  --b-red: #E63946;
  --b-cream: #f0ebe3;
  --b-army-green: #4a5d23;
  --b-purple: #6b4c91;

  --b-font-display: 'Bebas Neue', sans-serif;
  --b-font-serif: 'Instrument Serif', serif;
  --b-font-mono: 'Space Mono', monospace;
  --b-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --bezel: 64px;
  --marquee: 46px;
}

* { box-sizing: border-box; }

/* `hidden` is a UA-stylesheet rule, so any author `display` beats it. Several elements here
   are both `hidden` and laid out with flex/grid — without this they are never actually hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--b-black);
  color: var(--b-white);
  font-family: var(--b-font-mono);
  overflow: hidden;
}

/* ---------- power-on ---------- */
#power {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem 1rem 1.25rem;
}
body[data-screen="on"] #power { display: none; }
#power-logo {
  width: min(18vmin, 150px);
  height: auto;
  animation: spin 24s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #power-logo { animation: none; } }

.wordmark {
  font-family: var(--b-font-display);
  font-size: clamp(3.5rem, 14vw, 8rem);
  letter-spacing: -0.01em;
  line-height: 0.85;
  margin: 0.5rem 0 0;
  text-transform: uppercase;
}
/* TastyMusic TV — "Music" set smaller so the eye reads Tasty / TV, with Music tucked between. */
.wordmark-music {
  font-size: 0.42em;
  letter-spacing: 0.16em;
  vertical-align: 0.42em;
  margin: 0 0.12em 0 0.06em;
  opacity: 0.82;
}
.wordmark-tv { color: var(--b-red); margin-left: 0.1em; }

.tagline {
  font-family: var(--b-font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  opacity: 0.75;
  margin: 0 0 0.75rem;
}

/* The call to action, and the list it points at. One column, on the dark; the rows are the guide's
   rows with the light taken away, so a channel looks the same wherever it is picked. */
.power-call {
  font-family: var(--b-font-display);
  font-size: clamp(1.3rem, 5vw, 2.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-red);
  margin: 1rem 0 0.2rem;
}
#power-search {
  width: min(100%, 640px); font-family: var(--b-font-mono); font-size: 0.85rem;
  padding: 0.6rem 1rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--b-white); outline: none;
}
#power-search:focus { border-color: var(--b-red); }
#power-search::placeholder { color: rgba(255, 255, 255, 0.45); }
/* The list is a panel that scrolls inside the screen. The logo, the call and the search stay in
   view above it — a page of six hundred rows is a table with a logo on top, not a screen. */
#power-list {
  width: min(100%, 1280px); text-align: left; margin-top: 0.4rem;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
/* A short screen keeps the list in view by giving up header before it gives up rows. */
@media (max-height: 820px) {
  #power { gap: 0.35rem; padding-top: 1rem; }
  #power-logo { width: 84px; }
  #power .wordmark { font-size: clamp(2.4rem, 7vw, 4rem); }
  #power .tagline { display: none; }
  .power-call { font-size: clamp(1.1rem, 3.5vw, 1.5rem); margin: 0.5rem 0 0.1rem; }
}
/* A wide screen gets the list across it rather than a strip down the middle of it. */
@media (min-width: 900px) {
  #power-logo { width: min(26vmin, 220px); }
  #power-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  #power .chan:nth-child(2) { border-top: 0; }
  #power .chan--last { grid-column: 1 / -1; }
}
@media (min-width: 1400px) {
  #power-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #power .chan:nth-child(3) { border-top: 0; }
}
#power .chan { border-top-color: rgba(255, 255, 255, 0.12); color: var(--b-white); }
#power .chan:first-child { border-top: 0; }
#power .chan:hover { background: rgba(255, 255, 255, 0.06); }
#power .chan-info { border-left-color: rgba(255, 255, 255, 0.12); }
#power .chan[aria-current="true"] { background: transparent; color: var(--b-white); }
#power .chan--last, #power .chan--last:hover { background: var(--b-red); color: var(--b-white); }
#power .chan--last .num, #power .chan--last .chan-info { color: var(--b-white); }
#power .chan--last .chan-info { border-left-color: rgba(255, 255, 255, 0.35); }
#power .chan--last .chan-info:hover, #power .chan--last .chan-info:focus-visible { background: var(--b-black); }
#power .chan--last .name::before {
  content: attr(data-why); display: block; font-size: 0.55rem; letter-spacing: 0.3em; opacity: 0.85;
}
#power .chan--last .now { opacity: 0.85; }

.hint {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0;
}

/* ---------- the set ---------- */
#set { position: fixed; inset: 0; z-index: 2; display: grid; grid-template-rows: var(--marquee) 1fr var(--bezel); }

/* 16:9 letterbox. The stage owns this box; the player fills it and nothing covers it. */
/* The stage is sized against the *screen's* real box, not a sum of guesses about the window.
   `100vh` was wrong twice over: it ignores the marquee and bezel unless you keep subtracting them
   by hand, and on mobile Safari it means the window with the browser chrome pretending not to be
   there. Container units ask the element that actually holds it. */
#screen {
  display: grid; place-items: center; min-height: 0; background: #000;
  container-type: size; container-name: screen;
}
#stage {
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100cqh;
}
@supports not (width: 1cqw) {
  #stage { width: min(100%, calc((100vh - var(--bezel) - var(--marquee)) * 16 / 9)); max-height: 100%; }
}
/* The IFrame API replaces our div with an iframe carrying width/height attributes; override both. */
#stage > iframe, #stage > div { width: 100% !important; height: 100% !important; border: 0; display: block; }

/* ---------- VJ card ---------- */
#vj {
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100cqh;
  background: var(--b-cream);
  color: var(--b-black);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#vj::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-14deg, var(--b-red) 0 14px, transparent 14px 34px);
  opacity: 0.09;
}
#vj img {
  width: min(16vmin, 110px);
  height: auto;
  animation: spin 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) { #vj img { animation: none; } }

.vj-line {
  font-family: var(--b-font-display);
  font-size: clamp(1.8rem, 5.5vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0.6rem 0 0;
  max-width: 22ch;
}
.vj-next {
  font-family: var(--b-font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.4rem);
  margin: 0;
  opacity: 0.65;
}

/* ---------- bezel: everything that is not the video lives here ---------- */
#bezel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
  background: var(--b-black);
  border-top: 1px solid #1c1c1c;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
}
.bug { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.bug img { width: 34px; height: 34px; display: block; }
.bug-live { font-family: var(--b-font-display); font-size: 1rem; letter-spacing: 0.18em; }
.bug .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--b-red); margin-right: 0.4rem; vertical-align: middle;
  animation: pulse 2s infinite;
}
.bug-ch { font-family: var(--b-font-display); font-size: 1.1rem; color: var(--b-red); letter-spacing: 0.1em; }
@keyframes pulse { 50% { opacity: 0.2; } }

.sound-control { flex: 0 0 auto; display: flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
#sound {
  font-family: var(--b-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 1rem 0.25rem;
  cursor: pointer;
  white-space: nowrap;
}
/* Muted is a problem, so it leans forward. Sound on is just a state, so it sits back. */
#sound[data-muted="true"] {
  color: var(--b-white); background: var(--b-red);
  animation: insist 1.6s var(--b-ease-out-expo) infinite;
}
#sound[data-muted="false"] {
  color: #b3aea6; background: transparent; border: 1px solid #55504a; animation: none;
}
#sound[data-muted="false"]:hover { color: var(--b-white); border-color: var(--b-white); }
#sound[data-blocked="true"][data-muted="true"] { animation: none; background: #7d2129; }

#volume {
  width: 88px; height: 4px; cursor: pointer; accent-color: var(--b-red);
  background: #3a3a3a; border-radius: 999px; appearance: none;
}
#volume::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--b-white); cursor: pointer;
}
#volume::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--b-white);
}

.panel-sub {
  font-family: var(--b-font-mono); font-size: 0.55rem; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.5; margin: 0.15rem 0 0;
}
#guide hgroup, #browse hgroup { margin: 0; }

/* Restored: an earlier edit replaced everything between `#sound` and `#channel-flash`, which
   quietly took the ticker, the controls and the keyframes with it. */
@keyframes insist {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55); }
  50% { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(230, 57, 70, 0); }
}
@media (prefers-reduced-motion: reduce) { #sound[data-muted="true"] { animation: none; } }

.ticker {
  flex: 1 1 auto; min-width: 0;
  color: #b3aea6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticker b { color: var(--b-white); font-weight: 700; }
.ticker .next { color: #8f8b83; }

/* `margin-left: auto` rather than relying on the ticker growing: the ticker shrinks to its text
   when the text is short, and the controls were left stranded in the middle of the bezel. */
.keys {
  flex: 0 0 auto; margin-left: auto;
  display: flex; align-items: center; gap: 0.4rem;
  color: #8f8b83; white-space: nowrap;
}
.keys-label { letter-spacing: 0.14em; }
.keys button {
  font: inherit; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--b-white); background: #1d1d20;
  border: 1px solid #55504a; border-radius: 4px; padding: 0.22rem 0.5rem; cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.keys button:hover, .keys button:focus-visible { background: var(--b-red); border-color: var(--b-red); }
#key-up span, #key-down span { display: block; line-height: 1; }

/* The shortcut rides on the control rather than in a separate legend, so pressing it and
   clicking it are visibly the same thing. */
.keys button kbd {
  font: inherit; font-size: 0.85em; margin-left: 0.4em; padding: 0 0.28em;
  color: #cfcac2; background: #000; border: 1px solid #55504a; border-radius: 3px;
}
.keys button:hover kbd, .keys button:focus-visible kbd { color: var(--b-white); border-color: rgba(255,255,255,0.5); }

#channel-flash {
  position: fixed;
  left: 1.25rem;
  bottom: calc(var(--bezel) + 1.25rem);
  z-index: 3;
  font-family: var(--b-font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-white);
  background: rgba(10, 10, 10, 0.88);
  border-left: 5px solid var(--b-red);
  padding: 0.3rem 1.2rem 0.15rem;
  opacity: 0;
  transition: opacity 500ms var(--b-ease-out-expo);
  pointer-events: none;
}
#channel-flash.show { opacity: 1; transition-duration: 90ms; }

/* ---------- the guide's pull tab: a sleeve spine in a crate ---------- */
#guide-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 5;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0.45rem 1.2rem;
  background: var(--b-cream);
  color: var(--b-black);
  border: 0;
  border-right: 6px solid var(--b-red);
  border-radius: 6px 0 0 6px;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  font-family: var(--b-font-display);
  transition: padding-right 200ms var(--b-ease-out-expo), background 200ms var(--b-ease-out-expo);
  animation: nudge 2.6s var(--b-ease-out-expo) 1.2s 3;
}
#guide-tab .label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.22em;
  font-size: 1.05rem;
}
#guide-tab .chev { color: var(--b-red); font-size: 1.3rem; line-height: 0.6; }

#guide-tab:hover, #guide-tab:focus-visible { padding-right: 1.1rem; background: #fff; }
#guide-tab:hover .chev { animation: beckon 700ms infinite alternate; }

/* Slide out and settle, a few times, so it is noticed once and then left alone. */
@keyframes nudge {
  0%, 82%, 100% { transform: translateY(-50%) translateX(0); }
  88% { transform: translateY(-50%) translateX(-11px); }
  94% { transform: translateY(-50%) translateX(-4px); }
}
@keyframes beckon { to { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { #guide-tab { animation: none; } }

/* Only on the set, and never while the crate is already open. */
body[data-screen="off"] #guide-tab, body[data-guide="open"] #guide-tab { display: none; }

/* ---------- guide ---------- */
#guide {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 6;
  width: min(440px, 100%);
  background: var(--b-cream);
  color: var(--b-black);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.7);
}
#guide header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 3px solid var(--b-black);
}
#guide h2 {
  font-family: var(--b-font-display); font-size: 2.2rem;
  letter-spacing: 0.02em; margin: 0; text-transform: uppercase;
}
#guide-close { background: none; border: 0; font: inherit; cursor: pointer; font-size: 1.1rem; }
#guide-list { overflow-y: auto; flex: 1; }
.guide-foot {
  font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase;
  padding: 0.85rem 1.4rem; border-top: 1px solid #d7d1c4; opacity: 0.5;
}

.group-name {
  font-family: var(--b-font-display); letter-spacing: 0.18em; font-size: 1rem;
  padding: 1rem 1.4rem 0.35rem; color: var(--b-red); text-transform: uppercase;
}
.guide-tools {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.4rem; border-bottom: 1px solid #d7d1c4;
}
#guide-search {
  flex: 1; min-width: 0; font-family: var(--b-font-mono); font-size: 0.78rem;
  padding: 0.5rem 0.8rem; border: 1px solid #c9c2b4; border-radius: 999px;
  background: transparent; color: inherit; outline: none;
}
#guide-search:focus { border-color: var(--b-red); }
#guide-search::placeholder { color: #9b958a; }
#guide-browse {
  font-family: var(--b-font-display); font-size: 0.72rem; letter-spacing: 0.16em;
  background: var(--b-black); color: var(--b-cream); border: 0; border-radius: 999px;
  padding: 0.5rem 0.9rem 0.4rem; cursor: pointer; white-space: nowrap;
}
#guide-browse:hover { background: var(--b-red); }
.guide-empty {
  font-family: var(--b-font-mono); font-size: 0.72rem; opacity: 0.5; padding: 1.6rem 1.4rem;
}

.chan {
  display: flex; align-items: stretch; border-top: 1px solid #d7d1c4;
  transition: background 160ms var(--b-ease-out-expo);
}
.chan:hover { background: #e4ddd0; }
.chan-tune {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 2.8rem 1fr; gap: 0.8rem;
  align-items: baseline; text-align: left; background: none; border: 0; color: inherit;
  padding: 0.8rem 0.5rem 0.8rem 1.4rem; font: inherit; cursor: pointer;
}
.chan-info {
  flex: 0 0 4rem; background: none; border: 0; border-left: 1px solid #d7d1c4;
  color: var(--b-red);
  font-family: var(--b-font-display); font-size: 0.85rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0;
  cursor: pointer; transition: background 140ms, color 140ms;
}
.chan-info:hover, .chan-info:focus-visible { background: var(--b-red); color: var(--b-white); }
.chan[aria-current="true"] .chan-info { color: var(--b-cream); border-left-color: #4a4a4a; }
.chan[aria-current="true"] { background: var(--b-black); color: var(--b-cream); }
.chan .num { font-family: var(--b-font-display); font-size: 1.4rem; color: var(--b-red); }
.chan .name {
  font-family: var(--b-font-display); font-size: 1.3rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.chan .now {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; font-family: var(--b-font-mono); font-size: 0.62rem; line-height: 1.45;
  letter-spacing: 0.06em; opacity: 0.6; text-transform: none; margin-top: 0.25rem;
}

/* ---------- textures ---------- */
/* The brand's texture is broad planes of colour crossing each other at shallow angles — not
   lines. Geometry taken from tastymusic.app so the surfaces read as one thing: each wedge is
   most of the viewport tall, and they lean opposite ways so they overlap rather than stack. */
.stripes { pointer-events: none; }
.stripe {
  position: fixed; width: 320%; left: -110%;
  pointer-events: none; z-index: 1; mix-blend-mode: screen;
  transform-origin: 50% 50%;
}
.stripe--green-1 { background: var(--b-army-green); height: 130vh; top: -46vh; transform: rotate(-12deg); opacity: 0.15; }
.stripe--purple  { background: var(--b-purple);     height: 94vh;  top: 15vh;  transform: rotate(8deg);   opacity: 0.12; }
.stripe--green-2 { background: var(--b-army-green); height: 76vh;  top: 57vh;  transform: rotate(-6deg);  opacity: 0.10; }
body[data-screen="on"] .stripe { display: none; }

#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 10000; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  :root { --bezel: 54px; }
  .keys { display: none; }
  .bug img { width: 26px; height: 26px; }
}

/* ---------- browse: search, and the lineage walk ---------- */
#browse {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: var(--b-cream);
  color: var(--b-black);
  display: flex;
  flex-direction: column;
}
#browse header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.6rem; border-bottom: 3px solid var(--b-black);
}
#browse h2 {
  font-family: var(--b-font-display); font-size: 2.2rem;
  letter-spacing: 0.02em; margin: 0; text-transform: uppercase;
}
#browse-close { background: none; border: 0; font: inherit; font-size: 1.1rem; cursor: pointer; }

#browse-search {
  font-family: var(--b-font-mono); font-size: 1rem;
  padding: 0.9rem 1.6rem; border: 0; border-bottom: 1px solid #d7d1c4;
  background: transparent; color: var(--b-black); outline: none;
}
#browse-search::placeholder { color: #9b958a; }

#browse-body { overflow: auto; flex: 1; padding: 1.2rem 1.6rem 2rem; }
.browse-foot {
  font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.85rem 1.6rem; border-top: 1px solid #d7d1c4; opacity: 0.5;
}
.browse-foot kbd { font: inherit; border: 1px solid #c9c2b4; border-radius: 3px; padding: 0 4px; }

/* search results */
.hit {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid #ded8cb; padding: 0.7rem 0; font: inherit; cursor: pointer;
}
.hit:hover { background: #e9e3d6; }
.hit-name { font-family: var(--b-font-display); font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; }
.hit-live { color: var(--b-red); font-size: 0.6rem; letter-spacing: 0.2em; margin-left: 0.6rem; }
.hit-desc { display: block; font-size: 0.7rem; opacity: 0.6; margin-top: 0.15rem; }

/* the lineage walk */
.genre-page { display: flex; flex-direction: column; gap: 0.9rem; }
.genre-head { display: flex; flex-direction: column; gap: 0.35rem; }
.genre-head-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  border-bottom: 1px solid #ded8cb; padding-bottom: 0.8rem;
}
.genre-head-line .node--here { flex: 1 1 auto; min-width: 0; margin: 0; }
.genre-head .crumbs { justify-content: flex-start; }

.about {
  border-top: 1px solid #ded8cb; padding-top: 1.2rem; margin-top: 0.6rem;
  scroll-margin-top: 1rem;
}
.about-title {
  font-family: var(--b-font-display); font-size: 1.5rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 0.6rem;
}
.about .here-desc { max-width: 62ch; margin: 0; }
.about .lineage-note { margin-top: 0.8rem; }

.lineage { display: grid; gap: 0.9rem; justify-items: center; text-align: center; }
.lineage-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.lineage-label {
  font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase;
  opacity: 0.45; margin-bottom: -0.35rem;
}
.node {
  font-family: var(--b-font-display); font-size: 1.05rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: transparent; cursor: pointer;
  border: 1px solid #c9c2b4; border-radius: 999px; padding: 0.35rem 0.9rem 0.25rem;
  transition: background 140ms var(--b-ease-out-expo), border-color 140ms;
}
.node:hover { background: var(--b-black); color: var(--b-cream); border-color: var(--b-black); }
.node[disabled] { opacity: 0.4; cursor: default; }
.node[disabled]:hover { background: transparent; color: inherit; border-color: #c9c2b4; }

.node--here {
  font-family: var(--b-font-display); font-size: 2.4rem; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0.1rem 0 0;
}

.lineage-rule { width: 1px; height: 18px; background: #c9c2b4; }

.here-desc {
  font-family: var(--b-font-serif); font-size: 1.05rem; line-height: 1.5;
  max-width: 46ch; opacity: 0.8; margin: 0.2rem 0 0.4rem;
}
.tune-in {
  font-family: var(--b-font-display); font-size: 1.1rem; letter-spacing: 0.22em;
  background: var(--b-red); color: var(--b-white); border: 0; border-radius: 999px;
  padding: 0.5rem 1.8rem 0.4rem; cursor: pointer;
}
.tune-in[disabled] { background: #c9c2b4; cursor: default; }

/* The quieter of the two things you can do from here, so it is outlined rather than filled. */
.about-jump {
  font-family: var(--b-font-display); font-size: 0.95rem; letter-spacing: 0.18em;
  text-transform: uppercase; white-space: nowrap;
  background: transparent; color: inherit; border: 2px solid currentColor; border-radius: 999px;
  padding: 0.4rem 1.2rem 0.3rem; cursor: pointer; opacity: 0.75;
  transition: background 160ms var(--b-ease-out-expo), color 160ms, opacity 160ms;
}
.about-jump:hover, .about-jump:focus-visible {
  background: var(--b-black); color: var(--b-cream); opacity: 1;
}

@media (max-width: 640px) { .node--here { font-size: 1.6rem; } }

/* ---------- the browser's furniture ---------- */
.browse-actions { display: flex; align-items: center; gap: 1rem; }
#browse-map {
  font-family: var(--b-font-display); font-size: 0.75rem; letter-spacing: 0.18em;
  background: var(--b-red); color: var(--b-white); border: 0; border-radius: 999px;
  padding: 0.45rem 1rem 0.35rem; cursor: pointer;
}
#browse-map:hover { background: var(--b-black); }

/* how you got here */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; justify-content: center; }
.crumb {
  font-family: var(--b-font-mono); font-size: 0.85rem; letter-spacing: 0.12em;
  text-transform: uppercase; background: none; border: 0; color: inherit;
  opacity: 0.7; cursor: pointer; padding: 0.1rem 0.15rem;
}
.crumb:hover { opacity: 1; color: var(--b-red); }
.crumb-sep { opacity: 0.3; }
.crumbs--root {
  font-family: var(--b-font-mono); font-size: 0.58rem; letter-spacing: 0.24em;
  text-transform: uppercase; opacity: 0.35;
}
.lineage-note {
  font-family: var(--b-font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.45; margin: 0.5rem 0 0;
}

/* what branches off, and what branches off that */

/* ---------- the genre map ---------- */
.genre-map { display: flex; flex-direction: column; gap: 0.9rem; min-height: 100%; }
.map-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  border-bottom: 1px solid #ded8cb; padding-bottom: 0.7rem;
}
.map-title {
  font-family: var(--b-font-display); font-size: 2rem; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0;
}
.map-count {
  flex: 1 1 auto; font-family: var(--b-font-mono); font-size: 0.82rem;
  letter-spacing: 0.08em; opacity: 0.8; margin: 0;
}
.map-reach-label {
  font-family: var(--b-font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.65;
}
.map-reach { display: flex; gap: 0.25rem; }
.reach {
  font-family: var(--b-font-mono); font-size: 0.95rem; width: 2.4rem; height: 2.4rem;
  border: 1px solid #c9c2b4; border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer; padding: 0;
}
.reach[aria-pressed="true"] { background: var(--b-black); color: var(--b-cream); border-color: var(--b-black); }

.map-svg { width: 100%; height: auto; margin-inline: auto; overflow: visible; }

/* Lines carry meaning: a solid one is descent, a dashed red one is a crossing, a dotted one is
   a family resemblance we can see but cannot draw a line of descent for. */
.wire { fill: none; stroke: #b5ae9f; stroke-width: 2; }
.wire--fusion { stroke: var(--b-red); stroke-width: 2.5; stroke-dasharray: 10 6; }
.wire--related { stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0.7; }

.pin { cursor: pointer; }
.pin rect { fill: var(--b-cream); stroke: #b5ae9f; stroke-width: 2; transition: fill 140ms, stroke 140ms; }
.pin text {
  font-family: var(--b-font-display); font-size: 21px; letter-spacing: 0.04em;
  text-transform: uppercase; fill: var(--b-black); pointer-events: none;
}
.pin:hover rect, .pin:focus rect { fill: var(--b-black); stroke: var(--b-black); }
.pin:hover text, .pin:focus text { fill: var(--b-cream); }
.pin:focus { outline: none; }
.pin--live rect { stroke: var(--b-red); stroke-width: 2.5; }
.pin--focus rect { fill: var(--b-red); stroke: var(--b-red); }
.pin--focus text { fill: var(--b-white); font-size: 27px; }
.pin--focus:hover rect { fill: var(--b-black); stroke: var(--b-black); }

@media (max-width: 640px) {
  .map-title { font-size: 1.4rem; }
}

/* what the lines mean */
.map-key {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center;
  font-family: var(--b-font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.8; margin-top: 0.3rem;
}
.key-item { display: flex; align-items: center; gap: 0.4rem; }
.key-line { width: 34px; height: 0; border-top: 2px solid #b5ae9f; display: block; }
.key-line--fusion { border-top-style: dashed; border-color: var(--b-red); }
.key-line--related { border-top-style: dotted; }
.key-item.on-air::before {
  content: ''; width: 12px; height: 12px; border: 2px solid var(--b-red); border-radius: 50%;
}

/* ---------- why ads ---------- */
#why-ads-open, #share {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--b-font-mono); font-size: 0.6rem;
  color: var(--b-red); background: transparent;
  border: 1px solid var(--b-red); border-radius: 999px;
  padding: 0.2rem 0.65rem 0.14rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  transition: background 160ms var(--b-ease-out-expo), color 160ms;
}
#why-ads-open:hover, #why-ads-open:focus-visible, #share:hover, #share:focus-visible { background: var(--b-red); color: var(--b-white); }
#share { color: var(--b-white); border-color: rgba(255, 255, 255, 0.45); }
#why-ads {
  position: fixed; inset: 0; z-index: 8; display: grid; place-items: center;
  padding: 1.5rem; background: rgba(10, 10, 10, 0.82);
}
.why-card {
  max-width: 54ch; background: var(--b-cream); color: var(--b-black);
  padding: 1.6rem 1.9rem 1.4rem; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  max-height: 100%; overflow-y: auto;
}
.why-card header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.why-card h2 {
  font-family: var(--b-font-display); font-size: 2.1rem; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0;
}
#why-ads-close { background: none; border: 0; font: inherit; font-size: 1.1rem; cursor: pointer; }
.why-card p {
  font-family: var(--b-font-serif); font-size: 1.05rem; line-height: 1.55; margin: 0.9rem 0 0;
}
.why-card footer {
  font-family: var(--b-font-mono); font-size: 0.55rem; letter-spacing: 0.24em;
  text-transform: uppercase; opacity: 0.45; margin-top: 1.3rem;
  border-top: 1px solid #d7d1c4; padding-top: 0.8rem;
}

/* ---------- the one press Safari accepts ---------- */
#screen { position: relative; }
#press-play {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  max-width: 90%; padding: 1rem 2rem 0.9rem; border-radius: 4px;
  background: rgba(10, 10, 10, 0.88); border-left: 4px solid var(--b-red);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6); text-align: center;
}
#press-play p {
  margin: 0; color: var(--b-white);
  font-family: var(--b-font-display); font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  letter-spacing: 0.06em; line-height: 1; text-transform: uppercase;
}
#watch-muted {
  font-family: var(--b-font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  color: #b3aea6; background: transparent; border: 1px solid #55504a; border-radius: 999px;
  padding: 0.4rem 0.8rem;
}
#watch-muted:hover, #watch-muted:focus-visible { color: var(--b-white); border-color: var(--b-white); }

@media (max-width: 640px) { #press-play { bottom: 4%; padding: 0.7rem 1.1rem; } }

body[data-awaiting-press="true"] #sound { animation: none; opacity: 0.45; }

/* The bezel gives things up in order of how little they are missed, rather than overflowing. */
@media (max-width: 1180px) { .keys { font-size: 0.62rem; } #volume { width: 64px; } }
@media (max-width: 1000px) { .keys-label { display: none; } }
@media (max-width: 820px) { #volume { display: none; } .ticker { font-size: 0.62rem; } }
@media (max-width: 620px) {
  #sound { font-size: 0.75rem; padding: 0.3rem 0.7rem 0.22rem; }
  .bug img { display: none; }
}

/* ---------- the marquee: what you are watching ---------- */
#marquee {
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
  background: var(--b-black); border-bottom: 1px solid #1c1c1c; overflow: hidden;
}
.marquee-mark {
  font-family: var(--b-font-display); font-size: 1.35rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--b-white); white-space: nowrap; flex: 0 0 auto;
}
.marquee-mark .marquee-music { font-size: 0.62em; letter-spacing: 0.1em; margin: 0 0.18em; opacity: 0.75; }
.marquee-mark em { font-style: normal; color: var(--b-red); margin-left: 0.15em; }
.marquee-ch {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--b-font-display); font-size: 1.15rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #b3aea6;
}
@media (max-width: 620px) {
  :root { --marquee: 38px; }
  .marquee-mark { font-size: 1.05rem; }
  .marquee-ch { font-size: 0.85rem; }
}

/* ---------- one list, two halves ---------- */
.guide-modes { display: flex; gap: 0; border-bottom: 1px solid #d7d1c4; }
.guide-modes button {
  flex: 1; font-family: var(--b-font-display); font-size: 0.95rem; letter-spacing: 0.14em;
  text-transform: uppercase; background: none; border: 0; border-bottom: 3px solid transparent;
  color: inherit; padding: 0.55rem 0 0.4rem; cursor: pointer; opacity: 0.45;
}
.guide-modes button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--b-red); }
.guide-modes button:hover { opacity: 0.8; }

.chan--genre .num { font-size: 1rem; }
.chan .on-air {
  font-family: var(--b-font-mono); font-size: 0.5rem; letter-spacing: 0.2em;
  color: var(--b-red); margin-left: 0.5rem; vertical-align: 0.15em;
}
.chan[aria-current="true"] .on-air { color: var(--b-cream); }

/* The one way out of the map, and it has to be seen: big, red, and pointing back. */
#browse-back {
  font-family: var(--b-font-display); font-size: clamp(1.1rem, 3.2vw, 1.6rem); letter-spacing: 0.1em;
  text-transform: uppercase; background: var(--b-red); border: 0; color: var(--b-white); cursor: pointer;
  padding: 0.55rem 1.2rem 0.4rem 1rem; border-radius: 999px;
  transition: background 160ms var(--b-ease-out-expo);
}
#browse-back:hover, #browse-back:focus-visible { background: var(--b-black); }

#guide-map {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--b-font-display); font-size: 0.95rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-white); background: var(--b-red); border: 0; border-radius: 999px;
  padding: 0.3rem 1rem 0.2rem;
  transition: background 160ms var(--b-ease-out-expo);
}
#guide-map:hover, #guide-map:focus-visible { background: var(--b-black); }


/* search, from inside the map */
.map-tools {
  padding: 0.7rem 1.6rem; border-bottom: 1px solid #ded8cb; position: relative;
  display: grid; gap: 0.6rem; align-items: center;
}
#map-hits { grid-column: 1 / -1; }
#map-search {
  width: 100%; font-family: var(--b-font-mono); font-size: 0.85rem;
  padding: 0.5rem 0.8rem; border: 1px solid #c9c2b4; border-radius: 999px;
  background: transparent; color: inherit; outline: none;
}
#map-search:focus { border-color: var(--b-red); }
#map-hits { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
#map-hits:empty { margin-top: 0; }
.map-hit {
  font-family: var(--b-font-display); font-size: 0.95rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: transparent; cursor: pointer;
  border: 1px solid #c9c2b4; border-radius: 999px; padding: 0.3rem 0.8rem 0.2rem;
}
.map-hit:hover { background: var(--b-black); color: var(--b-cream); border-color: var(--b-black); }
.map-hit .on-air { color: var(--b-red); font-size: 0.5rem; letter-spacing: 0.2em; margin-left: 0.45rem; }
.map-hit:hover .on-air { color: var(--b-cream); }

/* what you can do with the genre in the middle */
.node-actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center;
  padding-top: 1.2rem; margin-top: 0.6rem; border-top: 1px solid #ded8cb;
}

/* the artists a genre is known by */
.artists { margin-top: 1.6rem; }
.artists-title {
  font-family: var(--b-font-display); font-size: 1.05rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 0.6rem; opacity: 0.6;
}
.artist-list { display: grid; gap: 0; max-width: 62ch; }
.artist {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  padding: 0.55rem 0; border-top: 1px solid #ded8cb;
}
.artist-name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--b-font-display); font-size: 1.15rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.artist-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.artist-link {
  font-family: var(--b-font-mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: inherit; border: 1px solid #c9c2b4; border-radius: 999px; padding: 0.25rem 0.6rem;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.artist-link:hover, .artist-link:focus-visible {
  background: var(--b-red); color: var(--b-white); border-color: var(--b-red);
}

/* subtitles: the player has no CC button of its own, running without YouTube's controls */
#captions {
  font-family: var(--b-font-display); font-size: 0.85rem; letter-spacing: 0.12em;
  padding: 0.24rem 0.55rem 0.16rem; border-radius: 4px; cursor: pointer;
  color: #b3aea6; background: transparent; border: 1px solid #55504a;
  transition: background 140ms, color 140ms, border-color 140ms;
}
#captions:hover, #captions:focus-visible { color: var(--b-white); border-color: var(--b-white); }
#captions[data-on="true"] { color: var(--b-black); background: var(--b-white); border-color: var(--b-white); }
@media (max-width: 820px) { #captions { display: none; } }

.marquee-genre {
  font: inherit; color: var(--b-white); background: none; border: 0; padding: 0; cursor: pointer;
  text-transform: uppercase; letter-spacing: inherit;
}
/* Says what it does: the name is the door to the map, and a name alone reads as a label. */
.marquee-genre::after {
  content: "map"; margin-left: 0.6em; padding: 0.1em 0.5em 0.05em; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35); color: #b3aea6;
  font-family: var(--b-font-mono); font-size: 0.55em; letter-spacing: 0.2em; vertical-align: 0.2em;
}
.marquee-genre:hover, .marquee-genre:focus-visible { color: var(--b-red); }
.marquee-genre:hover::after, .marquee-genre:focus-visible::after { border-color: var(--b-red); color: var(--b-red); }

/* the writing and the artists are one block, not a column in a corner */
.about-columns {
  display: grid; gap: 1.6rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 40%, 340px), 1fr));
  align-items: start;
}
.about-columns .here-desc { max-width: none; }
.artists { margin-top: 0; }
.artist-list {
  display: grid; gap: 0 1.4rem; max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* what is actually on, today */
.feed { margin-top: 2rem; }
.feed-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.feed-card {
  display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; color: inherit;
  border: 1px solid #ded8cb; border-radius: 4px; padding: 0.7rem 0.8rem;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.feed-card:hover, .feed-card:focus-visible {
  background: var(--b-black); border-color: var(--b-black); color: var(--b-cream);
}
.feed-artist {
  font-family: var(--b-font-display); font-size: 1rem; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.1;
}
.feed-title {
  font-family: var(--b-font-serif); font-size: 0.85rem; line-height: 1.3; opacity: 0.75;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.feed-when {
  font-family: var(--b-font-mono); font-size: 0.55rem; letter-spacing: 0.16em; opacity: 0.5;
  margin-top: 0.25rem;
}

/* ---------- a phone, upright ----------
   A 16:9 picture in a tall window leaves a black field above and below it. Desktop centres the
   picture in that field and floats the prompt and the guide's tab over the field's edges; on a
   phone the field is most of the screen, the floating tab landed on the player, and the prompt
   floated a long way from the picture it was about. So on a phone the set is a column: the
   picture at the top under the marquee, the prompt right under the picture, the guide's handle
   in the band above the controls, and nothing over the player. */
@media (max-width: 640px) {
  #screen { grid-template-rows: auto auto 1fr; place-items: start center; row-gap: 0.9rem; }
  #stage { width: 100cqw; max-height: none; }
  #press-play {
    position: static; transform: none; bottom: auto; left: auto;
    margin: 0 1rem; max-width: calc(100% - 2rem);
  }
  #vj { grid-row: 1; }
  #channel-flash { display: none; }
  #guide-tab {
    top: auto; bottom: calc(var(--bezel) + 0.75rem); transform: none;
    padding: 0.55rem 0.7rem; gap: 0.35rem;
  }
  #bezel { gap: 0.7rem; padding: 0 0.75rem; }
  .bug-live { font-size: 0.85rem; letter-spacing: 0.12em; }
}