/* Rumi — player
 *
 * A listening surface, not a making one. The console is dense on purpose because
 * every value there is a decision; this is the opposite job, so the artwork is the
 * biggest thing on screen and the controls stay out of the way until wanted.
 */

/* Palette is Rumi's own: her hair for the type, her aqua for the accent, and
 * the gold off the visual-kei coats as the second. The greys are pushed cool
 * so the aqua sits in them rather than on them.
 *
 * --accent is overwritten at runtime with the current song's ego colour, so
 * the whole surface takes on whichever persona is playing. Everything that
 * used to hardcode the old orange now reads from it. */
:root {
  /* LIGHT. Her palette is platinum, cream and cyan - the page should look like
     her, not like a music app. So: paper for the ground, her black lineart for
     the type, cyan for everything that carries meaning.
     A previous pass tinted a dark theme teal and called it done; that still
     read as black, because it was. */
  --bg:#F7F4ED;                /* cream - her hair against paper */
  --panel:#FFFFFF; --panel-hi:#E6F2F1;
  --ink:#0E1619;               /* her lineart, not pure black */
  --dim:#5D7075; --faint:#93A3A6; --line:#DDD7CB;

  /* Two cyans, because one cannot do both jobs on a light ground: --accent is
     the bright fill for borders, dots and the waveform; --accent-ink is dark
     enough to actually read as text on cream. Both are rewritten per persona. */
  --accent:#17C4C0;
  --accent-ink:#0A8785;

  --gold:#B8862B; --jade:#3E8C6E; --rose:#C43A6B;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --bar-h: 78px;
  transition: --accent .5s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute is a UA rule of one selector's weight, so any class rule
   setting display beats it. .light, .words and .bar all set display, so all three
   ignored their own hidden attribute — the lightbox in particular is a fixed,
   full-screen, 94% opaque sheet, which dimmed the whole page and ate every click.
   Testing the property said hidden:true while the pixels said otherwise. */
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* Paper, but not blank paper. Two soft washes - the persona's colour top-left,
   her cyan bottom-right - so the ground has a temperature and shifts with
   whoever is singing. Fixed, so scrolling does not drag them around. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 6% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%),
    radial-gradient(58vw 55vh at 96% 106%, color-mix(in srgb, #17C4C0 16%, transparent), transparent 70%);
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; }

.app { display: grid; grid-template-columns: 190px 1fr; min-height: 100vh; padding-bottom: var(--bar-h); }

/* ------------------------------------------------------------------- rail */

.rail {
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  background: color-mix(in srgb, var(--panel) 72%, var(--bg));
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
}
.mark { font-family: var(--serif); font-size: 25px; letter-spacing: .02em; }
.mark em { font-style: normal; color: var(--accent-ink); }
.mark-sub {
  font-family: var(--mono); font-size: 9px; color: var(--faint);
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 24px;
}

.nav { display: grid; gap: 2px; margin-bottom: 26px; }
.nav button {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 5px; color: var(--dim);
  font-size: 13.5px; text-align: left;
}
.nav button::before { content: ''; width: 2px; height: 14px; border-radius: 2px; }
.nav button.on { background: var(--panel-hi); color: var(--ink); }
.nav button.on::before { background: var(--accent); }
.nav .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }

.rail-h {
  font-family: var(--mono); font-size: 9px; color: var(--faint);
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px 2px;
}
.rail input[type=search] {
  width: 100%; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-radius: 5px; padding: 7px 9px; font-size: 13px; outline: none;
}
.rail input[type=search]:focus { border-color: var(--accent); }
.check { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--dim); cursor: pointer; }
.rail-foot { margin-top: auto; }
.rail-foot a { color: var(--faint); font-size: 12px; text-decoration: none; }
.rail-foot a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ stage */

.main { min-width: 0; padding: 26px 30px 40px; }

/* The song you are on, given room. Everything else on the page is a list. */
.stage { display: none; gap: 26px; margin-bottom: 30px; }
.stage.on { display: flex; }
.stage-art { position: relative; width: 208px; height: 208px; flex: 0 0 208px; }
.stage-art img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; background: var(--panel-hi); }
/* No negative z-index: .stage-art sets no z-index of its own, so it creates no
   stacking context, and a -1 child paints behind the body background and vanishes.
   Ordering it first in the box does the same job without leaving the flow. */
.stage-art .glow {
  position: absolute; inset: -24px; border-radius: 22px;
  filter: blur(38px); opacity: .45;
  background: radial-gradient(closest-side, var(--accent), transparent 72%);
}
.stage-meta { min-width: 0; align-self: flex-end; padding-bottom: 4px; }
.eyebrow {
  font-family: var(--mono); font-size: 9.5px; color: var(--dim);
  letter-spacing: .17em; text-transform: uppercase; margin-bottom: 12px;
}
.stage-title { font-family: var(--serif); font-size: 40px; line-height: 1.06; margin-bottom: 10px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px;
}
/* Was a hardcoded brown that only worked against the old orange. Derived from
   the accent now so it follows whichever persona is playing. */
.tag.hot { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.takes { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.takes .lbl { font-family: var(--mono); font-size: 9px; color: var(--faint); letter-spacing: .14em; text-transform: uppercase; margin-right: 3px; }
.take {
  font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--dim);
}
.take.on { border-color: var(--accent); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.take .st { color: var(--accent-ink); }
.take.local::after { content: '·'; margin-left: 5px; color: var(--jade); }

/* ------------------------------------------------------------------- list */

.list { display: grid; gap: 2px; }
.song {
  display: flex; align-items: center; gap: 13px;
  padding: 8px 11px; border-radius: 6px; cursor: pointer;
}
.song:hover { background: var(--panel); }
.song.on { background: var(--panel-hi); }
.song-art { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; flex: 0 0 40px; background: var(--panel-hi); }
.song-id { min-width: 0; flex: 1 1 auto; }
.song-id b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-id span { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.song .meta { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: 0 0 auto; }
.song .stars { color: var(--accent-ink); font-size: 11px; letter-spacing: 1px; flex: 0 0 auto; }
.song.playing .song-id b { color: var(--accent-ink); }

.empty { color: var(--dim); font-size: 13.5px; padding: 30px 4px; }

/* ----------------------------------------------------------------- albums */

.albums { display: grid; gap: 22px; }
.album { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; background: var(--panel); }
.album h2 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: 3px; }
.album .who { font-family: var(--mono); font-size: 10px; color: var(--accent-ink); letter-spacing: .12em; text-transform: uppercase; }
.album .theme { color: var(--dim); font-size: 13.5px; line-height: 1.65; margin: 12px 0 16px; max-width: 78ch; }
.atrack { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.atrack .no { font-family: var(--mono); font-size: 10px; color: var(--faint); flex: 0 0 20px; }
.atrack b { font-weight: 500; font-size: 14px; flex: 0 0 auto; }
.atrack .concept { color: var(--dim); font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
.atrack .state { font-family: var(--mono); font-size: 9.5px; color: var(--faint); flex: 0 0 auto; }
.atrack .state.rec { color: var(--jade); }

/* ---------------------------------------------------------------- gallery */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.cell { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; cursor: zoom-in; background: var(--panel-hi); }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cell:hover img { transform: scale(1.04); }
.cell .cap {
  position: absolute; inset: auto 0 0 0; padding: 20px 9px 8px; font-size: 11.5px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  opacity: 0; transition: opacity .2s ease;
}
.cell:hover .cap { opacity: 1; }

.light {
  /* The one place that stays dark: artwork needs a dark surround to read
     against, on a light page as much as anywhere. Tinted toward her cyan
     rather than neutral so it still belongs to this palette. */
  position: fixed; inset: 0; z-index: 90; background: rgba(6,17,20,.95);
  display: grid; place-items: center; padding: 34px; cursor: zoom-out;
}
.light img { max-width: min(88vw, 860px); max-height: 78vh; border-radius: 5px; }
.light-cap { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ------------------------------------------------------------------- bar */

.bar {
  position: fixed; inset: auto 0 0 0; height: var(--bar-h); z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, white); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 18px;
}
.bar-art { width: 48px; height: 48px; border-radius: 3px; object-fit: cover; flex: 0 0 48px; background: var(--panel-hi); }
.bar-id { min-width: 0; flex: 0 1 190px; }
.bar-id b { display: block; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-id span { font-family: var(--mono); font-size: 10px; color: var(--dim); }

.bar-mid { flex: 1 1 auto; min-width: 0; display: grid; gap: 5px; justify-items: center; }
.controls { display: flex; align-items: center; gap: 16px; }
.controls button { color: var(--dim); font-size: 12px; }
.controls button:hover { color: var(--ink); }
.controls .play {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font-size: 12px;
}
.scrub { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 620px; }
.scrub .t { font-family: var(--mono); font-size: 10px; color: var(--faint); flex: 0 0 34px; }
.scrub .t:last-child { text-align: right; }

/* Measured from the audio when the file is local, so the shape on screen is the
   shape of the sound. A remote take gets a plain bar rather than a drawn one. */
.wave { flex: 1 1 auto; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.wave i { flex: 1 1 auto; min-width: 1px; background: color-mix(in srgb, var(--line) 78%, var(--ink)); border-radius: 1px; transition: background .1s linear; }
.wave i.p { background: var(--accent); }
.wave.plain { display: block; height: 4px; background: color-mix(in srgb, var(--line) 78%, var(--ink)); border-radius: 3px; align-self: center; }
.wave.plain span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.bar-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ghost { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 5px 9px; border-radius: 4px; }
.ghost.on { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
#vol { width: 78px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ words */

.words {
  position: fixed; right: 0; top: 0; bottom: var(--bar-h); width: 420px; z-index: 70;
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.words-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.words-head b { font-size: 14px; font-weight: 500; flex: 1 1 auto; min-width: 0; }
.seg { display: flex; gap: 2px; }
.seg button { font-family: var(--mono); font-size: 10px; color: var(--dim); padding: 4px 8px; border-radius: 3px; }
.seg button.on { background: var(--panel-hi); color: var(--ink); }
.words .x { color: var(--dim); font-size: 13px; }
.words-body { overflow-y: auto; padding: 16px; }
.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 3px 0; align-items: baseline; }
.wl.jp-only, .wl.en-only { grid-template-columns: 1fr; }
.wl .j { font-size: 14.5px; line-height: 1.75; }
.wl .e { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--dim); line-height: 1.7; }
.wl.tag { padding-top: 14px; }
.wl.tag .j { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .08em; }
.wl.tag .e { display: none; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 12px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line);
    padding: 12px 14px;
  }
  .mark, .mark-sub, .rail-h, .check, .rail-foot { display: none; }
  .nav { display: flex; gap: 4px; margin: 0; flex: 0 0 auto; }
  .nav button::before { display: none; }
  .rail input[type=search] { width: 150px; flex: 0 0 150px; }
  .main { padding: 18px 14px 30px; }
  .stage { flex-direction: column; gap: 16px; }
  .stage-art { width: 100%; height: auto; aspect-ratio: 1; flex: none; max-width: 320px; }
  .stage-title { font-size: 30px; }
  .bar { gap: 10px; padding: 0 12px; }
  .bar-id { flex: 1 1 auto; }
  /* The scrubber shrinks rather than disappearing. Hiding it entirely left a
     phone with no way to seek and no sense of position, which is worse than a
     thin line — and a phone is where this actually gets used. */
  #vol { display: none; }
  .bar { flex-wrap: wrap; height: auto; padding: 9px 12px 11px; }
  .bar-mid { order: 3; flex: 1 0 100%; gap: 0; }
  .controls { display: none; }
  .scrub { max-width: none; gap: 8px; }
  .scrub .t { flex: 0 0 30px; font-size: 9px; }
  .wave { height: 16px; }
  .wave i { border-radius: 0; }
  .words { width: 100%; }
}

/* A line is clickable only to seek, and there is nothing to seek to without
   timings — so it is plain text. */
.wl.tag { padding-top: 14px; }

/* ---------------------------------------------------------------- personas */

/* Each song is fronted by one of her alter egos. The art is a square crop of
   the generated full-body frame, so the persona is a face rather than a label.
   Everything here reads --accent, which the app rewrites per song. */

.her {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 16px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.her img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
}
.her-id b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 500; }
.her-id span {
  font-family: var(--mono); font-size: 9px; color: var(--faint);
  letter-spacing: .16em; text-transform: uppercase;
}

/* stage — the ego gets real estate next to the artwork */
.stage-ego {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 14px;
}
.stage-ego img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent),
              0 8px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}
.stage-ego .who {
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  letter-spacing: .17em; text-transform: uppercase;
}
.stage-ego .as { font-size: 14px; color: var(--dim); margin-top: 5px; }

/* list — a round face on every row, so the set reads as a cast */
.song-ego {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  flex: 0 0 40px; opacity: .82;
  border: 1px solid var(--line);
  transition: opacity .15s ease, border-color .15s ease;
}
.song.on .song-ego, .song:hover .song-ego { opacity: 1; border-color: var(--accent); }

/* the glow behind the stage artwork already uses --accent, so it recolours
   with the persona for free */

/* rail — her mark, and the cross from the hair ornament as the bullet */
.mark em { color: var(--accent-ink); }
.nav button.on::before { background: var(--accent); }

/* ------------------------------------------------------------------ share */

.share-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.share {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 4px; padding: 5px 10px; flex: 0 0 auto;
}
.share:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Showing the URL is half the feature - it teaches the shape, so the next one
   can be typed rather than copied. */
.share-url {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 820px) { .share-url { display: none; } }

/* --------------------------------------------------------- ego assignment */

/* A new song arrives with nobody fronting it. Rather than rendering nothing,
   say so and offer the picker - otherwise the only way to pair a song is to
   edit a python file and redeploy. */
.stage-ego.none { align-items: center; }
.ego-add {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink);
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 999px; padding: 10px 16px;
}
.ego-add:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.ego-btn { padding: 0; border-radius: 50%; line-height: 0; position: relative; }
.ego-btn::after {
  content: '✎'; position: absolute; right: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: 11px; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s ease;
}
.ego-btn:hover::after { opacity: 1; }

.ego-pick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 16px; padding: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  max-width: 620px;
}
.ego-pick button {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12.5px; color: var(--dim);
}
.ego-pick button img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ego-pick button:hover { color: var(--ink); border-color: var(--accent); }
.ego-pick button.on {
  color: var(--accent-ink); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.ego-pick button.clear { padding: 5px 12px; color: var(--faint); }
.ego-pick button[disabled] { opacity: .5; }

.cast {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.cast img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); cursor: pointer; opacity: .62;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.cast img:hover { opacity: 1; transform: translateY(-2px); }
.cast img.on {
  opacity: 1; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ------------------------------------------------------------------ banner */

/* The cast strip, full bleed above the list. One hero portrait would say less
   than six of her does - the premise of the whole player is that the songs
   are fronted by different versions of the same person. */
.banner {
  position: relative; overflow: hidden;
  margin: -26px -30px 26px;          /* out past .main's padding, to the edges */
  height: 260px;
}

/* The strip scrolls forever so every ego gets a turn. Two copies side by side,
   translated by half the track - which is exactly one image - so the loop
   never shows a seam and the distance is not hardcoded to a pixel width.
   The image itself wraps (see build_banner.py) or the join would be visible
   however slow this runs. */
.banner-track {
  display: flex; height: 100%; width: max-content;
  animation: banner-pan 120s linear infinite;
  will-change: transform;
}
.banner-track img { height: 100%; width: auto; display: block; }

@keyframes banner-pan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Slow horizontal drift is exactly the sort of thing that makes some people
   ill. Hold it on the first frame instead. */
@media (prefers-reduced-motion: reduce) {
  .banner-track { animation: none; }
}

/* Pausing while the pointer is on it makes the banner feel like a thing you
   can look at rather than something escaping. */
.banner:hover .banner-track { animation-play-state: paused; }
/* The image already fades left and down, but the page colour shifts with the
   persona, so this seam matches whatever --bg is doing today. */
.banner::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 55%, transparent) 34%, transparent 62%),
    linear-gradient(0deg, var(--bg) 1%, transparent 42%);
}
.banner-in {
  position: absolute; inset: auto auto 30px 30px; z-index: 1;
}
.banner-mark {
  font-family: var(--serif); font-size: 52px; line-height: 1;
  letter-spacing: .01em; text-shadow: 0 2px 20px color-mix(in srgb, var(--bg) 70%, transparent);
}
.banner-mark em { font-style: normal; color: var(--accent); }
.banner-sub {
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  letter-spacing: .22em; text-transform: uppercase; margin-top: 8px;
}

@media (max-width: 820px) {
  .stage-ego { margin-bottom: 10px; }
  .stage-ego img { width: 64px; height: 64px; }
  .song-ego { width: 32px; height: 32px; flex: 0 0 32px; }
  .cast { display: none; }
  .banner { margin: -18px -14px 18px; height: 150px; }
  .banner-in { inset: auto auto 16px 16px; }
  .banner-mark { font-size: 34px; }
}

/* Kept quiet until wanted. Destructive controls should be findable, not prominent
   — they sit under the takes and only take colour on hover. */
.danger-row { display: flex; gap: 8px; margin-top: 14px; }
.rm {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--faint); border: 1px solid var(--line); border-radius: 3px;
  padding: 5px 9px;
}
.rm:hover { color: var(--rose); border-color: var(--rose); }