/* Podcast pages: /the-bonus-podcast/ and every generated /the-bonus-podcast/<slug>/ page.
   Built from PODCAST_BRIEF.md in the site design system: same tokens and
   patterns as the homepage (gold rule under each H2, mono eyebrows, cream /
   charcoal grounds). No new colours. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 6rem; }

.pc-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold);
}
.pc-rule { width: 3.5rem; height: 3px; background: var(--color-gold); margin: 1.25rem 0 1.75rem; }
.pc-sec { padding: 4rem 0; border-top: 1px solid var(--color-stone-divider); }
@media (min-width: 768px) { .pc-sec { padding: 6rem 0; } }
.pc-sec h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
@media (min-width: 768px) { .pc-sec h2 { font-size: 2.25rem; } }
.pc-body p { font-size: 1.125rem; line-height: 1.7; color: #44403c; }
.pc-body p + p { margin-top: 1rem; }
.pc-body strong { color: var(--color-charcoal); font-weight: 600; }

/* ---- hero ---- */
.pc-hero { padding: 3rem 0 4rem; }
@media (min-width: 768px) { .pc-hero { padding: 4.5rem 0 5.5rem; } }
.pc-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .pc-hero-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center; } }
.pc-hero h1 { margin-top: 0 !important; font-size: 2.75rem; line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; }
@media (min-width: 768px) { .pc-hero h1 { font-size: 4.25rem; } }
.pc-dollar { color: var(--color-gold); }
.pc-sub { margin-top: .9rem; font-size: 1.25rem; line-height: 1.35; color: var(--color-charcoal); font-weight: 500; }
@media (min-width: 768px) { .pc-sub { font-size: 1.4rem; } }
.pc-lead { font-size: 1.375rem !important; line-height: 1.45 !important; color: var(--color-charcoal) !important; font-weight: 500; }
.pc-hero-btns { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.pc-hero-btns a { text-align: center; }
@media (min-width: 560px) { .pc-hero-btns { flex-direction: row; align-items: center; gap: 1.25rem; } }
.pc-btn-2 {
  display: inline-block; padding: .75rem 1.25rem; border: 1px solid var(--color-charcoal);
  font-weight: 500; color: var(--color-charcoal); transition: background .2s, color .2s;
}
.pc-btn-2:hover { background: var(--color-charcoal); color: var(--color-off-white); }

/* on-page anchor nav (brief §15) */
.pc-anchors { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-stone-divider); }
.pc-anchors a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #78716c; padding: .5rem 0; }
.pc-anchors a:hover { color: var(--color-gold); }

/* ---- placeholders: deliberately unmistakable so nothing ships by accident ---- */
.pc-ph { border: 2px dashed #D6D3D1; border-radius: 4px; background: #f7f7f5; padding: 1.25rem 1.4rem; color: #78716c; }
.pc-ph-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: #a8a29e;
}

/* cover art */
.pc-cover-art { display: block; width: 100%; max-width: 24rem; margin: 0 auto; }
/* Below the two-column split the cover leads, smaller, so a phone visitor
   sees the show (and Andrew) before the copy (brief §17). */
@media (max-width: 959px) {
  .pc-hero-grid > :last-child { order: -1; }
  .pc-cover-art { max-width: 13rem; margin: 0; }
}
.pc-cover-art img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(31, 31, 31, .35);
}

/* ---- platform buttons: inert until real links exist; big tap targets ---- */
.pc-platforms { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 560px) { .pc-platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-platform {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 3.5rem; padding: 0 1.1rem; border: 1px solid #D6D3D1; border-radius: 6px;
  background: #fff; color: #a8a29e; font-weight: 500; cursor: not-allowed;
}
.pc-platform em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* ---- big idea + closing bands ---- */
.pc-band { background: var(--color-charcoal); color: var(--color-off-white); padding: 4.5rem 0; }
@media (min-width: 768px) { .pc-band { padding: 6.5rem 0; } }
.pc-band-q { font-size: 1.875rem; line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; max-width: 46rem; }
@media (min-width: 768px) { .pc-band-q { font-size: 2.75rem; } }
.pc-band-q em { font-style: normal; color: #E4B872; }
.pc-band-body { margin-top: 2rem; max-width: 40rem; }
.pc-band-body p { font-size: 1.125rem; line-height: 1.7; color: rgba(250, 250, 248, .8); }
.pc-band-body p + p { margin-top: 1rem; }
.pc-band-body strong { color: var(--color-off-white); font-weight: 600; }
.pc-btn-light {
  display: inline-block; margin-top: 2.25rem; padding: .8rem 1.4rem;
  background: var(--color-off-white); color: var(--color-charcoal) !important; font-weight: 500;
}
.pc-btn-light:hover { background: var(--color-gold); color: #fff !important; }

/* ---- grids ---- */
.pc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-card { border: 1px solid var(--color-stone-divider); background: #fff; padding: 1.4rem 1.4rem 1.5rem; }
.pc-card h3 { font-size: 1.0625rem; font-weight: 600; color: var(--color-charcoal); }
.pc-card p { margin-top: .45rem; font-size: .975rem; line-height: 1.6; color: #57534e; }
.pc-num { font-family: var(--font-mono); font-size: 12px !important; font-weight: 500; color: var(--color-gold) !important; margin: 0 0 .6rem !important; }

/* planned topics (brief §9): a list, clearly not episodes */
.pc-planned { margin-top: 2.5rem; }
.pc-planned ul { margin-top: 1rem; display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pc-planned ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.pc-planned li { padding: .8rem 0; border-bottom: 1px solid #E7E5E4; color: #57534e; display: flex; gap: .75rem; }
.pc-planned li::before { content: "+"; color: var(--color-gold); font-weight: 600; }

/* ---- about ---- */
.pc-about { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 768px) { .pc-about { grid-template-columns: 15rem 1fr; gap: 3.5rem; } }
.pc-about img { width: 11rem; height: auto; }
@media (min-width: 768px) { .pc-about img { width: 15rem; } }
.pc-pull { border-left: 3px solid var(--color-gold); padding-left: 1.1rem; font-size: 1.2rem !important; line-height: 1.5 !important; color: var(--color-charcoal) !important; font-weight: 500; }

/* ============================================================
   NATIVE AUDIO PLAYER (the-bonus-podcast/player.js)
   The <audio controls> element is the no-JS fallback; player.js hides it and
   shows these controls. Same element, so playback is the browser's own. */
.pc-pl { margin-top: 1.25rem; }
.pc-pl audio { width: 100%; }
.pc-pl-ui { display: flex; align-items: center; gap: .9rem; }
.pc-pl-ui[hidden] { display: none; }
.pc-pl-btn {
  flex: none; width: 3.25rem; height: 3.25rem; border-radius: 999px;
  background: var(--color-charcoal); color: var(--color-off-white);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.pc-pl-btn:hover, .pc-pl-btn:focus-visible { background: var(--color-gold); }
.pc-pl-btn svg { width: 1.25rem; height: 1.25rem; }
.pc-pl-main { flex: 1; min-width: 0; }
.pc-pl-seek { width: 100%; accent-color: var(--color-gold); height: 1.5rem; cursor: pointer; }
.pc-pl-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: #78716c; margin-top: .1rem;
}
.pc-pl-rate {
  flex: none; min-width: 3rem; height: 2.25rem; padding: 0 .6rem;
  border: 1px solid #D6D3D1; border-radius: 999px; background: #fff;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-charcoal);
}
.pc-pl-rate:hover, .pc-pl-rate:focus-visible { border-color: var(--color-gold); color: var(--color-gold); }
.pc-pl-dark .pc-pl-btn { background: var(--color-off-white); color: var(--color-charcoal); }
.pc-pl-dark .pc-pl-btn:hover { background: var(--color-gold); color: #fff; }

/* ---- episode / trailer feature (main page) ---- */
.pc-feature { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: .5rem; }
@media (min-width: 768px) { .pc-feature { grid-template-columns: 14rem 1fr; gap: 2.25rem; align-items: start; } }
.pc-feature-img img, .pc-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.pc-feature-img { max-width: 14rem; }
.pc-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #78716c; }
.pc-feature h3 { margin-top: .4rem; font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--color-charcoal); }
.pc-feature h3 a:hover { color: var(--color-gold); }
.pc-excerpt { margin-top: .7rem; color: #57534e; line-height: 1.65; }
.pc-more { display: inline-block; margin-top: 1.1rem; font-weight: 500; color: var(--color-charcoal); }
.pc-more:hover { color: var(--color-gold); }
.pc-note { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-stone-divider); color: #57534e; }
.pc-note a { color: var(--color-charcoal); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pc-trailer-mini { margin-top: 2.5rem; border: 1px solid var(--color-stone-divider); background: #f7f7f5; padding: 1.4rem 1.5rem; }
.pc-trailer-mini .pc-eyebrow { margin-bottom: .3rem; }

/* ---- episode cards (archive) ---- */
.pc-ep-card { display: flex; flex-direction: column; border: 1px solid var(--color-stone-divider); background: #fff; transition: border-color .2s; }
.pc-ep-card:hover { border-color: var(--color-gold); }
.pc-ep-card .pc-card-img img { border-radius: 0; }
.pc-ep-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pc-ep-body h3 { font-size: 1.075rem; line-height: 1.35; font-weight: 600; color: var(--color-charcoal); margin-top: .35rem; }
.pc-ep-body p { margin-top: .5rem; font-size: .95rem; line-height: 1.6; color: #57534e; }
.pc-ep-cta { margin-top: auto; padding-top: 1rem; font-weight: 500; color: var(--color-charcoal); }
.pc-ep-card:hover .pc-ep-cta { color: var(--color-gold); }

/* ---- transcript ---- */
.pc-transcript { margin-top: 1.25rem; border-top: 1px solid var(--color-stone-divider); }
.pc-transcript summary {
  list-style: none; cursor: pointer; padding: 1.1rem 0; font-weight: 500; color: var(--color-charcoal);
  display: flex; justify-content: space-between; align-items: center;
}
.pc-transcript summary::-webkit-details-marker { display: none; }
.pc-transcript summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--color-gold); }
.pc-transcript[open] summary::after { content: "\2212"; }
.pc-transcript .pc-body { padding-bottom: 1.5rem; }

/* ---- episode page ---- */
.pc-ep-hero { padding: 2.5rem 0 3rem; }
@media (min-width: 768px) { .pc-ep-hero { padding: 3.5rem 0 4rem; } }
.pc-back { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #78716c; }
.pc-back:hover { color: var(--color-gold); }
.pc-ep-hero h1 { margin-top: 1rem !important; font-size: 2.125rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 768px) { .pc-ep-hero h1 { font-size: 2.875rem; } }
.pc-video { position: relative; aspect-ratio: 16 / 9; margin-top: 2rem; background: #000; }
.pc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pc-notes a { color: var(--color-charcoal); text-decoration: underline; text-underline-offset: 3px; }
.pc-notes ul, .pc-notes ol { margin: 1rem 0 0 1.25rem; font-size: 1.075rem; line-height: 1.7; color: #44403c; }
.pc-notes ul { list-style: disc; } .pc-notes ol { list-style: decimal; }
.pc-notes h3, .pc-notes h4 { margin-top: 1.5rem; font-weight: 600; color: var(--color-charcoal); }

/* ---- platform links (real) ---- */
a.pc-platform { color: var(--color-charcoal); cursor: pointer; transition: border-color .2s, color .2s; }
a.pc-platform:hover, a.pc-platform:focus-visible { border-color: var(--color-gold); color: var(--color-gold); }
a.pc-platform em { color: #a8a29e; }
.pc-hero-listen { margin-top: 1.25rem; font-size: .95rem; color: #78716c; }
.pc-hero-listen a { color: var(--color-charcoal); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pc-hero-listen a:hover { color: var(--color-gold); }
.pc-trailer-mini h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-charcoal); }

/* ---- episode page: own artwork beside the title (same 14rem treatment as
   Latest Episode); no image at all when the episode has none ---- */
.pc-ep-head { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .pc-ep-head { grid-template-columns: 14rem 1fr; gap: 2.25rem; align-items: center; } }
.pc-ep-head h1 { margin-top: 0 !important; }

/* show notes: space between a list and the paragraph after it */
.pc-notes ul + p, .pc-notes ol + p { margin-top: 1rem; }