/* hub/podcast · page sheet on top of kit/rf.css
   Platform buttons with their marks, and the episodes as cards on navy, the
   hub's podcast block carried onto its own page. */
.rf .pc-platforms { gap: 12px; }
.rf .pc-platforms .btn { display: inline-flex; align-items: center; gap: 10px; }
.rf .pc-platforms .btn svg { width: 22px; height: 22px; flex: none; }

/* THE EPISODES (2026-10-09): each a studio portrait of its guest, the
   episode's number set large in outline where photo meets card, then the
   date, the title, the guest and the two places to hear it. The photo is
   the YouTube link; the play disc grows on hover. Navy pair from the ring
   page (#0a1e57 / #203a85), no grey-blue on any heading. */
.rf .pc-eps {
  --pc-ink: #0a1e57; --pc-card: #0f2566; --pc-line: rgba(255, 255, 255, .14);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(40px, 4.6vw, 72px);
}
.rf .pc-ep {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: 20px; background: var(--pc-card); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  /* On its own layer from the start, so hovering does not promote it mid
     move (that first frame flickered). */
  transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
}
/* The hairline is drawn OVER the card (2026-10-09): as an inset shadow it sat
   under the photo, and the photo's anti-aliased edge let it flash through
   while the card rose and the photo grew. */
.rf .pc-ep::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--pc-line);
  transition: box-shadow .6s;
}
.rf .pc-ep:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65); }
.rf .pc-ep:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }

.rf .pc-ep-media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; color: #fff; text-decoration: none; }
.rf .pc-ep-media img {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: 50% 20%;
  transform: translate3d(0, 0, 0) scale(1.001); backface-visibility: hidden;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
/* The photo sinks into the card: a navy fade along its foot, so the number
   and the words below read as one surface with it. */
.rf .pc-ep-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 37, 102, 0) 64%, rgba(15, 37, 102, .5) 84%, var(--pc-card) 100%);
}
.rf .pc-ep:hover .pc-ep-media img { transform: translate3d(0, 0, 0) scale(1.04); }

.rf .pc-ep-play {
  position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--pc-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .3s;
}
.rf .pc-ep-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.rf .pc-ep-media:hover .pc-ep-play,
.rf .pc-ep-media:focus-visible .pc-ep-play { transform: scale(1.12); background: #fff; }
.rf .pc-ep-dur {
  position: absolute; z-index: 1; top: 20px; left: 20px; height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; border-radius: 99px;
  background: rgba(10, 30, 87, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.rf .pc-ep-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 clamp(22px, 2.4vw, 36px) clamp(24px, 2.6vw, 36px); }
/* The body laps the photo by 2px on the card's own ground: the photo is a
   fractional height and on its own layer, so while the card rose and the
   photo grew, its last half pixel row came and went as a flashing light line
   along the seam. */
.rf .pc-ep-body { z-index: 1; margin-top: -2px; padding-top: 2px; background: var(--pc-card); }
/* The number: big, white fading into the card, lifted half onto the photo. */
.rf .pc-ep-num {
  position: absolute; z-index: 1; top: 0; right: clamp(18px, 2.2vw, 32px); translate: 0 -62%;
  font-size: clamp(88px, 9vw, 148px); line-height: 1; font-weight: 700; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 20%, rgba(255, 255, 255, .08) 92%);
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none; user-select: none;
}
.rf .pc-ep-k {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: -6px 0 0;
  font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}
.rf .pc-ep-k time { font-weight: 500; color: rgba(255, 255, 255, .72); }
.rf .pc-ep-k time::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 3px 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
.rf .pc-ep-t { margin: 14px 0 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.rf .pc-ep-guest { margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .8); }

.rf .pc-ep-links { display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0; padding-top: 28px; }
.rf .pc-ep-links a {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 12px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--pc-line);
  color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .25s, color .25s, box-shadow .25s;
}
.rf .pc-ep-links svg { width: 22px; height: 22px; flex: none; color: #fff; transition: color .25s; }
.rf .pc-ep-links a:hover, .rf .pc-ep-links a:focus-visible { background: #fff; color: var(--pc-ink); box-shadow: none; }
.rf .pc-ep-links a:hover svg, .rf .pc-ep-links a:focus-visible svg { color: var(--pc-ink); }
.rf .pc-ep-links a:hover svg path, .rf .pc-ep-links a:focus-visible svg path { stroke: #fff; }
.rf .pc-ep-links a:hover svg path:not([fill="none"]), .rf .pc-ep-links a:focus-visible svg path:not([fill="none"]) { fill: #fff; stroke: none; }

@media (max-width: 760px) {
  .rf .pc-eps { grid-template-columns: minmax(0, 1fr); }
  .rf .pc-ep-play { width: 48px; height: 48px; top: 16px; right: 16px; }
  .rf .pc-ep-dur { top: 16px; left: 16px; }
  .rf .pc-ep-num { font-size: 76px; translate: 0 -88%; }
}
@media (prefers-reduced-motion: reduce) {
  .rf .pc-ep, .rf .pc-ep-media img, .rf .pc-ep-play { transition: none; }
  .rf .pc-ep:hover { transform: none; }
  .rf .pc-ep:hover .pc-ep-media img { transform: none; }
}