/*
       * Nature-inspired editorial display type.
       * Harding Display is proprietary to Nature, so Fraunces is used here
       * as the closest freely available web-font alternative.
       */
      @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700..900&display=swap");

      :root {
        --ink: #111214;
        --muted: #6b6f76;
        --meta: #8a8f96;
        --line: #e3e5e8;
        --page: #fafafa;
        --slate: #36454f;
        --card-radius: 6px;
        --accent: #f23c3c;
        --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
        --font-editorial: "Fraunces", "Iowan Old Style", "Palatino Linotype",
          Georgia, serif;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        background: white;
        color: var(--ink);
        font-family: var(--font-ui);
        -webkit-font-smoothing: antialiased;
      }

      /*
       * Editorial headline system. Keeping UI labels, metadata and body copy
       * in the sans-serif family preserves clarity at small sizes.
       */
      .section-head h2,
      .most-popular h2,
      .featured-hero-title,
      .featured-title,
      .popular-title,
      .subscribe-bar p,
      .episode-title,
      .panel-title {
        font-family: var(--font-editorial);
        font-optical-sizing: auto;
        font-style: normal;
        font-synthesis: none;
      }
      .container {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 32px 28px;
      }
      .section-divider {
        border-top: 1px solid var(--line);
        margin: 0 32px;
      }

      /* Shared media */
      .thumbnail-image {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .icon-sprite {
        display: none;
      }

      .featured-hero,
      .featured-item,
      .popular-item,
      .episode-card {
        color: inherit;
        text-decoration: none;
      }

      .featured-hero-thumb,
      .featured-thumb,
      .popular-thumb,
      .episode-thumb {
        position: relative;
        overflow: hidden;
        background: #1a1c20;
      }

      .featured-hero-thumb,
      .featured-thumb,
      .episode-thumb {
        aspect-ratio: 3/2;
      }

      .featured-hero-thumb,
      .episode-thumb {
        border-radius: var(--card-radius);
      }

      .featured-thumb,
      .popular-thumb {
        border-radius: 4px;
      }

      .featured-hero:hover .featured-hero-thumb,
      .featured-item:hover .featured-thumb,
      .popular-item:hover .popular-thumb,
      .episode-card:hover .episode-thumb {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
      }

      /* Header */
      .site-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
        padding: 10px 22px;
        border-bottom: 1px solid var(--line);
      }
      .header-lead {
        justify-self: start;
      }

      .header-avatar {
        display: block;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        overflow: hidden;
        background: #d9dbdf;
      }
      .header-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

.header-brand {
  display: block;
  justify-self: center;
  color: black;
  font-family: var(--font-editorial);
  font-size: clamp(38px, 4vw, 50px);
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-decoration: none;
  white-space: nowrap;
}

.header-brand:hover {
  color: black;
}

      .header-actions {
        display: flex;
        align-items: center;
        justify-self: end;
        gap: 14px;
      }
      .icon-button {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: black;
        cursor: pointer;
      }
      .icon-button svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .icon-button:hover {
        background: #f0f1f3;
      }
      .icon-button:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
      }

      .subscribe-link {
        display: inline-block;
        background: var(--accent);
        color: #fff;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        padding: 12px 17px;
        border-radius: 6px;
      }
      .subscribe-link:hover {
        background: #F02424;
      }
      .sign-in-link {
        font-size: 14.5px;
        font-weight: 500;
        color: black;
        text-decoration: none;
      }
      .sign-in-link:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      @media (max-width: 700px) {
        .site-header {
          padding: 12px 16px;
          gap: 10px;
        }
.header-brand {
  font-size: clamp(25px, 7vw, 32px);
  letter-spacing: -0.05em;
}
        .header-avatar {
          width: 36px;
          height: 36px;
        }
        .header-actions {
          gap: 8px;
        }
        .subscribe-link {
          padding: 10px 13px;
          font-size: 13.5px;
        }
        .sign-in-link {
          display: none;
        }
      }

      /* Section headings */
      .section-head,
      .most-popular {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .section-head {
        padding: 26px 0 22px;
      }

      .most-popular {
        padding: 16px 0 20px;
      }

      .section-head h2,
      .most-popular h2 {
        margin: 0;
        font-weight: 800;
        color: black;
        line-height: 1.05;
        letter-spacing: -0.028em;
      }

      .section-head h2 {
        font-size: 23px;
      }

      .most-popular h2 {
        font-size: 18px;
      }

      .view-all-link {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: black;
        text-decoration: none;
      }
      .view-all-link:hover {
        color: black;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      /* Featured stories */
      .featured-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
        padding: 60px 0 4px;
      }

      /* Featured hero */
      .featured-hero {
        display: block;
      }
      .featured-hero-body {
        text-align: center;
        padding: 30px 26px 0;
      }
      .featured-hero-title {
        margin: 0;
        font-size: 32px;
        font-weight: 700;
        color: black;
        line-height: 1.08;
        letter-spacing: -0.035em;
      }
      .featured-hero:hover .featured-hero-title {
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .featured-hero-blurb {
        margin: 8px 0 0;
        font-size: 18px;
        line-height: 1.25;
        color: black;
        font-family: Georgia, "Times New Roman", serif;
      }
      .featured-hero .story-meta {
        justify-content: center;
        margin-top: 14px;
      }

      /* Featured list */
      .featured-list {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;
        border-left: 1px solid var(--line);
        padding-left: 16px;
      }
      .featured-item {
        display: flex;
        align-items: flex-start;
        gap: 22px;
      }
      .featured-text {
        flex: 1;
        min-width: 0;
      }
      .featured-title {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        color: black;
        line-height: 1.14;
        letter-spacing: -0.026em;
      }
      .featured-item:hover .featured-title {
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .featured-blurb {
        margin: 8px 0 0;
        font-size: 16px;
        line-height: 1.3;
        color: black;
        font-family: Georgia, "Times New Roman", serif;
      }
      .featured-thumb {
        flex: none;
        width: 160px;
      }

      @media (max-width: 1000px) {
        .featured-grid {
          grid-template-columns: 1fr;
          gap: 34px;
        }
        .featured-list {
          border-left: 0;
          padding-left: 0;
          border-top: 1px solid var(--line);
          padding-top: 30px;
        }
        .featured-hero-title {
          font-size: 26px;
        }
      }
      @media (max-width: 520px) {
        .featured-item {
          gap: 14px;
        }
        .featured-thumb {
          width: 112px;
        }
        .featured-title {
          font-size: 17px;
        }
        .featured-hero-body {
          padding: 24px 0 0;
        }
      }

      /* Popular stories */
      .popular-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .popular-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 0 16px;
        border-left: 1px solid var(--line);
      }
      .popular-item:first-child {
        border-left: 0;
        padding-left: 0;
      }
      .popular-item:last-child {
        padding-right: 0;
      }
      .popular-text {
        flex: 1;
        min-width: 0;
      }
      .popular-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: black;
        line-height: 1.15;
        letter-spacing: -0.022em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .popular-item:hover .popular-title {
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .popular-thumb {
        flex: none;
        width: 62px;
        aspect-ratio: 1/1;
      }

      @media (max-width: 1000px) {
        .popular-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 26px 0;
        }
        .popular-item:nth-child(odd) {
          border-left: 0;
          padding-left: 0;
        }
        .popular-item:nth-child(even) {
          padding-right: 0;
        }
      }
      @media (max-width: 560px) {
        .popular-grid {
          grid-template-columns: 1fr;
          gap: 22px;
        }
        .popular-item {
          border-left: 0;
          padding: 0;
        }
      }

      /* Subscription callout */
      .subscribe-bar {
        background: #D8ECFF;
        margin: 40px 0 40px;
        padding: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 26px;
        flex-wrap: wrap;
      }
      .subscribe-bar p {
        margin: 0;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.12;
        color: black;
        letter-spacing: -0.028em;
        text-align: center;
      }
      @media (max-width: 560px) {
        .subscribe-bar {
          padding: 26px 18px;
          gap: 16px;
        }
        .subscribe-bar p {
          font-size: 18px;
        }
      }

      /* Episode grid */
      .episode-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 65px 26px;
        margin: 0 0 75px;
      }
      @media (max-width: 1100px) {
        .episode-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @media (max-width: 820px) {
        .episode-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 520px) {
        .episode-grid {
          grid-template-columns: 1fr;
        }
        .container {
          padding: 0 18px 40px;
        }
        .section-divider {
          margin: 0 18px;
        }
      }

      .episode-card {
        display: block;
        min-width: 0;
      }

      /* Episode text */
      .episode-title {
        margin: 14px 0 0;
        font-size: 19px;
        font-weight: 700;
        color: black;
        line-height: 1.15;
        letter-spacing: -0.026em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .episode-card:hover .episode-title {
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .story-meta {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        color: #000;
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
      }

      .story-meta-icon {
        flex: none;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }


      /* Footer */
      .site-footer {
        background: #ececec;
        padding: 0 0 30px;
      }
      .footer-inner {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .footer-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        padding-top: 26px;
        border-top: 1px solid #d5d7da;
      }
.footer-brand {
  display: block;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: 32px;
  font-weight: 900;
  font-optical-sizing: auto;
  line-height: 1;
  letter-spacing: -0.05em;
  text-decoration: none;
  white-space: nowrap;
}

.footer-brand:hover {
  color: var(--ink);
}
      .footer-links {
        display: flex;
        align-items: center;
        gap: 28px;
        flex-wrap: wrap;
      }
      .footer-links a {
        font-size: 15px;
        font-weight: 400;
        color: var(--slate);
        text-decoration: none;
        white-space: nowrap;
      }
      .footer-links a:hover {
        color: var(--ink);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .footer-bottom {
        margin-top: 16px;
        text-align: right;
        font-size: 13px;
        color: var(--muted);
      }

      @media (max-width: 820px) {
        .footer-top {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
        }
        .footer-links {
          gap: 20px;
        }
        .footer-links a {
          font-size: 14px;
        }
        .footer-bottom {
          text-align: left;
        }
      }
      @media (max-width: 520px) {
        .footer-inner {
          padding: 0 18px;
        }
        .footer-links {
          gap: 14px 20px;
        }
      }

      /* One-page episode experience */
      :root {
        --player-height: 104px;
        --player-bg: #121619;
        --player-ink: #f8fafb;
        --player-muted: #aeb7bd;
      }
      body.player-active {
        padding-bottom: calc(var(--player-height) + 22px);
      }
      body.panel-open {
        overflow: hidden;
      }
      .featured-hero,
      .featured-item,
      .popular-item,
      .episode-card {
        cursor: pointer;
      }
      .featured-hero[aria-current="true"] .featured-hero-thumb,
      .featured-item[aria-current="true"] .featured-thumb,
      .popular-item[aria-current="true"] .popular-thumb,
      .episode-card[aria-current="true"] .episode-thumb {
        box-shadow: 0 0 0 3px var(--accent);
      }
      .featured-hero[aria-current="true"] .featured-hero-title,
      .featured-item[aria-current="true"] .featured-title,
      .popular-item[aria-current="true"] .popular-title,
      .episode-card[aria-current="true"] .episode-title {
        color: var(--accent);
      }

      .episode-player {
        position: fixed;
        z-index: 90;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: var(--player-height);
        color: var(--player-ink);
        background:
          radial-gradient(circle at 8% -120%, rgba(242, 60, 60, 0.72), transparent 38%),
          radial-gradient(circle at 92% 160%, rgba(102, 126, 234, 0.34), transparent 34%),
          linear-gradient(135deg, #1b2024, var(--player-bg));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0;
        box-shadow:
          0 24px 64px rgba(0, 0, 0, 0.32),
          0 4px 16px rgba(0, 0, 0, 0.2);
        transform: translateY(calc(100% + 28px));
        opacity: 0;
        visibility: hidden;
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.25s ease,
          visibility 0.25s;
        overflow: hidden;
      }
      .episode-player.is-visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
      }
      .player-accent-line {
        position: absolute;
        inset: 0 0 auto;
        height: 2px;
        background: linear-gradient(90deg, #ff5454, #ff9f66 40%, #8c76ff 100%);
      }
      .player-layout {
        min-height: var(--player-height);
        width: 100%;
        display: grid;
        grid-template-columns: minmax(240px, 320px) minmax(360px, 1fr) minmax(220px, 300px);
        align-items: center;
        gap: 22px;
        max-width: none;
        margin: 0;
        padding: 14px 44px 14px 20px;
      }
      .player-episode {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 13px;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
      }
      .player-cover-wrap {
        position: relative;
        flex: none;
        width: 68px;
        height: 68px;
        border-radius: 11px;
        overflow: hidden;
        background: #2a3035;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
      }
      .player-cover {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .playing-pulse {
        position: absolute;
        right: 6px;
        bottom: 6px;
        display: flex;
        align-items: flex-end;
        gap: 2px;
        height: 14px;
        padding: 3px 4px;
        border-radius: 5px;
        background: rgba(10, 12, 14, 0.78);
      }
      .playing-pulse i {
        width: 2px;
        height: 4px;
        border-radius: 2px;
        background: #ff5a5f;
      }
      .episode-player.is-playing .playing-pulse i {
        animation: player-pulse 0.75s ease-in-out infinite alternate;
      }
      .episode-player.is-playing .playing-pulse i:nth-child(2) {
        animation-delay: -0.42s;
      }
      .episode-player.is-playing .playing-pulse i:nth-child(3) {
        animation-delay: -0.18s;
      }
      @keyframes player-pulse {
        to { height: 11px; }
      }
      .player-copy {
        min-width: 0;
      }
      .player-kicker {
        display: block;
        margin-bottom: 4px;
        color: #ff777a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .player-title {
        display: block;
        overflow: hidden;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--font-ui);
      }
      .player-subtitle {
        display: block;
        margin-top: 4px;
        overflow: hidden;
        color: var(--player-muted);
        font-size: 11.5px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--font-ui);
      }
      .player-center {
        min-width: 0;
      }
      .transport-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-bottom: 8px;
      }
      .player-button {
        flex: none;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--player-muted);
        cursor: pointer;
        transition: 0.16s ease;
      }
      .player-button:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
      }
      .player-button svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .player-button.play-toggle {
        width: 46px;
        height: 46px;
        color: #fff;
        background: var(--accent);
        box-shadow: 0 7px 22px rgba(242, 60, 60, 0.36);
      }
      .player-button.play-toggle:hover {
        transform: scale(1.045);
        background: #ff4b4f;
      }
      .play-toggle .pause-icon,
      .episode-player.is-playing .play-toggle .play-icon {
        display: none;
      }
      .episode-player.is-playing .play-toggle .pause-icon {
        display: block;
      }
      .skip-button {
        position: relative;
      }
      .skip-button span {
        position: absolute;
        font-size: 7px;
        font-weight: 800;
      }
      .speed-button {
        width: auto;
        min-width: 35px;
        padding: 0 7px;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 800;
      }
      .progress-row {
        display: grid;
        grid-template-columns: 43px 1fr 43px;
        align-items: center;
        gap: 9px;
      }
      .time-label {
        color: var(--player-muted);
        font-size: 10.5px;
        font-variant-numeric: tabular-nums;
      }
      .time-label:last-child {
        text-align: right;
      }
      .progress-track {
        position: relative;
        height: 18px;
        display: flex;
        align-items: center;
      }
      .progress-track::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 4px;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--accent) var(--played, 0%), rgba(255, 255, 255, 0.18) var(--played, 0%));
      }
      .progress-input {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 18px;
        margin: 0;
        appearance: none;
        background: transparent;
        cursor: pointer;
      }
      .progress-input::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        appearance: none;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
      }
      .progress-input::-moz-range-thumb {
        width: 9px;
        height: 9px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--accent);
      }
      .player-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
      }
      .action-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 42px;
        height: 38px;
        padding: 0 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--player-muted);
        font-size: 11px;
        cursor: pointer;
        transition: 0.16s ease;
      }
      .action-button:hover,
      .action-button.is-active {
        background: rgba(255, 255, 255, 0.09);
        color: #fff;
      }
      .action-button.is-active {
        color: #ff777a;
      }
      .action-button svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .action-button.is-active svg {
        fill: currentColor;
      }
      .details-button {
        margin-left: 5px;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0 10px 10px 0;
        padding-left: 14px;
      }
      .details-button svg {
        transition: transform 0.2s ease;
      }
      .details-button[aria-expanded="true"] svg {
        transform: rotate(180deg);
      }
      .close-player {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 27px;
        height: 27px;
      }
      .close-player svg {
        width: 15px;
        height: 15px;
      }

      /* Expandable episode panel */
      .details-scrim {
        position: fixed;
        z-index: 91;
        inset: 0;
        background: rgba(8, 10, 12, 0.48);
        backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        transition: 0.25s ease;
      }
      .details-scrim.is-visible {
        opacity: 1;
        visibility: visible;
      }
      .episode-details-panel {
        position: fixed;
        z-index: 92;
        left: 50%;
        bottom: calc(var(--player-height) + 14px);
        width: min(920px, calc(100vw - 36px));
        max-height: min(680px, calc(100vh - var(--player-height) - 62px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: rgba(250, 250, 250, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 22px;
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
        transform: translate(-50%, 28px) scale(0.985);
        opacity: 0;
        visibility: hidden;
        transition:
          transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.23s ease,
          visibility 0.23s;
      }
      .episode-details-panel.is-open {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
        visibility: visible;
      }
      .panel-top {
        display: grid;
        grid-template-columns: 112px 1fr auto;
        gap: 20px;
        align-items: center;
        padding: 22px 24px 18px;
        color: #fff;
        background:
          radial-gradient(circle at 10% 0%, rgba(242, 60, 60, 0.62), transparent 42%),
          linear-gradient(135deg, #20262b, #111518);
      }
      .panel-cover {
        width: 112px;
        height: 76px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
      }
      .panel-kicker {
        margin: 0 0 5px;
        color: #ff888b;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .panel-title {
        margin: 0;
        font-size: clamp(19px, 2.6vw, 27px);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.032em;
      }
      .panel-meta {
        margin: 7px 0 0;
        color: #bdc5ca;
        font-size: 12px;
      }
      .panel-close {
        align-self: start;
        width: 36px;
        height: 36px;
      }
.panel-tabs {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 0 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
      .panel-tab {
        flex: none;
        position: relative;
        border: 0;
        padding: 16px 12px 14px;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      .panel-tab[aria-selected="true"] {
        color: var(--ink);
      }
      .panel-tab[aria-selected="true"]::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: -1px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--accent);
      }
      .panel-content {
        overflow-y: auto;
        padding: 24px;
      }
.tab-panel {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
      .tab-panel[hidden] {
        display: none;
      }
.detail-grid {
  display: block;
}
      .detail-label {
        display: block;
        margin-bottom: 8px;
        color: var(--meta);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .abstract-text {
        margin: 0;
        color: #31383d;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 17px;
        line-height: 1.72;
      }
      .transcript-copy {
        color: #353b40;
        font-size: 14px;
        line-height: 1.75;
      }
      .transcript-copy p {
        margin: 0 0 16px;
      }
      .transcript-time {
        display: inline-block;
        width: 58px;
        color: var(--accent);
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
      }
      .sources-list {
        margin: 0;
        padding-left: 20px;
        color: #343b40;
        font-size: 14px;
        line-height: 1.75;
      }
      .sources-list a {
        color: var(--slate);
        text-underline-offset: 3px;
      }
      .share-toast {
        position: fixed;
        z-index: 100;
        left: 50%;
        bottom: calc(var(--player-height) + 26px);
        padding: 10px 14px;
        color: #fff;
        background: #171b1e;
        border-radius: 10px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
        font-size: 12px;
        transform: translate(-50%, 12px);
        opacity: 0;
        pointer-events: none;
        transition: 0.2s ease;
      }
      .share-toast.is-visible {
        transform: translate(-50%, 0);
        opacity: 1;
      }

      @media (max-width: 980px) {
        :root { --player-height: 118px; }
        .player-layout {
          grid-template-columns: minmax(190px, 0.7fr) minmax(300px, 1.7fr) auto;
          gap: 14px;
          padding-left: 16px;
          padding-right: 42px;
        }
        .action-button span {
          display: none;
        }
        .details-button {
          margin-left: 0;
        }
      }
      @media (max-width: 720px) {
        :root { --player-height: 248px; }
        body.player-active {
          padding-bottom: calc(var(--player-height) + 12px);
        }
        .episode-player {
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 0;
        }
        .player-layout {
          grid-template-columns: 1fr;
          grid-template-areas:
            "episode"
            "transport"
            "progress"
            "actions";
          align-items: stretch;
          gap: 0;
          padding: 12px 14px 10px;
        }
        .player-episode {
          grid-area: episode;
          width: 100%;
          justify-content: flex-start;
          text-align: left;
          padding: 0 0 10px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .player-center {
          display: contents;
        }
        .transport-controls {
          grid-area: transport;
          position: static;
          justify-content: center;
          gap: 13px;
          margin: 0;
          padding: 9px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .progress-row {
          grid-area: progress;
          grid-template-columns: 38px 1fr 38px;
          gap: 7px;
          padding: 7px 0 8px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .player-actions {
          grid-area: actions;
          width: 100%;
          justify-content: flex-end;
          gap: 8px;
          padding-top: 7px;
        }
        .player-cover-wrap {
          width: 54px;
          height: 54px;
          border-radius: 9px;
        }
        .player-kicker {
          display: block;
          margin-bottom: 3px;
        }
        .player-title {
          max-width: calc(100vw - 112px);
          font-size: 13px;
        }
        .player-subtitle {
          display: block;
          max-width: calc(100vw - 112px);
          margin-top: 3px;
          font-size: 10.5px;
        }
        .speed-button,
        .skip-button,
        .favorite-action,
        .share-action {
          display: grid;
        }
        .player-button.play-toggle {
          width: 42px;
          height: 42px;
        }
        .player-actions .action-button {
          display: inline-flex;
          width: auto;
          min-width: 42px;
          padding: 0 9px;
        }
        .player-actions .action-button span {
          display: inline;
        }
.details-button {
  width: auto;
  min-width: 42px;
  margin-left: 2px;
  border-left: 0;
}
        .close-player {
          display: none;
        }
        .episode-details-panel {
          width: calc(100vw - 16px);
          bottom: calc(var(--player-height) + 10px);
          max-height: calc(100vh - var(--player-height) - 28px);
          border-radius: 18px;
        }
        .panel-top {
          grid-template-columns: 70px 1fr auto;
          gap: 13px;
          padding: 15px;
        }
        .panel-cover {
          width: 70px;
          height: 56px;
        }
        .panel-meta { display: none; }
        .panel-tabs { padding: 0 8px; }
        .panel-tab { padding: 14px 9px 12px; }
        .panel-content { padding: 18px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .episode-player,
        .episode-details-panel,
        .details-scrim,
        .share-toast {
          transition: none;
        }
        .episode-player.is-playing .playing-pulse i {
          animation: none;
        }
      }

      /* Animated indicator centered over the active episode thumbnail. */
      .thumbnail-playing-pulse {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        display: none;
        align-items: flex-end;
        gap: 4px;
        height: 42px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        background: rgba(10, 12, 14, 0.78);
        backdrop-filter: blur(6px);
        transform: translate(-50%, -50%);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
        pointer-events: none;
      }

      .thumbnail-playing-pulse i {
        width: 4px;
        border-radius: 4px;
        background: #ff5a5f;
        transform-origin: bottom;
        animation: thumbnail-pulse 0.65s ease-in-out infinite alternate;
      }

      .thumbnail-playing-pulse i:nth-child(1) {
        height: 14px;
      }

      .thumbnail-playing-pulse i:nth-child(2) {
        height: 22px;
        animation-delay: -0.4s;
      }

      .thumbnail-playing-pulse i:nth-child(3) {
        height: 17px;
        animation-delay: -0.2s;
      }

      .is-audio-playing .thumbnail-playing-pulse {
        display: flex;
      }

      @keyframes thumbnail-pulse {
        from {
          transform: scaleY(0.35);
        }

        to {
          transform: scaleY(1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .thumbnail-playing-pulse i {
          animation: none;
        }
      }
    


/* Reusable long-form article layout */
.article-page {
  overflow-x: hidden;
}

/* Reading progress */
.reading-progress {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background: var(--accent);
}

/* Article introduction */
.article-header {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 54px 32px 44px;
  text-align: left;
}

.article-kicker,
.section-kicker {
  color: var(--accent);
  font: 800 13px/1 var(--font-ui);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.article-title {
  max-width: 760px;
  margin: 24px 0 18px;
  color: #0d0e10;
  font-family: var(--font-editorial);
  font-size: clamp(46px, 5.15vw, 46px);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.article-dek {
  max-width: 800px;
  margin: 0;
  color: #17191b;
  font-family: var(--font-editorial);
  font-size: clamp(18px, 1.75vw, 23px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.015em;
}

.article-date {
  margin: 28px 0 0;
  color: #1c2024;
  font-size: 15px;
  line-height: 1.4;
}

.article-byline {
  margin: 24px 0 0;
  color: #1c2024;
  font-size: 15px;
  line-height: 1.4;
}

.article-byline a,
.save-article {
  color: #006699;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #d8dde1;
  border-radius: 50%;
  background: #fff;
  color: #006699;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.share-button:hover {
  border-color: #96a6b0;
  background: #f5f8fa;
}

.share-button:focus-visible,
.article-subscribe:focus-visible,
.save-article:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 3px;
}

.share-button i {
  font-size: 20px;
  line-height: 1;
}

.share-button .filled-icon {
  fill: currentColor;
  stroke: none;
}

.article-subscribe {
  display: inline-block;
  margin-left: 11px;
  padding: 13px 19px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.article-subscribe:hover {
  background: #f02424;
}

.save-article {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  font: 400 15px/1.3 var(--font-ui);
  cursor: pointer;
}

.save-article svg {
  width: 22px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.save-article.is-saved svg {
  fill: currentColor;
}

/* Opening figure */
.hero-media {
  width: min(760px, calc(100% - 64px));
  margin: 0 auto 0 max(32px, calc((100vw - 1300px) / 2 + 32px));
  overflow: hidden;
  border-radius: 8px;
  background: #090d10;
}

.hero-media img {
  display: block;
  width: 100%;
  max-height: 790px;
  object-fit: contain;
}

.hero-caption,
.figure-caption {
  color: #60656b;
  font: 400 13px/1.55 var(--font-ui);
}

.hero-caption {
  width: min(760px, calc(100% - 64px));
  margin: 12px auto 0 max(32px, calc((100vw - 1300px) / 2 + 32px));
}

.caption-label {
  color: var(--ink);
  font-weight: 750;
}

/* Article body */
.article-layout {
  width: 100%;
  max-width: 1300px;
  margin: 64px auto 88px;
  padding: 0 32px;
}

.article-body {
  width: 100%;
  max-width: 760px;
  min-width: 0;
}

.article-body > p,
.article-body li {
  color: #272b2f;
  font: 400 19px/1.78 Georgia, "Times New Roman", serif;
}

.article-body > p {
  margin: 0 0 27px;
}

.article-body > p.lead {
  color: #151719;
  font-size: 22px;
  line-height: 1.68;
}

.article-body > p.lead::first-letter {
  float: left;
  margin: 0.09em 0.09em 0 0;
  color: var(--accent);
  font-family: var(--font-editorial);
  font-size: 4.8em;
  font-weight: 800;
  line-height: 0.75;
}

.article-body h2 {
  margin: 72px 0 22px;
  scroll-margin-top: 32px;
  color: #0e1012;
  font-family: var(--font-editorial);
  font-size: clamp(34px, 4.4vw, 40px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.article-body h3 {
  margin: 40px 0 14px;
  font-family: var(--font-editorial);
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.article-body em.scientific {
  white-space: nowrap;
}

.article-body a {
  color: inherit;
  text-decoration-color: #9da1a5;
  text-underline-offset: 3px;
}

.article-body a:hover {
  text-decoration-color: var(--accent);
}

.pullquote {
  margin: 46px 0;
  padding: 8px 0 8px 26px;
  border-left: 5px solid var(--accent);
  color: #111315;
  font-family: var(--font-editorial);
  font-size: clamp(29px, 4vw, 42px);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

/* Article figures */
.article-figure {
  margin: 48px 0 50px;
}

.article-figure .image-frame {
  padding: 22px;
  border: 1px solid #e4e6e8;
  border-radius: 7px;
  background: #f2f3f4;
}

.article-figure.dark .image-frame {
  background: #0c1114;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.figure-caption {
  margin-top: 11px;
}

.evidence-grid {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 34px 0 48px;
  overflow: hidden;
}

.evidence-grid figure {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 48px;
  overflow: hidden;
}

.evidence-grid figure:last-child {
  margin-bottom: 0;
}

.evidence-grid .image-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 22px;
  border: 1px solid #e4e6e8;
  border-radius: 7px;
  background: #f2f3f4;
  box-sizing: border-box;
  overflow: hidden;
}

.evidence-grid img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  cursor: zoom-in;
}

.evidence-grid figcaption {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Explanatory callouts */
.explainer-box,
.caution-box {
  margin: 38px 0;
  padding: 25px 28px;
  border-radius: 7px;
}

.explainer-box {
  border-top: 4px solid var(--slate);
  background: #f2f3f4;
}

.caution-box {
  border: 1px solid #f1d8c8;
  border-left: 5px solid #e67335;
  background: #fff7f2;
}

.explainer-box h3,
.caution-box h3 {
  margin-top: 0;
}

.explainer-box p,
.caution-box p,
.explainer-box li,
.caution-box li {
  color: #353a3f;
  font: 400 16px/1.66 var(--font-ui);
}

.explainer-box p:last-child,
.caution-box p:last-child {
  margin-bottom: 0;
}

.stage-list,
.limits-list {
  padding-left: 21px;
}

.stage-list li,
.limits-list li {
  margin-bottom: 9px;
}

.stage-list strong,
.limits-list strong {
  color: var(--ink);
}

/* Supplementary video */
.video-card {
  margin: 42px 0 50px;
  padding: 18px;
  border-radius: 8px;
  background: #101518;
  color: #fff;
}

.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #050708;
}

.video-card h3 {
  margin: 18px 4px 8px;
}

.video-card p {
  margin: 0 4px 6px;
  color: #bdc4c8;
  font-size: 14px;
  line-height: 1.55;
}

.video-card a {
  color: #fff;
}

/* Source and license */
.source-box {
  margin-top: 70px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}

.source-box h3 {
  margin-top: 14px;
  font-size: 34px;
}

.source-box p {
  color: #50565c;
  font: 400 14px/1.7 var(--font-ui);
}

.license-note {
  margin-top: 24px;
  padding: 16px 18px;
  background: #f5f5f5;
  color: #5d6268;
  font-size: 12px;
  line-height: 1.6;
}

/* Full-size figure dialog */
.figure-dialog {
  width: min(96vw, 1500px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.figure-dialog::backdrop {
  background: rgba(7, 9, 11, 0.88);
}

.figure-dialog img {
  display: block;
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
}

.dialog-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 620px) {
  .article-header {
    padding: 42px 18px 34px;
  }

  .article-title {
    margin-top: 19px;
    font-size: clamp(39px, 12vw, 55px);
  }

  .article-dek {
    font-size: 18px;
  }

  .article-date {
    margin-top: 24px;
  }

  .article-byline {
    margin-top: 20px;
  }

  .article-tools {
    gap: 7px;
  }

  .share-button {
    width: 39px;
    height: 39px;
  }

  .article-subscribe {
    margin-left: 4px;
    padding: 12px 15px;
  }

  .hero-media,
  .hero-caption {
    width: calc(100% - 36px);
    margin-left: 18px;
  }

  .hero-media {
    border-radius: 5px;
  }

  .article-layout {
    padding: 0 18px;
  }

  .article-body > p,
  .article-body li {
    font-size: 18px;
  }

  .article-body > p.lead {
    font-size: 20px;
  }

  .article-body h2 {
    margin-top: 58px;
  }

  .article-figure .image-frame {
    padding: 8px;
  }

  .explainer-box,
  .caution-box {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .reading-progress,
  .site-header,
  .site-footer,
  .episode-player,
  .episode-details-panel,
  .details-scrim,
  .share-toast,
  .dialog-close {
    display: none !important;
  }

  .article-layout {
    display: block;
    width: 100%;
  }

  .article-body h2 {
    break-after: avoid;
  }

  .article-figure,
  .evidence-grid figure {
    break-inside: avoid;
  }
}