/* ============================================================
   LitHERacy — transcript pages
   ============================================================
   Long-form reading: a narrow measure, generous line height,
   and speakers told apart at a glance rather than by reading
   the name each time.
   ============================================================ */
.tr-wrap { max-width: 780px; margin: 0 auto; padding: 46px 24px 80px; }

.tr-head { padding-bottom: 26px; border-bottom: 2px solid var(--ink); margin-bottom: 34px; }
.tr-back {
  display: inline-block; margin-bottom: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--violet); text-decoration: none;
}
.tr-back:hover { text-decoration: underline; }
.tr-head .kicker {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 10px;
}
.tr-head h1 {
  font-family: var(--font-display), sans-serif; text-transform: uppercase;
  font-size: clamp(34px, 6vw, 56px); line-height: 0.98; margin: 0 0 12px;
  text-wrap: balance;
}
.tr-head .tr-guest { margin: 0 0 12px; font-size: 16px; color: rgba(15,15,15,0.75); }
.tr-head .tr-note {
  margin: 0; font-family: var(--font-hand), cursive;
  font-size: 20px; color: var(--violet);
}

/* section headings from the transcript itself */
.tr-body h2 {
  font-family: var(--font-display), sans-serif; text-transform: uppercase;
  font-size: clamp(20px, 3vw, 27px); line-height: 1.1;
  margin: 48px 0 22px; padding-top: 22px;
  border-top: 1px solid rgba(15,15,15,0.14);
  text-wrap: balance;
}
.tr-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.tr-turn { margin: 0 0 22px; }
.tr-turn .tr-who {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px;
}
.tr-turn .tr-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
}
.tr-turn .tr-at {
  font-size: 12px; color: rgba(15,15,15,0.42);
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.tr-turn p {
  margin: 0; font-size: 17px; line-height: 1.72;
  color: rgba(15,15,15,0.86); max-width: 66ch;
}

/* the host reads differently from the guest, without needing a legend */
.tr-turn[data-speaker="1"] { padding-left: 16px; border-left: 3px solid var(--lavender); }
.tr-turn[data-speaker="1"] .tr-name { color: var(--violet); }

.tr-foot { margin-top: 52px; padding-top: 28px; border-top: 2px solid var(--ink); }

@media (max-width: 620px) {
  .tr-wrap { padding: 34px 20px 60px; }
  .tr-turn p { font-size: 16.5px; }
  .tr-turn[data-speaker="1"] { padding-left: 12px; }
}

/* ============================================================
   Double episodes — part switcher
   ============================================================
   Both halves are one conversation, so each transcript carries a
   way straight across to the other rather than routing you back
   through the episode page.
   ============================================================ */
.tr-part { color: var(--violet); }

.tr-switch {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}
.tr-switch a,
.tr-switch span {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 14px;
  border: 1.5px solid var(--violet);
  border-radius: 999px;
  text-decoration: none;
}
.tr-switch a { color: var(--violet); }
.tr-switch a:hover { background: var(--lavender); color: var(--ink); }
/* the part you are on: filled, and not a link */
.tr-switch span[aria-current] {
  background: var(--violet); color: var(--cream);
  border-color: var(--violet);
}


/* Landing from a chapter link: clear the sticky nav, and mark the
   section you were sent to so it is obvious you arrived somewhere. */
.tr-body h2 { scroll-margin-top: 96px; }
.tr-body h2:target { color: var(--violet); }
.tr-body h2:target::before {
  content: ""; position: absolute; left: -18px; width: 6px; height: 1.1em;
  background: var(--lavender);
}
.tr-body h2 { position: relative; }