/* GENERATED by scripts/build-edge-assets.mjs — do not edit. Source: src/pages/podcast/[id].astro. */

  /* =========================================================
    START SECTION: CSS - RESET AND PAGE BASE
    Purpose: Global defaults, page shell, smooth scrolling.
  ========================================================= */

  /* Base reset, fonts, body colour/background and links are provided by the
     shared brand layer (brand.css via Layout.astro). Page-specific styles only. */

  .page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 72px;
  }

  /* =========================================================
    END SECTION: CSS - RESET AND PAGE BASE
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - BREADCRUMB
  ========================================================= */

  .ep-breadcrumb {
    margin-bottom: 24px;
  }

  .ep-breadcrumb a {
    font-family: var(--ib-font-display);
    font-weight: 600;
    text-decoration: none;
    color: var(--ib-deep-teal);
  }

  .ep-breadcrumb a:hover {
    color: var(--ib-turquoise);
  }

  .ep-disclaimer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ib-line);
    color: var(--ib-slate);
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.9;
  }

  /* =========================================================
    END SECTION: CSS - BREADCRUMB
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - HERO
    Purpose: Episode hero layout, artwork, audio player, metadata and topics.
  ========================================================= */

  .hero {
    display: grid;
    grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    padding: 32px;
    border-radius: 32px;
    background: var(--ib-paper);
    box-shadow: 0 24px 80px rgba(16, 24, 40, 0.10);
  }

  .hero-media-column {
    display: grid;
    gap: 16px;
  }

  .hero-artwork-wrap {
    padding: 14px;
    border-radius: 28px;
    background: linear-gradient(135deg, #101828, var(--ib-turquoise));
  }

  .hero-artwork {
    display: block;
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(16, 24, 40, 0.28);
  }

  .artwork-player {
    padding: 14px;
    border: 1px solid var(--ib-line);
    border-radius: 22px;
    background: var(--ib-paper);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);
  }

  .artwork-player-label {
    margin: 0 0 10px;
    color: var(--ib-orange);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .artwork-player audio {
    display: block;
    width: 100%;
    height: 38px;
  }

  .artwork-download {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    margin-top: 10px;
    padding: 0 12px;
    border: 1px solid var(--ib-line);
    border-radius: 999px;
    background: var(--ib-paper);
    color: var(--ib-slate);
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
  }

  .artwork-platforms {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .artwork-platform {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ib-line);
    border-radius: 999px;
    background: var(--ib-paper);
    color: var(--ib-slate);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
  }

  .eyebrow {
    margin: 0 0 10px;
    color: var(--ib-orange);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }

  h1 {
    max-width: 840px;
    margin-bottom: 16px;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  h2 {
    margin-bottom: 16px;
    font-size: clamp(1.55rem, 2.6vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
  }

  h3 {
    margin-bottom: 4px;
    font-size: 1rem;
  }

  .subtitle {
    max-width: 760px;
    margin-bottom: 16px;
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--ib-slate);
  }

  .intro {
    max-width: 800px;
    margin-bottom: 22px;
    font-size: 1.03rem;
    line-height: 1.7;
    color: var(--ib-slate);
  }

  .topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
  }

  .topic-list span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfeff;
    color: var(--ib-deep-teal);
    font-size: 0.86rem;
    font-weight: 800;
  }

  /* The primary topic is a link to its hub; the rest are plain labels. Style the
     link to match the label pills (no underline / same colour) so the row reads
     as one consistent set rather than "only the first is a link". */
  .topic-list a {
    color: inherit;
    text-decoration: none;
  }
  .topic-list a:hover {
    text-decoration: underline;
  }

  /* Dark mode: the pale cyan chip is jarring on a dark page — sit the light
     teal label on the themed surface instead. */
  [data-theme="dark"] .topic-list span {
    background: var(--ib-mist);
  }

  .meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
  }

  .meta-grid div {
    padding: 14px;
    border: 1px solid var(--ib-line);
    border-radius: 18px;
    background: var(--ib-mist);
  }

  .meta-grid span {
    display: block;
    margin-bottom: 3px;
    color: var(--ib-slate);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .meta-grid strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
  }

  /* =========================================================
    END SECTION: CSS - HERO
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - BUTTONS
    Purpose: Hero jump nav and general pill buttons.
  ========================================================= */

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero-jump-nav {
    margin-top: 2px;
  }

  .primary-button,
  .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
  }

  .primary-button {
    background: #101828;
    color: #ffffff;
  }

  .secondary-button {
    border: 1px solid var(--ib-line);
    background: var(--ib-paper);
    color: var(--ib-ink);
  }

  /* =========================================================
    END SECTION: CSS - BUTTONS
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - QUOTE
    Purpose: Optional pull quote below hero.
  ========================================================= */

  .quote-card {
    margin-top: 26px;
    padding: 24px 28px;
    border-radius: 24px;
    background: #101828;
    color: #ffffff;
  }

  .quote-card p {
    max-width: 920px;
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
  }

  /* =========================================================
    END SECTION: CSS - QUOTE
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - EPISODE TOOLS
    Purpose: Tabs, panels, follow toggle, tool links.
  ========================================================= */

  .episode-tools-section {
    margin-top: 26px;
  }

  .section-heading {
    margin-bottom: 14px;
  }

  .compact-heading h2 {
    margin-bottom: 0;
  }

  .episode-tools {
    overflow: hidden;
    border: 1px solid var(--ib-line);
    border-radius: 24px;
    background: var(--ib-paper);
    box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
  }

  .tools-control-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f6;
    background: var(--ib-mist);
  }

  .compact-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .compact-tab {
    padding: 8px 12px;
    border: 1px solid var(--ib-line);
    border-radius: 999px;
    background: var(--ib-paper);
    color: var(--ib-slate);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
  }

  .compact-tab.is-active {
    border-color: var(--ib-orange);
    background: #fff4e5;
    color: var(--ib-ink);
  }

  /* Dark mode: the cream active pill + flipped (now light) --ib-ink text is
     invisible. Use a translucent orange wash so the light ink reads. */
  [data-theme="dark"] .compact-tab.is-active {
    background: rgba(241, 147, 45, 0.18);
  }

  .follow-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    color: var(--ib-slate);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
  }

  .follow-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--ib-turquoise);
  }

  .compact-panel {
    display: none;
    max-height: 300px;
    overflow-y: auto;
    padding: 14px 18px 18px;
    background: var(--ib-paper);
    color: var(--ib-ink);
  }

  .compact-panel.is-active {
    display: block;
  }

  .empty-panel-message {
    margin: 0;
    color: var(--ib-slate);
    line-height: 1.6;
  }

  .compact-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .compact-link-grid a {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--ib-line);
    border-radius: 14px;
    background: var(--ib-mist);
    color: var(--ib-ink);
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
  }

  .compact-link-grid a:hover {
    background: var(--ib-mist);
  }

  /* =========================================================
    END SECTION: CSS - EPISODE TOOLS
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - CHAPTERS
    Purpose: Chapter list rows and current playback state.
  ========================================================= */

  .chapter-list {
    display: grid;
    gap: 8px;
  }

  .chapter-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ib-line);
    border-radius: 14px;
    background: var(--ib-mist);
    color: var(--ib-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .chapter-row:hover,
  .chapter-row.is-current {
    background: #ecfeff;
  }

  /* Dark mode: pale cyan highlight + light ink is low-contrast — use a
     turquoise wash the themed (light) ink reads on. */
  [data-theme="dark"] .chapter-row:hover,
  [data-theme="dark"] .chapter-row.is-current {
    background: rgba(66, 184, 166, 0.16);
  }

  .chapter-row.is-current {
    border-color: var(--ib-turquoise);
    box-shadow: inset 4px 0 0 var(--ib-turquoise);
  }

  .chapter-row span {
    color: var(--ib-deep-teal);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 900;
  }

  .chapter-row strong {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  /* =========================================================
    END SECTION: CSS - CHAPTERS
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - TRANSCRIPT
    Purpose: Transcript chapter markers, speaker blocks, cue-level tracking.
  ========================================================= */

  .transcript-list {
    display: grid;
    gap: 14px;
  }

  .transcript-chapter-marker {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    background: #fff7ed;
    color: var(--ib-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .transcript-chapter-marker:hover,
  .transcript-chapter-marker.is-current {
    background: #ffedd5;
  }

  /* Dark mode: pale peach + light ink/dark-orange timestamp is unreadable —
     use orange washes and brighten the timestamp. */
  [data-theme="dark"] .transcript-chapter-marker {
    border-color: rgba(241, 147, 45, 0.4);
    background: rgba(241, 147, 45, 0.12);
  }
  [data-theme="dark"] .transcript-chapter-marker:hover,
  [data-theme="dark"] .transcript-chapter-marker.is-current {
    background: rgba(241, 147, 45, 0.22);
  }
  [data-theme="dark"] .transcript-chapter-marker span {
    color: var(--ib-orange);
  }

  .transcript-chapter-marker.is-current {
    border-color: var(--ib-orange);
    box-shadow: inset 4px 0 0 var(--ib-orange);
  }

  .transcript-chapter-marker span {
    color: #c2410c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .transcript-chapter-marker strong {
    color: var(--ib-ink);
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .transcript-block {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--ib-line);
    border-radius: 18px;
    background: var(--ib-mist);
  }

  .transcript-block.has-current-line {
    border-color: var(--ib-turquoise);
  }

  .transcript-speaker {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    position: sticky;
    top: 0;
  }

  .transcript-avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    object-fit: cover;
  }

  .transcript-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101828;
    color: #ffffff;
    font-weight: 900;
  }

  .transcript-speaker strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .transcript-speaker span {
    display: block;
    margin-top: 3px;
    color: var(--ib-orange);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .transcript-cue-list {
    display: block;
    color: var(--ib-slate);
    font-size: 0.94rem;
    line-height: 1.48;
    word-break: normal;
    overflow-wrap: normal;
  }

  .transcript-line {
    display: inline;
    padding: 0.03em 0.16em;
    border-radius: 0.24em;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    white-space: normal;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .transcript-line::after {
    content: " ";
  }

  .transcript-line:hover {
    background: var(--ib-mist);
  }

  .transcript-line.is-current {
    background: rgba(1, 153, 202, 0.16);
    color: var(--ib-ink);
    box-shadow: none;
  }

  .transcript-line:focus {
    outline: none;
  }

  .transcript-line:focus-visible {
    outline: 2px solid rgba(1, 153, 202, 0.35);
    outline-offset: 2px;
  }

  /* Word-level (karaoke) highlight: per-word spans injected client-side from
     /podcast/<slug>/words.json. The active word gets a solid turquoise pop;
     --ib-ink flips with theme so the text reads on turquoise in both modes.
     Absent on episodes with no word VTT (the cue-level panel is unchanged). */
  .transcript-line .t-word {
    transition: background-color 0.12s ease, color 0.12s ease;
    border-radius: 0.2em;
    padding: 0.02em 0.06em;
  }

  .transcript-line .t-word.is-current {
    background: var(--ib-turquoise);
    color: var(--ib-ink);
  }

  /* =========================================================
    END SECTION: CSS - TRANSCRIPT
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - TOPIC CARDS
    Purpose: Topics tab and Ideas from this episode cards.
  ========================================================= */

  .topic-explainer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .main-topic-grid {
    margin-top: 4px;
  }

  .topic-explainer-card {
    padding: 16px;
    border: 1px solid var(--ib-line);
    border-radius: 18px;
    background: var(--ib-mist);
  }

  .topic-explainer-card h3 {
    margin-bottom: 8px;
    color: var(--ib-ink);
    font-size: 1rem;
    line-height: 1.25;
  }

  .topic-explainer-card p {
    margin: 0;
    color: var(--ib-slate);
    font-size: 0.94rem;
    line-height: 1.6;
  }

  /* =========================================================
    END SECTION: CSS - TOPIC CARDS
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - CONTENT GRID
    Purpose: Main content cards, editorial blocks, resources.
  ========================================================= */

  .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    margin-top: 34px;
  }

  .content-card,
  .cta-card,
  .geek-panel {
    padding: 26px;
    border-radius: 28px;
    background: var(--ib-paper);
    box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
  }

  .content-card + .content-card,
  .cta-card + .content-card,
  .content-card + .geek-panel {
    margin-top: 22px;
  }

  .content-card p {
    line-height: 1.7;
    color: var(--ib-slate);
  }

  .editorial-block + .editorial-block,
  .editorial-block + .key-takeaway,
  .key-takeaway + .editorial-block {
    margin-top: 22px;
  }

  .editorial-block h3,
  .key-takeaway h3 {
    margin-bottom: 10px;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .clean-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--ib-slate);
    line-height: 1.6;
  }

  .key-takeaway {
    padding: 18px;
    border-radius: 20px;
    background: #fff4e5;
  }

  .key-takeaway p {
    margin-bottom: 0;
    color: var(--ib-ink);
    font-weight: 700;
  }

  .link-list,
  .cta-list,
  .social-link-list {
    display: grid;
    gap: 10px;
  }

  .link-list a,
  .cta-list a,
  .social-link-list a {
    display: block;
    padding: 13px 15px;
    border-radius: 16px;
    background: var(--ib-mist);
    color: var(--ib-ink);
    font-weight: 900;
    text-decoration: none;
  }

  .social-link-list a {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .social-link-list a svg {
    flex: none;
    color: var(--ib-deep-teal);
  }

  /* =========================================================
    END SECTION: CSS - CONTENT GRID
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - SIDEBAR CARDS
    Purpose: Contributor cards, guest links and CTA card.
  ========================================================= */

  .cta-card {
    margin-top: 22px;
    background: var(--ib-orange);
    color: var(--ib-ink);
  }

  .cta-card .eyebrow {
    color: var(--ib-ink);
  }

  .cta-list a {
    background: rgba(255, 255, 255, 0.78);
  }

  /* Dark mode: the white pill sits on the (always-orange) CTA card in both
     themes, so pin dark ink — otherwise the flipped light --ib-ink vanishes. */
  [data-theme="dark"] .cta-list a {
    color: #14232b;
  }

  .contributor-stack,
  .guest-social-stack {
    display: grid;
    gap: 14px;
  }

  .contributor-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--ib-line);
    border-radius: 20px;
    background: var(--ib-mist);
  }

  .contributor-avatar {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
  }

  .contributor-card p,
  .guest-social-card p {
    margin-bottom: 0;
    font-size: 0.92rem;
    color: var(--ib-slate);
  }

  .contributor-card .role {
    margin-bottom: 3px;
    color: var(--ib-orange);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .contributor-card .contributor-bio {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-muted, #4a4a4a);
  }

  .guest-social-card {
    padding: 14px;
    border: 1px solid var(--ib-line);
    border-radius: 20px;
    background: var(--ib-mist);
  }

  .guest-social-header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 14px;
  }

  /* =========================================================
    END SECTION: CSS - SIDEBAR CARDS
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - TECHNICAL DETAILS
    Purpose: Collapsed geek panel for debug/archive/RSS metadata.
  ========================================================= */

  .geek-panel {
    margin-top: 22px;
  }

  .geek-panel summary {
    cursor: pointer;
    color: var(--ib-ink);
    font-size: 1rem;
    font-weight: 900;
  }

  .geek-panel dl {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
  }

  .geek-panel dl div {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f6;
  }

  .geek-panel dt {
    color: var(--ib-slate);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .geek-panel dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ib-slate);
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .geek-panel a {
    font-weight: 800;
  }

  /* =========================================================
    END SECTION: CSS - TECHNICAL DETAILS
  ========================================================= */


  /* =========================================================
    START SECTION: CSS - RESPONSIVE
    Purpose: Tablet and mobile layout rules.
  ========================================================= */

  @media (max-width: 920px) {
    .hero,
    .content-grid {
      grid-template-columns: 1fr;
    }

    .hero-media-column {
      max-width: 360px;
    }

    .meta-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transcript-block {
      grid-template-columns: 1fr;
    }

    .transcript-speaker {
      position: static;
    }
  }

  @media (max-width: 760px) {
    .tools-control-bar {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 640px) {
    .compact-link-grid,
    .topic-explainer-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .page-shell {
      width: min(100% - 20px, 1180px);
      padding-top: 16px;
    }

    .hero,
    .episode-tools,
    .content-card,
    .cta-card,
    .geek-panel {
      border-radius: 22px;
    }

    .hero {
      padding: 18px;
    }

    .meta-grid,
    .contributor-card,
    .guest-social-header,
    .chapter-row {
      grid-template-columns: 1fr;
    }

    .site-header {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  /* =========================================================
    END SECTION: CSS - RESPONSIVE
  ========================================================= */