/* Low Budget FM — modernized from the January 2010 design.
   Keeps the original's spirit (dark canvas with a warm glow, white panels,
   burnt-orange accent #E64D00) with a responsive grid, real rounded
   corners, and a single system-ui type stack. */

:root {
  --accent: #E64D00;
  --accent-hover: #FF6A1F;
  --ink: #2b2b2b;
  --ink-soft: #6b6b6b;
  --ink-faint: #a0a0a0;
  --paper: #ffffff;
  --canvas: #0a0a0a;
  --rule: #e8e4e0;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 40px rgba(0,0,0,.35);
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--canvas);
  background-image:
    radial-gradient(1100px 700px at 50% 120px, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    radial-gradient(1600px 1000px at 50% 40%, rgba(230,77,0,.05), rgba(0,0,0,0) 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img { border: 0; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

#canvas {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- header ---------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding: 36px 4px 28px;
}

.site-header .brand { line-height: 0; flex-shrink: 0; }
.site-header .brand img { width: 330px; max-width: 100%; height: auto; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}
.site-nav a {
  display: block;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #c9c9c9;
}
.site-nav a:hover { color: #ffffff; text-decoration: none; }
.site-nav li.active a { color: var(--accent); }

/* --- page body ------------------------------------------------------- */

.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

main.card { padding: 36px 40px; min-height: 400px; }

#sidebar { display: grid; gap: 20px; }
#sidebar .section { padding: 24px 28px; }
#sidebar .section .caption {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
#sidebar .section p { font-size: 14.5px; color: var(--ink-soft); }
#sidebar .section ul { list-style: none; margin: 0; padding: 0; }
#sidebar .section ul li a {
  display: block;
  padding: 5px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
#sidebar .section ul li a:hover { color: var(--accent); text-decoration: none; }

/* --- typography ------------------------------------------------------ */

h1, h2, h3, h4 { font-weight: normal; margin: 0; line-height: 1.2; }

h2, .journal-entry .title {
  font-family: var(--sans);
  font-size: clamp(25px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.journal-entry .title a { color: var(--accent); }
.journal-entry .title a:hover { color: var(--accent-hover); text-decoration: none; }

h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #444444;
  margin: 1.4em 0 .5em;
}

blockquote {
  margin: 1em 0;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
}

/* --- homepage -------------------------------------------------------- */

.lead {
  padding: 36px 40px;
  margin-bottom: 28px;
}
.lead .hero p,
.lead .featured .body { max-width: 70ch; }

.hero { margin-bottom: 40px; }
.hero h2 {
  font-size: clamp(30px, 5vw, 40px);
  margin-bottom: 14px;
}
.hero p { font-size: 17px; line-height: 1.7; color: var(--ink); }
.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 18px;
}
.hero-links .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
}
.hero-links .btn:hover { background: var(--accent-hover); text-decoration: none; }

.kicker {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 18px;
}

.featured { margin-bottom: 40px; }
.featured .journal-entry { margin-bottom: 0; }

.compact-list { list-style: none; margin: 0; padding: 0; }
.compact-list li {
  padding: 12px 0;
  border-bottom: 1px solid #f4f1ee;
}
.compact-list li:last-child { border-bottom: 0; }
.compact-list li a {
  font-size: 17px;
  font-weight: 600;
}
.compact-list .when {
  margin-left: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.compact-list p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.more-link { margin-top: 18px; font-weight: 600; }

/* --- journal entries ------------------------------------------------- */

.journal-entry { margin-bottom: 44px; }
.journal-entry:last-of-type { margin-bottom: 0; }
.journal-entry .body { margin: 14px 0; color: var(--ink); }

audio {
  display: block;
  width: 100%;
  margin: 16px 0 12px;
  accent-color: var(--accent);
}

.entry-meta {
  font-size: 13px;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.entry-meta a { font-weight: 600; }
.entry-meta .sep { padding: 0 8px; color: var(--rule); }

/* --- chapters -------------------------------------------------------- */

.chapters { margin-top: 34px; }
.chapters ol { list-style: none; margin: 0; padding: 0; }
.chapters li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #f4f1ee;
}
.chapters li:last-child { border-bottom: 0; }
.chapters .ts {
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 600;
  padding-top: 1px;
}
.chapters .ch-name { font-weight: 600; font-size: 15px; }
.chapters .ch-desc {
  grid-column: 2;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* --- pagination ------------------------------------------------------ */

.journal-navigation {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.journal-navigation a,
.journal-navigation .activePage {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 8px;
}
.journal-navigation a:hover { background: #fff3ec; text-decoration: none; }
.journal-navigation .activePage {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.journal-navigation .ellipsis { padding: 0 4px; }
.journal-navigation .next-link { margin-left: auto; font-weight: 600; }

.episode-pager {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
}
.episode-pager .next { margin-left: auto; text-align: right; }

/* --- search ---------------------------------------------------------- */

.search-form { display: flex; gap: 10px; }
.search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  font: 15px var(--sans);
  color: var(--ink);
  border: 1px solid #d9d4cf;
  border-radius: 8px;
  padding: 9px 12px;
  background: #fdfcfb;
}
.search-form input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.search-form button {
  font: 600 14px var(--sans);
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.search-form button:hover { background: var(--accent-hover); }

.search-results { list-style: none; margin: 1.5em 0 0; padding: 0; }
.search-results li { margin-bottom: 1.4em; }
.search-results li a { font-size: 17px; font-weight: 600; }
.search-results li p { margin: .3em 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* --- era browsing ---------------------------------------------------- */

.era-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 30px;
}
.era-nav a {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid #ecd9cd;
  border-radius: 999px;
  background: #fff8f4;
}
.era-nav a:hover { background: var(--accent); color: #fff; text-decoration: none; }

.era { margin-top: 36px; scroll-margin-top: 20px; }
.era-head { margin-bottom: 4px; }
.era-head.has-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 28px;
  align-items: start;
}
.era-photo { margin: 4px 0 0; }
/* Float the month photo so the episode list flows beside it and then
   reclaims the full width once the image ends (a grid column would reserve
   the photo's width for the block's whole height, wasting space below it). */
.month-block.has-photo { display: block; }
.month-block .month-photo {
  float: right;
  width: 210px;
  margin: 4px 0 14px 30px;
}
/* Inline-block list items wrap around the float; CSS multicolumn can't
   (it establishes a formatting context that stays narrow beside the float). */
.month-block.has-photo .episode-archive {
  columns: auto;
  font-size: 0; /* collapse inter-item whitespace so two cells fit per row */
}
.month-block.has-photo .episode-archive li {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  padding-right: 40px;
  vertical-align: top;
}
.era-photo-wide { margin: 14px 0 6px; }
.era-photo-wide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.era-photo-wide figcaption {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
}
.era-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.era-photo figcaption {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
}
/* --- players --------------------------------------------------------- */

.player {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0 0 30px;
}
.player-photo {
  flex: 0 0 auto;
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.player-bio { flex: 1 1 auto; min-width: 0; }
.player-bio h3 { margin-top: 0; }
.player-bio p { margin-bottom: 0; }

@media (max-width: 560px) {
  .player { gap: 14px; }
  .player-photo { width: 88px; height: 88px; }
}

.era-title {
  font-size: 24px;
  margin: 0 0 2px;
  color: var(--accent);
}
.era-dates {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.era-blurb { font-size: 14.5px; color: var(--ink-soft); }

.era-month {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: #505050;
  margin: 22px 0 6px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}
.era-month .count { font-weight: normal; color: var(--ink-faint); font-size: 13px; }

.hiatus {
  margin: 36px 0 0;
  padding: 12px 0;
  text-align: center;
  border-top: 1px dashed #ddd5cd;
  border-bottom: 1px dashed #ddd5cd;
  color: var(--ink-faint);
}
.hiatus-label {
  font-family: var(--sans);
  font-style: italic;
  font-size: 15px;
  margin-right: 12px;
}
.hiatus-dates { font-size: 12.5px; letter-spacing: .05em; }

/* --- episode archive list -------------------------------------------- */

.episode-archive {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.episode-archive li {
  break-inside: avoid;
  padding: 4px 0;
  font-size: 15px;
  border-bottom: 1px solid #f4f1ee;
}

/* --- footer ---------------------------------------------------------- */

#pageFooter {
  padding: 44px 4px 56px;
  font-size: 13px;
  line-height: 1.8;
  color: #8a8a8a;
  text-align: center;
}
#pageFooter a { color: #b0b0b0; text-decoration: underline; }

/* --- small screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .lead { padding: 26px 22px; }
  .era-head.has-photo { grid-template-columns: minmax(0, 1fr); }
  .month-block .month-photo { float: none; width: 100%; max-width: 300px; margin: 10px 0 0; }
  .month-block.has-photo .episode-archive li { width: 100%; padding-right: 0; }
  .era-photo { max-width: 340px; }
  main.card { padding: 26px 22px; min-height: 0; }
  .site-header { padding-top: 24px; justify-content: center; text-align: center; }
  .site-nav ul { justify-content: center; }
  .episode-archive { columns: 1; }
}