/* Soul Donkey Music — main.css
   System serif throughout. No web fonts loaded.
   ─────────────────────────────────────────────── */

:root {
  --ink:    #1a1a18;
  --ink2:   #3a3a35;
  --ink3:   #7a7a72;
  --paper:  #f7f5f0;
  --paper2: #efede8;
  --rule:   #d4d0c8;
  --acc:    #c0392b;
  --f:      Georgia, 'Times New Roman', serif;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--acc); }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

/* ── Masthead ─────────────────────────────────── */

.site-header {
  border-bottom: 3px double var(--ink);
  padding: 1.25rem 2rem 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.masthead {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  text-decoration: none;
}
.masthead .red { color: var(--acc); }

.site-nav {
  display: flex;
  gap: 2rem;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  list-style: none;
}
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--acc); }

/* ── Dateline ─────────────────────────────────── */

.dateline {
  font-size: 12px;
  color: var(--ink3);
  padding: 6px 2rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
}
.dateline a { color: var(--ink3); text-decoration: none; }
.dateline a:hover { color: var(--acc); }
.dateline .est { font-style: italic; }

/* ── Section rule ─────────────────────────────── */

.section-rule {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 2rem;
  background: var(--paper2);
}

.kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ── Divider ──────────────────────────────────── */
.vdivider { background: var(--rule); }

/* ── Index — 3-col hero ───────────────────────── */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  border-bottom: 1px solid var(--rule);
  padding: 0 2rem;
}

.hero-episode {
  padding: 1.5rem 1.75rem 1.5rem 0;
}
.hero-episode:not(:first-child) {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.hero-episode:last-child { padding-right: 0; }

.ep-title {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.ep-title a { color: var(--ink); text-decoration: none; }
.ep-title a:hover { color: var(--acc); }

.ep-subtitle {
  font-size: 13px;
  color: var(--acc);
  margin-bottom: 8px;
  line-height: 1.5;
}

.ep-meta {
  font-size: 12px;
  color: var(--ink3);
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  background: var(--paper);
  border: 1px solid var(--acc);
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--f);
  text-decoration: none;
}
.play-btn:hover { background: var(--acc); color: var(--paper); }

/* ── Archive grid — 2 col ─────────────────────── */
/* CSS multi-column (not a 2-item grid split in the template) so episode
   order stays chronological top-to-bottom regardless of column count —
   collapsing to column-count:1 on mobile just re-flows the same list. */

.archive-grid {
  column-count: 2;
  column-gap: 3.5rem;
  column-rule: 1px solid var(--rule);
  padding: 0 2rem;
}

.archive-episode {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.archive-episode:last-child { border-bottom: none; }

.ep-number {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--paper2);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--acc);
  font-weight: 700;
}

.ep-body { flex: 1; min-width: 0; }

.ep-body-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 3px;
}
.ep-body-title a { color: var(--ink); text-decoration: none; }
.ep-body-title a:hover { color: var(--acc); }

.ep-body-sub {
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-body-meta {
  font-size: 12px;
  color: var(--ink3);
}
.ep-body-meta a { color: var(--acc); text-decoration: none; }

/* ── Episode page ─────────────────────────────── */

.episode-wrap { padding: 0 2rem; }

.episode-header {
  padding: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.episode-header h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  margin: 8px 0;
  color: var(--ink);
}
.episode-header .subtitle {
  font-size: 14px;
  color: var(--acc);
  margin-bottom: 10px;
  line-height: 1.5;
}
.episode-header .meta {
  font-size: 13px;
  color: var(--ink3);
  display: flex;
  gap: 20px;
}

.episode-body {
  display: grid;
  grid-template-columns: 1fr 280px;
}
.episode-main {
  padding-right: 2.5rem;
  border-right: 1px solid var(--rule);
}
.episode-sidebar { padding-left: 1.75rem; }

/* ── Hero image + player ──────────────────────── */

.ep-hero {
  position: relative;
  width: 100%;
  margin: 1.5rem 0 0;
}
.ep-hero img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ep-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.78) 100%
  );
}
.ep-hero-player {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 14px;
}
.ep-caption {
  font-size: 12px;
  color: var(--ink3);
  padding: 5px 0 0;
  border-top: 1px solid var(--rule);
  margin-bottom: 0;
}

/* ── Plyr overrides ───────────────────────────── */
.plyr-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.download-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.download-link {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.download-link:hover { border-color: var(--acc); color: var(--acc); }

/* ── Episode description ──────────────────────── */

.episode-desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink2);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.episode-desc p { margin-bottom: 1rem; }
.episode-desc p:last-child { margin-bottom: 0; }
.episode-desc .credit {
  font-size: 12px;
  color: var(--ink3);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: 1.25rem;
}

/* ── Tracklist ────────────────────────────────── */

.tracklist h3 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  border-bottom: 2px solid var(--acc);
  padding-bottom: 7px;
  margin-top: 1.25rem;
  margin-bottom: 0;
}
.track {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.track:hover .track-title { color: var(--acc); }
.track.active .track-title { color: var(--ink); font-weight: 700; }
.track-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--acc);
  width: 52px;
  flex-shrink: 0;
}
.track-title { font-size: 13px; color: var(--ink2); line-height: 1.4; }

/* ── Sidebar — more episodes ──────────────────── */

.sidebar-block {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.sidebar-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 10px;
}
.sidebar-episode {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.sidebar-episode:last-child { border-bottom: none; }
.sidebar-ep-num {
  font-size: 11px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sidebar-ep-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.sidebar-ep-meta { font-size: 12px; color: var(--ink3); }

/* ── About ────────────────────────────────────── */

.about-wrap { padding: 0 2rem; }
.about-hero {
  display: grid;
  grid-template-columns: 200px 1px 1fr;
  border-bottom: 1px solid var(--rule);
}
.about-art {
  padding: 2rem 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-art img {
  width: 160px;
  height: 160px;
  object-fit: cover;
}
.about-links { display: flex; flex-direction: column; gap: 8px; width: 160px; }
.about-link {
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid var(--rule);
  padding: 5px 10px;
  color: var(--ink2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-link:hover { border-color: var(--acc); color: var(--acc); }
.about-link-icon { width: 14px; height: 14px; flex-shrink: 0; }
.about-text { padding: 2rem 0 2rem 2rem; }
.about-text h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--ink);
}
.about-text p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink2);
}
.about-text p + p { margin-top: 1rem; }

/* ── Error pages ──────────────────────────────── */

.error-wrap {
  padding: 3.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  border-bottom: 1px solid var(--rule);
}
.error-left {
  padding-right: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.error-code {
  font-size: 108px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.error-bar {
  width: 56px;
  height: 3px;
  background: var(--acc);
  margin: 14px 0;
}
.error-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.error-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink2);
}
.error-right {
  padding-left: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.error-nav-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 14px;
}
.error-nav-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.error-nav-item:first-of-type { border-top: 1px solid var(--rule); }
.error-nav-arrow { font-size: 14px; color: var(--acc); }
.error-nav-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.error-nav-item:hover .error-nav-text { color: var(--acc); }

/* ── Admin header ─────────────────────────────── */

.admin-header {
  background: var(--ink);
  padding: 10px 2rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-header-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}
.admin-header-user {
  font-size: 11px;
  color: #9a9a92;
}
.admin-header-user button {
  background: none;
  border: none;
  color: var(--acc);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--f);
}

/* ── Admin header actions (new episode / edit episodes) ───────── */

.admin-header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.admin-episode-picker { position: relative; }
.admin-episode-picker-btn {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--paper);
  color: var(--paper);
  padding: 8px 18px;
  display: inline-block;
  font-family: var(--f);
}
.admin-episode-picker-btn::-webkit-details-marker { display: none; }
.admin-episode-picker-btn:hover,
.admin-episode-picker[open] .admin-episode-picker-btn {
  background: var(--paper);
  color: var(--ink);
}
.admin-episode-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  width: 340px;
  max-width: calc(100vw - 2rem);
  max-height: 420px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 14px;
}

/* ── Admin layout ─────────────────────────────── */

.admin-body { padding: 1.75rem 2rem; }

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
}
.admin-col-left  { padding-right: 1.75rem; }
.admin-col-right { padding-left:  1.75rem; }

.admin-section-head {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 2px solid var(--acc);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

/* ── Range tabs ───────────────────────────────── */

.range-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 1rem;
}
.range-tab {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink3);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  background: var(--paper2);
}
.range-tab:hover {
  color: var(--ink);
  border-color: var(--ink3);
}
.range-tab.active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.range-custom {
  position: relative;
  flex-shrink: 0;
}
.range-custom > summary {
  list-style: none;
  cursor: pointer;
  color: var(--acc);
  border-color: var(--acc);
}
.range-custom > summary::-webkit-details-marker {
  display: none;
}
.range-custom > summary:hover,
.range-custom > summary.active {
  color: var(--paper);
  background: var(--acc);
  border-color: var(--acc);
}
.range-custom-form {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.range-custom-form label {
  font-size: 12px;
  color: var(--ink3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.range-custom-form input[type="date"] {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}

/* ── Stat cards ───────────────────────────────── */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--paper2);
  border: 1px solid var(--rule);
  padding: 14px 16px;
}
.stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 6px;
}
.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stat-sub { font-size: 12px; color: var(--ink3); margin-top: 4px; }

/* ── Mini bar chart ───────────────────────────── */

.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
  margin-bottom: 10px;
}
.mini-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* Flex items default to min-width:auto, which stops flex-basis:0%
     (from flex:1) from actually forcing equal widths — a slot whose
     label is wider than its equal share (e.g. "12a"/"12p", 3 characters,
     next to "3p"/"6p", 2 characters, or an empty label) would refuse to
     shrink below its own content width, throwing off every slot after
     it. min-width:0 makes flex:1 produce genuinely equal-width columns
     regardless of label length. */
  min-width: 0;
  /* Needed so .mini-bar's percentage height has a definite height to
     resolve against — .mini-chart's align-items:flex-end means this
     wrap never gets stretched to fill its parent's height on its own,
     so every bar's height:X% was silently resolving to nothing. */
  height: 100%;
}
.mini-bar {
  width: 100%;
  background: var(--rule);
  /* Pushes the bar (and the label right after it) to the bottom of the
     now-100%-tall wrap, so bars of different heights still share a
     common baseline instead of all starting flush at the top. */
  margin-top: auto;
}
.mini-bar.active { background: var(--acc); }
.mini-bar-label {
  font-size: 10px;
  color: var(--ink3);
  text-align: center;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  /* Explicit height, not just line-height — an empty label (most hours
     only label every 3rd one) can collapse to zero height in some
     browsers, and since .mini-bar's margin-top:auto pushes the bar to
     sit right above this label, an inconsistent label height directly
     throws off the bar's effective bottom edge. Fixed height guarantees
     every bar sits on the same baseline regardless of label content.
     14px (not 12px) with a matching line-height — 12px clipped the tops
     of characters since actual glyph rendering needs a bit more room
     than the bare font-size at this size. */
  height: 14px;
  line-height: 14px;
}

/* ── Horizontal bar chart (geo, apps) ────────── */

.hbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.hbar-label { font-size: 12px; color: var(--ink3); width: 28px; }
.hbar-name  { font-size: 13px; color: var(--ink2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { width: 80px; height: 6px; background: var(--rule); }
.hbar-fill  { height: 100%; background: var(--acc); }
.hbar-count { font-size: 12px; color: var(--ink3); width: 40px; text-align: right; }

/* ── Episode list (admin) ─────────────────────── */

.admin-ep-list { margin-top: 4px; }

.admin-ep-row {
  display: grid;
  grid-template-columns: 8px 1fr 3.5rem auto;
  column-gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.admin-ep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  justify-self: center;
}
.dot-published { background: #2ecc71; }
.dot-draft     { background: var(--rule); }

.admin-ep-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-ep-num {
  font-size: 11px;
  color: var(--ink3);
  text-align: right;
  white-space: nowrap;
}

.ep-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 12px;
  align-items: center;
}

/* ── Episode performance row (admin dashboard drill-down) ─────── */
/* Fixed-width stat columns so plays/downloads/avg% line up vertically
   across rows — a single variable-length text blob per row (the old
   approach) only pins the end of the string to the right edge, not
   each stat individually. */

.ep-perf-row {
  cursor: pointer;
  list-style: none;
  display: grid;
  /* Fixed widths, not auto — deterministic pixel alignment for every
     row's icon, independent of any content-based track-sizing behavior. */
  /* Widened for the header row's text ("DOWNLOADS"/"PLAYS"/"AVG %") -
     the data rows only ever needed room for a small icon+number or a
     14px pie, but the header labels are much wider and were overflowing
     into the next column before. */
  grid-template-columns: 1fr 5rem 3.25rem 3rem;
  column-gap: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.ep-perf-row::-webkit-details-marker { display: none; }
/* Header row reuses .ep-perf-row's grid for column alignment, but reads as
   a label row (small/gray/uppercase) rather than a clickable episode -
   only the individual column headings are clickable, not the whole row. */
.ep-perf-header {
  cursor: default;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.ep-perf-header [data-sort-key] { cursor: pointer; }
.ep-perf-header [data-sort-key]:hover { color: var(--ink); }
.ep-perf-header [data-sort-key][data-sort-dir="asc"]::after  { content: " \25B2"; }
.ep-perf-header [data-sort-key][data-sort-dir="desc"]::after { content: " \25BC"; }
.ep-perf-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-perf-stat {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink3);
  white-space: nowrap;
}
/* Icon gets its own fixed-width box so it starts at the same x-position
   on every row (the column itself is now a fixed width, shared across
   all rows) - the number then sits right next to it as plain text, no
   box/padding forcing it apart. */
.ep-stat-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
}

/* CSS-only pie — --pct (0-100) drives a conic-gradient fill angle, so one
   rule covers any percentage without SVG/JS per instance. */
.ep-pie {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(var(--acc) calc(var(--pct) * 1%), var(--rule) 0);
  vertical-align: middle;
  cursor: default;
}

/* Custom tooltip for any [data-tooltip] element — not the native title
   attribute, since title tooltips on elements nested inside
   <summary>/<details> are unreliable across browsers: the disclosure
   control's own hit-testing can swallow the hover before a native
   tooltip ever shows. */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 30;
}
[data-tooltip]:hover::after {
  opacity: 1;
}
.ep-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── Sortable table (admin) ────────────────────── */

.admin-sortable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-sortable-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
  padding: 6px 8px 6px 0;
  border-bottom: 2px solid var(--acc);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-sortable-table th:hover { color: var(--ink); }
.admin-sortable-table th.num,
.admin-sortable-table td.num { text-align: right; }
.admin-sortable-table th[data-sort-dir="asc"]::after  { content: " \25B2"; }
.admin-sortable-table th[data-sort-dir="desc"]::after { content: " \25BC"; }
.admin-sortable-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink2);
}

/* ── Buttons ──────────────────────────────────── */

.btn-primary {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--acc);
  color: #fff;
  border: none;
  padding: 8px 18px;
  cursor: pointer;
  font-family: var(--f);
}
.btn-primary:hover { background: #a93226; }

.btn-secondary {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--ink3);
  padding: 3px 9px;
  cursor: pointer;
  color: var(--ink2);
  font-family: var(--f);
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover { border-color: var(--acc); color: var(--acc); }
.btn-secondary.lg    { padding: 8px 18px; font-size: 12px; }

/* ── Admin forms ──────────────────────────────── */

.form-group { margin-bottom: 12px; }
.form-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  display: block;
  margin-bottom: 4px;
}
.form-input {
  width: 100%;
  font-family: var(--f);
  font-size: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 7px 10px;
  color: var(--ink);
  outline: none;
}
.form-input:focus { border-color: var(--acc); }
.form-textarea {
  resize: vertical;
  min-height: 60px;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-upload {
  width: 100%;
  font-size: 12px;
  background: var(--paper2);
  border: 1px dashed var(--rule);
  padding: 10px;
  color: var(--ink2);
  text-align: center;
  cursor: pointer;
}
.form-upload:hover { border-color: var(--acc); color: var(--acc); }
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink2);
}
.form-checkbox input { accent-color: var(--acc); }

/* ── Auth pages ───────────────────────────────── */

.auth-wrap {
  max-width: 400px;
  margin: 4rem auto;
  padding: 2rem;
  border: 1px solid var(--rule);
}
.auth-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.auth-error {
  font-size: 13px;
  color: var(--acc);
  background: #fdf0ef;
  border: 1px solid #f5c6c3;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* ── Drop-off funnel ──────────────────────────── */

.funnel { margin: 1rem 0; }
.funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.funnel-label { font-size: 12px; color: var(--ink3); width: 60px; }
.funnel-track { flex: 1; height: 8px; background: var(--rule); }
.funnel-fill  { height: 100%; background: var(--acc); }
.funnel-pct   { font-size: 12px; color: var(--ink3); width: 38px; text-align: right; }

/* ── Admin tabs ───────────────────────────────── */

.admin-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  padding: 0 2rem;
  margin-bottom: 1.75rem;
}
.admin-tab {
  font-size: 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--ink3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--f);
}
.admin-tab.active { color: var(--ink); border-bottom-color: var(--acc); }

/* ── Footer ───────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1rem 2rem;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 3rem;
}

/* ── Responsive ───────────────────────────────── */
/* Everything above is desktop-first (this was originally a fixed-width
   newspaper layout with no breakpoints at all). Below: tablet/phone
   stacking for the same markup — no separate mobile templates. */

@media (max-width: 768px) {
  /* Horizontal breathing room: 2rem side padding eats ~17% of a phone
     screen's width for nothing. */
  .site-header,
  .dateline,
  .section-rule,
  .episode-wrap,
  .about-wrap,
  .hero-grid,
  .archive-grid,
  .error-wrap,
  .admin-body,
  .admin-tabs {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Masthead + nav */
  .site-header {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 1rem;
    padding-bottom: 0.85rem;
  }
  .masthead { font-size: 24px; }
  .site-nav { gap: 1rem; font-size: 11px; }

  /* Dateline — long attribution text + a link no longer fit on one line */
  .dateline {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Hero grid — 3-col with divider columns collapses to a single stacked
     column; hide the divider grid-items and use bottom borders instead. */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid > .vdivider { display: none; }
  .hero-episode,
  .hero-episode:not(:first-child),
  .hero-episode:last-child {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .hero-episode:last-child { border-bottom: none; }

  /* Archive grid — CSS multi-column just collapses to one column;
     order stays correct since it was never split in the template. */
  .archive-grid { column-count: 1; }

  /* Episode page — sidebar (tracklist + more episodes) moves below
     the description instead of sitting beside it. */
  .episode-body { grid-template-columns: 1fr; }
  .episode-main {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1.5rem;
  }
  .episode-sidebar { padding-left: 0; padding-top: 1.5rem; }
  .episode-header h1 { font-size: 26px; }
  .episode-header .meta { flex-wrap: wrap; gap: 10px; }
  .ep-hero img { height: 180px; }

  /* About page — image/links stack above the bio text */
  .about-hero { grid-template-columns: 1fr; }
  .about-hero > .vdivider { display: none; }
  .about-art {
    padding: 1.5rem 0;
    align-items: center;
    text-align: center;
  }
  .about-art img { width: 180px; height: 180px; margin: 0 auto; }
  .about-links { width: 180px; margin: 0 auto; }
  .about-text { padding: 0 0 1.5rem; }
  .about-text h1 { font-size: 24px; }

  /* Error pages */
  .error-wrap {
    grid-template-columns: 1fr;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .error-wrap > .vdivider { display: none; }
  .error-left,
  .error-right { padding: 0; }
  .error-right { padding-top: 1.5rem; }
  .error-code { font-size: 64px; }

  /* Admin dashboard */
  .admin-header { padding: 10px 1rem; row-gap: 6px; }
  .admin-header-top { flex-wrap: wrap; row-gap: 6px; }
  .admin-header-actions { flex-wrap: wrap; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid > .vdivider { display: none; }
  .admin-col-left,
  .admin-col-right { padding-left: 0; padding-right: 0; }
  .admin-col-right { padding-top: 1.5rem; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .range-tabs { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .masthead { font-size: 20px; }
  .stat-cards { gap: 8px; }
  .stat-value { font-size: 24px; }
  .error-code { font-size: 48px; }
}