/* The Lagging Team — podcast pages.
   Shell (palette, nav band, footer, card, buttons) lives in shell.css, which
   every page loads first. Only what is specific to episodes, guests and tags
   belongs here. */

.page { max-width: 720px; margin: 0 auto; padding: 40px 20px 56px; }

.eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
}

.page-title { font-size: 28px; line-height: 1.25; margin: 0 0 10px; }

.page-intro { margin: 0 0 28px; color: var(--muted); font-size: 15px; }

.section-heading { font-size: 18px; margin: 32px 0 12px; }

/* Episode page */

.episode-head { margin-bottom: 24px; }

.episode-meta,
.episode-item-meta {
  margin: 0 0 8px;
  color: var(--slate);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.episode-meta .dot,
.episode-item-meta .dot { color: var(--hairline); }

.episode-title { font-size: 28px; line-height: 1.25; margin: 0; }

.episode-format {
  margin: 10px 0 0;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Player */

.player {
  margin: 0 0 28px;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px;
}

.player audio { width: 100%; }

.player-ui { display: flex; align-items: center; gap: 14px; }

.player-play {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--flame);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

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

.player-scrub {
  width: 100%;
  accent-color: var(--flame);
  margin: 0 0 6px;
}

.player-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.player-buttons { display: flex; gap: 8px; }

.player-skip,
.player-rate {
  font: inherit;
  font-size: 12px;
  color: var(--midnight);
  background: #ffffff;
  border: 1px solid var(--slate);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
}

/* Video */

.episode-video { margin: 0 0 28px; }

.video-frame {
  position: relative;
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--midnight);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Show notes */

.episode-notes h2,
.episode-chapters h2,
.guest-block h2 { font-size: 18px; margin: 0 0 12px; }

.episode-notes { margin-bottom: 28px; }

.rich-text p { margin: 0 0 14px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul,
.rich-text ol { margin: 0 0 14px; padding-left: 22px; }
.rich-text li { margin-bottom: 6px; }
.rich-text img { max-width: 100%; height: auto; border-radius: 8px; }
.rich-text h2,
.rich-text h3 { font-size: 17px; margin: 22px 0 8px; }

/* Chapters
   A native <details open>. It collapses for anyone who wants it out of the
   way and needs no JS to do it. The summary carries the h2, which keeps the
   document outline intact while making the whole row the toggle. */

.episode-chapters { margin-bottom: 28px; }

.chapters > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* 47px tall: the whole row is the toggle, and it clears the 44px tap target */
  padding: 6px 0 12px;
}

.chapters > summary::-webkit-details-marker { display: none; }

.chapters > summary h2 { margin: 0; }

.chapters-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.chapters-caret {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 4px;
  align-self: center;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(-135deg);
  transform-origin: 60% 60%;
  transition: transform 0.15s ease;
}

.chapters[open] > summary .chapters-caret { transform: rotate(45deg); }

.chapters > summary:hover .chapters-caret { border-color: var(--flame); }

.chapter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }

.chapter-list li { border-bottom: 1px solid var(--hairline); }

.chapter-jump {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--midnight);
  background: none;
  border: none;
  padding: 10px 2px;
  cursor: pointer;
}

.chapter-time {
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}

/* Guest */

.guest-block { margin-bottom: 28px; }

.guest-card { display: flex; gap: 16px; align-items: flex-start; }

.guest-header { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }

.guest-headshot { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.guest-headshot.is-large { width: 128px; height: 128px; }

.guest-detail { min-width: 0; }

.guest-name { margin: 0 0 4px; font-weight: 600; }

.guest-credentials {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}

.guest-credentials.is-standalone { display: block; margin: 4px 0 0; font-size: 14px; }

.guest-bio { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.guest-bio.is-large { margin-bottom: 16px; }

.guest-links { margin: 0; font-size: 14px; }

/* CTA — the one Flame element in its frame */

.cta-block {
  margin: 0 0 28px;
  padding: 24px;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-align: center;
}

.cta-line { margin: 0 0 14px; font-size: 17px; font-weight: 600; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  background: var(--flame);
  border: none;
  border-radius: 8px;
  padding: 13px 26px;
  cursor: pointer;
  transition: filter 120ms ease;
}

.btn:hover { filter: brightness(1.08); }

/* Transcript */

.episode-transcript { margin-bottom: 28px; }

.transcript summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.transcript-body {
  margin-top: 14px;
  max-height: 26rem;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.transcript-link { margin: 0; }

/* Pairing */

.pair-block { margin-bottom: 24px; }

.pair-link {
  display: block;
  text-decoration: none;
  color: var(--midnight);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--slate);
  border-radius: 8px;
  padding: 14px 16px;
}

.pair-label { display: block; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--slate); }

.pair-title { display: block; font-weight: 600; margin-top: 4px; }

/* Tags */

.episode-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.tag-chip {
  font-size: 13px;
  text-decoration: none;
  color: var(--midnight);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 12px;
}

/* Previous / next */

.episode-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.episode-nav-link {
  display: block;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--midnight);
}

.episode-nav-link.is-next { text-align: right; }

.episode-nav-label { display: block; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--slate); }

.episode-nav-title { display: block; font-weight: 600; margin-top: 4px; font-size: 15px; }

/* Listing */

.episode-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }

.episode-item { padding: 20px 0; border-bottom: 1px solid var(--hairline); }

.episode-item-title { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }

.episode-item-title a { color: var(--midnight); text-decoration: none; }

.episode-item-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.episode-item-summary { margin: 0; color: var(--muted); font-size: 15px; }

.empty-state { margin: 0; color: var(--muted); }

.back-link { margin: 24px 0 0; font-size: 15px; }

/* Footer */

/* Start here — the curated launch sequence above the reverse-chron archive */

.start-here-heading { margin-top: 0; }

.start-here-intro { margin: 0 0 18px; color: var(--muted); font-size: 15px; }

.start-here-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.start-here-item {
  display: flex;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.start-here-item:first-child { padding-top: 0; border-top: none; }

.start-here-number {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--flame);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.start-here-body { display: flex; flex-direction: column; gap: 4px; }

.start-here-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--midnight);
  text-decoration: none;
}

.start-here-title:hover { color: var(--flame); }

.start-here-summary { color: var(--muted); font-size: 15px; }

/* Guest directory */

.guest-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.guest-card-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  text-decoration: none;
  color: var(--midnight);
}

.guest-card-link:hover { border-color: var(--flame); }

.guest-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--flame);
  object-fit: cover;
  background: var(--ground);
}

.guest-avatar-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--midnight);
}

.guest-card-body { display: flex; flex-direction: column; gap: 3px; }

.guest-card-name { font-size: 17px; font-weight: 600; line-height: 1.3; }

.guest-card-credentials { color: var(--slate); font-size: 14px; }

.guest-card-count {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame);
}

@media (max-width: 560px) {
  .card { padding: 26px 20px; }
  .episode-title, .page-title { font-size: 24px; }
  .guest-card, .guest-header { flex-direction: column; }
  .episode-nav-link.is-next { text-align: left; }
}

/* Episode page — two columns: the reading column, and a rail that rides the
   whole page. Footer-only CTAs were the weakest pattern in every site the
   competitive study looked at. */

.page-episode {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: grid;
  grid-template-columns: minmax(0, 720px) 344px;
  gap: 56px;
  align-items: start;
}

.episode-main { min-width: 0; }

.episode-head { display: flex; gap: 24px; align-items: flex-start; }

.episode-head-body { min-width: 0; }

/* 1:1 or nothing — the square carries its own title, bottom-anchored. */
.episode-art {
  flex: 0 0 auto;
  width: 132px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 10px;
  background: var(--midnight);
  object-fit: cover;
}

.episode-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }

.rail-card { background: #ffffff; border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; }

.rail-heading {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}

.rail-lede { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* Outlined on purpose. The nav button is solid and the mid-page CTA is solid;
   a third filled Flame in the same view means none of them lead. The rail ask
   is secondary to "Start a conversation", so it is the one that gives way. */
.rail-cta {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 14.5px;
  padding: 12px 18px;
  background: transparent;
  color: var(--flame);
  border: 1.5px solid var(--flame);
}

.rail-cta:hover { background: var(--flame); color: #ffffff; }

.rail-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.rail-list li { display: flex; flex-direction: column; gap: 4px; }
.rail-list li + li { border-top: 1px solid #eceff6; padding-top: 16px; }

.rail-meta {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--flame);
}

.rail-title { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--midnight); text-decoration: none; }
.rail-title:hover { color: var(--flame); }

.rail-more { margin: 18px 0 0; font-size: 13.5px; font-weight: 600; }

@media (max-width: 1040px) {
  .page-episode { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .episode-rail { position: static; }
}

@media (max-width: 560px) {
  .page-episode { padding: 28px 20px 40px; }
  .episode-head { gap: 16px; }
  .episode-art { width: 96px; }
}