/* MUSIC PAGE — FREQUENCY ARCHIVE
   ────────────────────────────
   V1 layout:
     • Tightened dossier header
     • Three-column grid below 1100px+: rail-left · playlist · rail-right
     • Sticky rails (CA collections / Artist projects)
     • Active-collection highlight: signal line + glow + dim of inactive tiles
     • In-page filter (click a tile to filter the playlist to that collection)
     • Collapses to single column below 1100px (rails stack below playlist)
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:   #000;
  --surface: #080808;
  --surface2: #0d0d0d;
  --border:  #1e1e1e;
  --border2: #2a2a2a;
  --dim:     #444;
  --mid:     #666;
  --light:   #999;
  --text:    #d4d0c8;
  --bright:  #f0ece0;
  --red:     #c0392b;
  --mono:    'Space Mono', monospace;
  --display: 'Chakra Petch', sans-serif;
  --rail-w:  240px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; }

/* Active nav highlight */
nav .nav-link.dropdown.active,
nav .nav-link.dropdown.active .bracket,
nav .nav-link.dropdown.active .caret { color: var(--red); }

/* ─── MUSIC HEADER (tightened) ───
   Previous version had margin-top: 44px + padding: 32px 32px + 4-stat
   stacked rail (~170px tall) which pushed the playlist far off-screen.
   New version: lower vertical padding, smaller stat numbers, gap tightened. */
#music-header {
  margin-top: 24px;
  padding: 18px 32px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}
.mh-tag {
  font-size: 10px;
  letter-spacing: 3.5px;
  color: var(--red);
  margin-bottom: 8px;
}
.mh-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--bright);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 8px;
}
.mh-sub {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--mid);
}
.mh-stat-rail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  flex-shrink: 0;
}
/* 2026-05-16 — right-side wrapper now holds HOME button + stat rail
   stacked vertically. Chris ask: don't make users open the hamburger
   just to leave the playlist. HOME stays visible on mobile (stat rail
   hides at ≤700px, see below). */
.mh-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.mh-home {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--bright);
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.02);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.mh-home .br { color: var(--dim); transition: color 0.2s; }
.mh-home:hover, .mh-home:active {
  color: #fff;
  border-color: var(--red);
  background: rgba(192,57,43,0.12);
  transform: translateY(-1px);
}
.mh-home:hover .br, .mh-home:active .br { color: var(--red); }
.mh-stat .num {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--border2);
  letter-spacing: 2px;
  display: block;
  line-height: 1;
  text-align: right;
}
.mh-stat .lbl {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--border2);
  text-align: right;
  display: block;
  margin-top: 4px;
}

/* ─── THREE-COLUMN GRID ───
   Desktop + tablet: rail-left · playlist · rail-right
   The rails sit in the viewport and stay visible while the center
   scrolls. On phones (<768px) this collapses to a single column with
   rails stacked below the playlist. iPad portrait (768-1023px) keeps
   all three columns but uses narrower rails so the center playlist
   column doesn't get cramped — see the @media block further down.

   Width policy:
     • narrow → 1023px : center takes 1fr, rails are fixed (240px or
                         180px depending on breakpoint)
     • ≥ 1180px        : center CAPS at 700px (legibility) and any
                         extra horizontal space flows into the two
                         rails equally — so the collection art slots
                         grow on bigger screens rather than the
                         playlist row stretching out wider and wider.
                         See @media (min-width: 1180px) below.
*/
#music-grid {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--rail-w);
  align-items: start;
  border-bottom: 1px solid var(--border);
}

/* ─── RAILS ───
   Sticky-positioned so they pin in the viewport as the center column
   scrolls. The top offset accounts for the fixed nav (~52px) plus a
   small gap; tweak if nav height changes. */
.rail {
  position: sticky;
  top: 72px;
  align-self: start;
  background: #050505;
}
.rail-left  { border-right: 1px solid var(--border); }
.rail-right { border-left: 1px solid var(--border); }

.rail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.rail-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--dim);
  text-transform: uppercase;
}
.rail-label span { color: var(--red); }
.rail-count {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--dim);
  border: 1px solid var(--border);
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}

.rail-tiles {
  display: flex;
  flex-direction: column;
}

/* ─── COLLECTION TILES (.ct) ───
   The unit of the rails. Layout: art slot on top, meta block below.
   States:
     .ct-empty           → SIGNAL PENDING placeholder; no click
     .ct-active          → currently-playing collection (glow + signal line)
     .ct-filter-active   → user-clicked filter is on this tile
     .has-active sibling → other tiles in the rail are dimmed
*/
.ct {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 18px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: opacity 0.18s ease, background 0.12s ease;
  width: 100%;
}
.ct:last-child { border-bottom: none; }
.ct:not(.ct-empty):hover { background: var(--surface); }
.ct.ct-empty { cursor: default; }

.ct-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--surface2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 12px;
}
/* Per-tile dimming. Objects in Motion's temp placeholder image
   reads too bright next to the other rail tiles (Chris flagged
   2026-05-15). Tone it down with brightness + saturation until
   he uploads a replacement — at which point this rule can be
   removed entirely, or the new image will already sit in the
   right register. */
.ct[data-collection="objects-in-motion"] .ct-art {
  filter: brightness(0.75) saturate(0.86) contrast(1.02);
  transition: filter 200ms;
}
.ct[data-collection="objects-in-motion"]:hover .ct-art {
  filter: brightness(0.88) saturate(0.95) contrast(1.02);
}
/* Typographic fallback inside the art slot — shows through when the
   bg-image URL 404s (i.e., before Chris drops in real cover art).
   The bg-image just doesn't paint anything; this layer is always
   underneath. When art lands, it covers this. */
.ct-art-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--display);
  color: var(--border2);
  pointer-events: none;
}
.ctf-num {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dim);
  font-family: var(--mono);
  position: absolute;
  top: 8px;
  left: 10px;
}
.ctf-letter {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--border2);
  line-height: 1;
}
.ct-empty .ctf-letter { color: var(--border); }

/* Signal line — a thin horizontal red line emanating from the inner
   edge of an active tile, extending into the gutter between rail and
   playlist. Frequency-broadcast metaphor: the tile is transmitting.
   Hidden by default; visible only on .ct-active. */
.ct-signal {
  position: absolute;
  top: 50%;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--red), transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}
.rail-left .ct-signal  { right: -1px; }
.rail-right .ct-signal { left: -1px; background: linear-gradient(to left, var(--red), transparent); }

.ct-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ct-name {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--bright);
  line-height: 1.2;
  text-transform: uppercase;
}
.ct-empty .ct-name { color: var(--dim); }
.ct-count {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--mid);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ct-empty .ct-count { color: var(--dim); }

/* ── Active-collection visual treatment ──
   When a track is playing, the tile that owns it lights up. Two
   visible cues:
     1. Border accent + faint outer glow on the active tile
     2. Signal line extends out from the tile toward the playlist
   Plus dimming of inactive siblings via the .has-active container class. */
.ct.ct-active {
  background: var(--surface);
}
.ct.ct-active .ct-art {
  border-color: var(--red);
  box-shadow: 0 0 16px rgba(192, 57, 43, 0.22), inset 0 0 24px rgba(192, 57, 43, 0.08);
}
.ct.ct-active .ct-name { color: var(--red); }
.ct.ct-active .ct-signal {
  opacity: 1;
  width: 36px;
  animation: signal-pulse 1.6s ease-in-out infinite;
}
@keyframes signal-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Dim siblings when something is active in the rail. */
.rail-tiles.has-active .ct:not(.ct-active):not(.ct-filter-active) {
  opacity: 0.38;
}

/* User-applied filter — different visual register from .ct-active so
   filter and currently-playing can co-exist on different tiles without
   looking the same. Filter = white-ish accent. Playing = red accent. */
.ct.ct-filter-active .ct-art {
  border-color: var(--light);
  box-shadow: 0 0 12px rgba(212, 208, 200, 0.10);
}
.ct.ct-filter-active .ct-name { color: var(--bright); }
.ct.ct-filter-active::before {
  content: 'FILTERED';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--light);
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 5px;
  z-index: 2;
}

/* ─── SHARED SECTION HEADER ─── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: #050505;
}
.section-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--dim);
}
.section-title span { color: var(--red); }
.section-count {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--dim);
  border: 1px solid var(--border);
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}

/* ─── PLAYLIST ─── */
#playlist {
  min-width: 0; /* let grid track shrink without overflowing on narrow widths */
}
.pl-list { }

/* ─── FILTER BAR ───
   When a rail tile filters the playlist, this bar appears above the
   tracks as the dominant "return home" affordance. Spotify/iOS pattern:
   the "back" control sits on the LEFT (where users instinctively look
   to undo), with the current-filter state on the RIGHT for context.

   Sticky at the top of the center column so it stays visible while
   scrolling a long filtered list. */
.pl-filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px;
  background: rgba(192, 57, 43, 0.10);
  border-bottom: 1px solid rgba(192, 57, 43, 0.35);
  border-top: 1px solid rgba(192, 57, 43, 0.18);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--light);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 4;
}
.pl-filter-bar[hidden] { display: none; }

/* The prominent "SHOW ALL TRACKS" button — the actual control. */
.pl-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(192, 57, 43, 0.18);
  border: 1px solid var(--red);
  color: var(--bright);
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.08s;
}
.pl-filter-clear:hover {
  background: var(--red);
  color: #fff;
}
.pl-filter-clear:active { transform: translateY(1px); }
.pl-fc-x {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  margin-top: -1px;
}
.pl-fc-text { line-height: 1; }

/* Right side: current filter state. Quieter than the button — context,
   not control. */
.pl-filter-arrow {
  color: var(--dim);
  font-size: 12px;
  margin-left: 2px;
}
.pl-filter-state {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 0;
}
.pl-filter-label {
  color: var(--mid);
  font-size: 10px;
  letter-spacing: 2.5px;
}
.pl-filter-name {
  color: var(--bright);
  letter-spacing: 2.5px;
  font-size: 11px;
}

.pl-row {
  display: grid;
  /* num · play-icon · art · title+sub · duration */
  grid-template-columns: 2rem 1.25rem 44px 1fr 56px;
  align-items: center;
  gap: 14px;
  padding: 10px 28px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  position: relative; /* anchor for the ::before left-edge "broadcast bar" */
  transition: background 0.12s;
}

/* Spotify-style track thumbnail. Background-image (not <img>) so a 404
   on the path silently falls back to the dark surface bg. */
.pl-art {
  width: 44px;
  height: 44px;
  background-color: var(--surface2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  display: block;
}
.pl-row--current .pl-art {
  border-color: var(--red);
}
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: var(--surface); }

/* ── Currently broadcasting — the active signal ───────────────
   Most prominent treatment so the playing track is unmistakable
   even as you scroll. Three coordinated cues:
     1. Faint red wash across the row (the "carrier signal")
     2. Solid red bar pinned to the left edge with a soft glow
        (the broadcast indicator — same red language as the rail
        signal line + active-collection tile)
     3. Red track number; bright name */
.pl-row--playing { background: rgba(192, 57, 43, 0.12); }
.pl-row--playing:hover { background: rgba(192, 57, 43, 0.18); }
.pl-row--playing::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(192, 57, 43, 0.55);
  pointer-events: none;
}
.pl-row--playing .pl-num { color: var(--red); }

/* ── Cued (current track but paused) — quieter indicator ──────
   Just the thin dim-red bar on the left so the user can see which
   track will resume on play, without a full row wash. */
.pl-row--current:not(.pl-row--playing)::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(192, 57, 43, 0.4);
  pointer-events: none;
}

.pl-num {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}
.pl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-icon svg {
  width: 8px;
  height: 10px;
  color: var(--dim);
  opacity: 0;
  transition: opacity 0.12s;
}
.pl-row:hover .pl-icon svg { opacity: 0.5; }
.pl-row--current .pl-icon svg { opacity: 1 !important; color: var(--red); }

.pl-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-name {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-sub {
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-row--current .pl-name { color: var(--bright); }

/* Track duration cell — right-aligned, tabular-numeric so digits
   align vertically down the column even with varying durations. */
.pl-time {
  font-size: 11px;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  text-align: right;
  white-space: nowrap;
}
.pl-row:hover .pl-time { color: var(--light); }
.pl-row--playing .pl-time { color: var(--red); }
.pl-row--current:not(.pl-row--playing) .pl-time { color: var(--light); }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ─── FOOTER ─── */
footer {
  padding: 18px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--mid);
  flex-wrap: wrap;
}
.footer-dot {
  width: 6px; height: 6px;
  background: var(--dim);
  border-radius: 50%;
}
.footer-dot.live {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  animation: blink 1.6s ease-in-out infinite;
}
.footer-right { margin-left: auto; }

/* ─── STATUS BAR ─── */
.status-bar {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--dim);
  gap: 22px;
}
.status-item { display: inline-flex; align-items: center; gap: 8px; }
.status-dot {
  width: 5px; height: 5px;
  background: var(--dim);
  border-radius: 50%;
}
.status-dot.active {
  background: var(--red);
  box-shadow: 0 0 5px var(--red);
}
.status-spacer { flex: 1; }

/* ─── RESPONSIVE ───
   Breakpoint map:
     ≥ 1024px        — desktop / iPad landscape: 3-col grid, 240px rails
     768-1023px      — iPad portrait: 3-col grid, narrower 180px rails
                       so center column has room for full track rows
     < 768px         — phone: single-column collapse, rails stacked
                       below the playlist as a 3-column tile grid
     < 600px         — narrow phone: tile grid → single column with
                       horizontal tile cards (art left, meta right)
*/

/* iPad portrait range — narrower rails so the playlist center column
   doesn't get squeezed by two 240px rails on an 820-1023px viewport. */
@media (max-width: 1023px) and (min-width: 768px) {
  #music-grid {
    grid-template-columns: 180px 1fr 180px;
  }
  .ct { padding: 14px 14px; }
}

/* Wide viewports — cap the playlist column at 700px (the legibility
   sweet spot for a single-line track row with art thumbnail) and
   let the two rails grow equally with any extra width. At 1180px
   exactly the rails resolve to ~240px each, matching the default
   below this breakpoint — so the transition is seamless. At wider
   widths (1440 / 1920 / etc.) the rails get progressively bigger,
   which gives the collection art tiles more presence on big monitors
   instead of stretching the playlist row to absurd width. */
@media (min-width: 1180px) {
  #music-grid {
    grid-template-columns: 1fr 700px 1fr;
  }
}

/* Phone — collapse to single column, rails stack below the playlist. */
@media (max-width: 767px) {
  #music-grid {
    grid-template-columns: 1fr;
  }
  .rail {
    position: static;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border);
  }
  .rail-left  { order: 2; }
  #playlist   { order: 1; }
  .rail-right { order: 3; }
  .rail-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .ct {
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .ct:last-child { border-right: none; }
  /* Signal line is meaningless when rails are below the playlist — hide it. */
  .ct-signal { display: none; }
}

@media (max-width: 900px) {
  #music-header {
    /* Keep flex-row at tablet so HOME button stays in the upper-right
       corner with the title. Was previously column-stacking; that
       defeated the whole point of the corner button. */
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 20px 20px;
    gap: 18px;
  }
  .mh-stat-rail { flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .mh-stat .num { font-size: 14px; }
  .mh-right { align-items: flex-end; }
}

/* Narrow phone — when the rails are already collapsed below the
   playlist, switch the 3-column tile grid to a single-column stack
   of horizontal tile cards (art on the left, meta on the right). */
@media (max-width: 599px) {
  .rail-tiles {
    grid-template-columns: 1fr;
  }
  .ct {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .ct:last-child { border-bottom: none; }
  .ct-art {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .ctf-letter { font-size: 28px; }
  .ct-meta { flex: 1; min-width: 0; }
}

@media (max-width: 600px) {
  .pl-row {
    /* Drop the play-icon column on narrow phones — the row tap target
       is the whole row anyway, and the icon-on-hover doesn't apply on
       touch. Larger art (48px) + bigger title sizing matches Spotify
       iOS so users moving between the two apps feel a continuity of
       scale — banked 2026-05-16. */
    grid-template-columns: 1.5rem 48px 1fr 48px;
    gap: 14px;
    padding: 12px 18px;
  }
  .pl-icon { display: none; }
  .pl-art { width: 48px; height: 48px; }
  .pl-info { gap: 3px; }
  .pl-name { font-size: 16px; letter-spacing: 0.3px; color: var(--bright); }
  /* 2026-05-16 — sub line brightened from --mid (#666) to --light (#999)
     so artist/album reads cleanly at small mobile sizes. */
  .pl-sub  { font-size: 12px; letter-spacing: 1px; color: var(--light); }
  .pl-time { font-size: 11px; }

  /* Header: drop the MHz/BPM/CH/NODE stat-rail on mobile — it was rendering
     in --border2 (near-black) and reading as "gray dead space," not as
     ambient metadata. Pull the playlist up by tightening header padding
     + zeroing the bottom gap. Subtitle brightened to --light for legibility. */
  #music-header {
    padding: 16px 16px 12px;
    /* Reserve right-side gutter so the absolutely-positioned HOME button
       doesn't crash into the title text. */
    padding-right: 100px;
    gap: 6px;
    margin-top: 12px;
    position: relative;
  }
  .mh-stat-rail { display: none; }
  .mh-title { font-size: 22px; letter-spacing: 3px; margin-bottom: 0; }
  .mh-sub { color: var(--light); font-size: 11px; }
  /* 2026-05-16 v2 — HOME button anchored to BOTTOM-right of the music
     header (aligned roughly with the FREQUENCIES CATALOGUED · TRANSMISSIONS
     LOGGED subtitle row) instead of sitting up against the hamburger.
     Padding bumped a touch so the tap target reads comfortably on phone. */
  .mh-right {
    position: absolute;
    right: 16px;
    bottom: 14px;
    align-items: flex-end;
  }
  .mh-home {
    font-size: 12px;
    padding: 9px 14px;
    letter-spacing: 2.5px;
  }
  .section-header { padding: 10px 18px; }
  .pl-filter-bar { padding: 8px 18px; }
  footer { padding: 14px 18px; }
  .rail-head { padding: 12px 18px; }
}