/* ------------------------------------------------------------------
   Page layouts: hero, homepage sections, articles, podcast, contact.
   ------------------------------------------------------------------ */

/* ---- Hero (homepage) ---- */
.hero {
  position: relative;
  background: var(--tfhp-navy);
  color: var(--tfhp-white);
  /* The sticky header overlays the top; give the content room.
     Padding tightened per client feedback (3 Sep 2026). */
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: calc(var(--section-y) * 0.6);
  margin-top: calc(-1 * var(--header-h));
  overflow: hidden;
}
/* Right-side garnish per client feedback (3 Sep 2026): the column
   next to the copy read plain/empty on its own; a couple of sparkle
   marks echo the ones already used over the copy, no new assets. */
.hero .spark--right1 { top: 10%; right: 6%; }
.hero .spark--right2 { top: 58%; right: 18%; }
.hero__grid {
  display: grid;
  /* minmax(0, …): the horizontal hero strip must not widen the track */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
}
.hero__eyebrow { color: var(--tfhp-sky); }
.hero h1 {
  /* Reduced from display size and loosened per client feedback
     (3 Sep 2026): was reading huge with cramped line spacing.
     Widened again (3 Sep 2026) so a longer lead line, e.g.
     "Women are not a category.", sets on one line; the accent
     span below is always its own line regardless (.hero-accent
     is display:block). */
  font-size: var(--fs-h1);
  line-height: 1.15;
  max-width: 26ch;
  margin-top: var(--sp-3);
}
.hero .lead {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.85);
}
.hero .cta-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.hero .platform-stamp { margin-top: var(--sp-6); }
.hero .platform-stamp .eyebrow,
.podcast-hero .platform-stamp .eyebrow { color: var(--tfhp-muted-light); }

/* Rolling column */
.roll {
  position: relative;
  height: min(72vh, 640px);
  overflow: hidden;
  display: none;
  /* Soft fade top and bottom so cards enter and leave gently */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
@media (min-width: 1024px) {
  .roll { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
.roll__col { overflow: hidden; }
.roll__col--offset { margin-top: var(--sp-8); }
.roll__track { display: grid; gap: var(--sp-4); }
.roll-card {
  display: block;
  text-decoration: none;
  color: var(--tfhp-white);
  background: var(--tfhp-navy-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.roll-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.roll-card figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}
.roll-card .k {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tfhp-sky);
  margin-bottom: 2px;
}
.roll-card:hover figcaption, .roll-card:focus-visible figcaption { color: var(--tfhp-amber); }

/* Mobile hero strip replaces the rolling column below 1024px */
.hero-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) { .hero-strip { display: none; } }

/* ---- Homepage spotlight grid: one main story + three supporting ---- */
.spotlight-home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 1024px) {
  .spotlight-home-grid { grid-template-columns: 3fr 2fr; }
  /* Four compact supporting rows, top-aligned with the main story:
     the first thumbnail sits flush with the top of the main image,
     hairline dividers carry the rhythm between rows. */
  .spotlight-home-grid .supports {
    display: grid;
    align-content: start;
    gap: 0;
  }
  .spotlight-home-grid .supports .card--row {
    align-items: center;
    padding-block: var(--sp-4);
  }
  .spotlight-home-grid .supports .card--row:first-child { padding-top: 0; }
  .spotlight-home-grid .supports .card--row + .card--row {
    border-top: 1px solid var(--tfhp-line);
  }
}

/* ---- Episode strip (homepage podcast section) ---- */
.episode-strip {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 1024px) {
  .episode-strip { grid-template-columns: 3fr 2fr; }
}
.episode-strip__rest {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

/* ---- Guide row ---- */
.guide-row {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .guide-row { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Events row ---- */
.events-row { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .events-row { grid-template-columns: 1fr 1fr; } }

/* ---- Archive grids ---- */
.archive-hero { padding-block: var(--section-y) var(--sp-6); }
/* Index titles sit a step below article titles: calmer, less cluttered */
.archive-hero h1 { font-size: var(--fs-h2); max-width: 26ch; }
.archive-hero .filter-row { margin-top: var(--sp-4); }

.card-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.category-group { margin-bottom: var(--sp-8); }
.category-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* ---- Article (spotlight / guide) ---- */
.article-hero { padding-block: var(--sp-7) 0; }
.article-hero .breadcrumb { margin-bottom: var(--sp-5); }
/* Full width of the shell per client request (1 Oct 2026): both used
   to stop short of the container edge. */
.article-hero h1 { font-size: var(--fs-h1); max-width: none; margin-top: var(--sp-3); }
.article-hero .standfirst {
  font-size: var(--fs-lead);
  /* Matches the client's body-copy spec (3 Sep 2026): PT Sans body
     font already sets 1.25 line-height / -0.01em tracking; this rule
     used to override the line-height back up to 1.55. */
  line-height: 1.25;
  color: var(--c-text-mute);
  max-width: none;
  margin-top: var(--sp-4);
}
.article-hero .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  /* Overrides the sitewide `p { max-width: 68ch }` rule, which was
     clipping this row short of the container (client request,
     1 Oct 2026). */
  max-width: none;
  color: var(--c-text-mute);
}
.article-hero .article-meta strong { color: var(--tfhp-navy); }
/* "Written by" sits on its own line under the meta row (client request,
   7 Oct 2026). The row is flex, so a <br> would be ignored. */
.article-hero .article-meta .article-meta__byline { flex-basis: 100%; }

.article-cover {
  margin-block: var(--sp-6);
  /* Full-bleed cover per client request (1 Oct 2026): edge to edge,
     not capped to the shell's 1240px measure. */
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
.article-cover img,
.article-cover .video-facade { width: 100%; border-radius: 0; }

.article-layout {
  display: grid;
  gap: var(--sp-8);
  /* The cover now sits inside the left column, so the sidebar boxes
     start level with its top (client request, 7 Oct 2026). */
  padding-bottom: var(--section-y);
}
.article-layout:has(.article-cover) { padding-top: var(--sp-6); }
@media (max-width: 767px) {
  .article-layout:has(.article-cover) { padding-top: var(--sp-4); }
}
.article-layout .article-cover { margin-top: 0; }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .article-rail { position: sticky; top: calc(var(--header-h-compressed) + var(--sp-5)); align-self: start; }
}
.article-rail { display: grid; gap: var(--sp-6); align-content: start; }
.rail-box {
  border: 1px solid var(--tfhp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.rail-box .eyebrow { margin-bottom: var(--sp-3); }

/* Pull quote */
.pull-quote {
  margin-block: var(--sp-7);
  padding-block: var(--sp-6);
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tfhp-blue);
  max-width: 26ch;
}
.pull-quote::before, .pull-quote::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--tfhp-coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-line) var(--ease-line) 240ms;
}
.pull-quote::before { top: 0; }
.pull-quote::after { bottom: 0; }
.pull-quote.is-in::before, .pull-quote.is-in::after { transform: scaleX(1); }
.no-js .pull-quote::before, .no-js .pull-quote::after { transform: none; }

/* Her links */
.her-links { margin-top: var(--sp-7); }
.her-links ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* Cross-promotion card (story <-> episode) */
.cross-card {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  background: var(--tfhp-sand);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-top: var(--sp-8);
}
@media (min-width: 768px) { .cross-card { grid-template-columns: 220px 1fr auto; } }
.cross-card img { border-radius: var(--radius); width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Related stories */
.related { padding-block: var(--section-y); }

/* Takeaways box (guides) */
.takeaways {
  background: var(--tfhp-sand);
  border-left: 3px solid var(--tfhp-coral);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.takeaways h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.takeaways ul { padding-left: 1.1em; display: grid; gap: var(--sp-2); }

.sources { margin-top: var(--sp-7); font-family: var(--font-ui); font-size: var(--fs-small); }
.sources h2 { font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.sources ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }

/* ---- Podcast hub ---- */
.podcast-hero {
  background: var(--tfhp-navy);
  color: var(--tfhp-white);
  /* Padding tightened per client feedback (3 Sep 2026). */
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: calc(var(--section-y) * 0.6);
  margin-top: calc(-1 * var(--header-h));
}
.podcast-hero h1 { font-size: var(--fs-display); max-width: 14ch; }
.format-blocks {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 768px) { .format-blocks { grid-template-columns: 1fr 1fr; } }
.format-block {
  border: 1px solid var(--tfhp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
.format-block h3 { font-family: var(--font-display); font-size: var(--fs-h3); }

/* Episode list rows: the thumbnail takes a real share of the band and
   the content centres against it, so neither side hangs in space. */
.episode-list { display: grid; gap: var(--sp-6); }
.episode-row {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--tfhp-line);
}
@media (min-width: 768px) {
  .episode-row {
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
    gap: var(--sp-6);
    align-items: center;
  }
}
.episode-row .card__media { aspect-ratio: 16 / 9; }
.episode-row .card__media img { width: 100%; height: 100%; object-fit: cover; }
.episode-row .card__excerpt { max-width: 62ch; }
.episode-row:last-child { border-bottom: 0; }

/* ---- Single episode ---- */
.episode-hero { padding-block: var(--sp-7) var(--sp-6); }
/* Full width of the shell per client request (1 Oct 2026), matching
   the same fix on the Feature single page. */
.episode-hero h1 { max-width: none; margin-top: var(--sp-3); }
.episode-hero .article-meta { margin-top: var(--sp-4); max-width: none; }

/* ---- Contact ---- */
.tier-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
.tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 1px solid var(--tfhp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--tfhp-white);
}
.tier-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); }
.tier-card .includes { list-style: none; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.tier-card .includes li { padding-left: 1.4em; position: relative; }
.tier-card .includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.6em; height: 1.5px;
  background: var(--tfhp-coral);
}
.tier-card .best-for { font-size: var(--fs-small); color: var(--c-text-mute); }
.tier-card .btn { margin-top: auto; align-self: flex-start; }

/* How it works timeline */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-6);
  position: relative;
}
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding-top: var(--sp-5); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--tfhp-coral);
  display: block;
  margin-bottom: var(--sp-3);
}
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-small); color: var(--c-text-mute); }
/* The connecting line draws across as the section reveals */
.steps .steps-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--tfhp-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--dur-line) * 2) var(--ease-line) 240ms;
  display: none;
}
@media (min-width: 1024px) { .steps .steps-line { display: block; } }
.steps.is-in .steps-line { transform: scaleX(1); }
.no-js .steps .steps-line { transform: none; }

/* ---- Search / 404 ---- */
.utility-hero { padding-block: var(--section-y) var(--sp-7); }
.search-form-row { display: flex; gap: var(--sp-3); max-width: 560px; }
.search-form-row input[type="search"] {
  flex: 1;
  padding: 0.85em 1em;
  border: 1.5px solid var(--tfhp-line);
  border-radius: var(--radius);
}

/* ---- Style guide ---- */
.sg-section { padding-block: var(--sp-7); border-bottom: 1px solid var(--tfhp-line); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-4); }
.sg-swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--tfhp-line); }
.sg-swatch .c { height: 72px; }
.sg-swatch .l { padding: var(--sp-2) var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-eyebrow); }

/* ---- Instagram / follow strip ---- */
.follow-strip { text-align: center; }

/* ---- Thank you ---- */
.thanks-hero { padding-block: var(--section-y); text-align: center; }
.thanks-hero h1 { margin-inline: auto; }
.thanks-hero p { margin: var(--sp-5) auto 0; }

/* ------------------------------------------------------------------
   Editorial play: the collage details that keep sections from reading
   as plain stacked blocks. Decorative panels may tilt; content never.
   ------------------------------------------------------------------ */

/* Sparkle glyphs: desktop garnish only. On smaller screens content
   fills the width and they would collide with text, so they go. */
.spark {
  position: absolute;
  width: 26px;
  height: 26px;
  color: var(--tfhp-coral);
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .spark { display: block; } }
.s-dark .spark, .hero .spark { color: var(--tfhp-amber); }
.spark--sm { width: 16px; height: 16px; }

/* Hero: the closing line turns italic amber, reference-style */
.hero-accent {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--tfhp-amber);
}
.hero__copy { position: relative; }
.hero__copy .spark--hero { top: -18px; left: -34px; }
.hero__copy .spark--hero2 { top: 40px; right: 8px; }

/* Vertical edge label, desktop only: the magazine spine */
.edge-label {
  position: absolute;
  left: clamp(0.5rem, 1vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tfhp-muted-light);
  display: none;
}
@media (min-width: 1280px) {
  .hero { position: relative; }
  .edge-label { display: block; }
}

/* Ghost section numerals behind the headings */
.section-head { position: relative; }
.section-head > * { position: relative; z-index: 1; }
.section-head[data-index]::before {
  content: attr(data-index);
  position: absolute;
  top: -0.32em;
  right: -0.04em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 11vw, 10rem);
  line-height: 1;
  color: currentColor;
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
}

/* Main story: an offset, slightly tilted colour panel behind the image,
   and the category chip sits on the picture like a sticker */
.card--feature { position: relative; }
.card--feature .card__media { position: relative; z-index: 1; }
.card--feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--tfhp-sky);
  border-radius: var(--radius);
  /* Peeks up and left only: never into the text below the image
     (client feedback, 2 Sep 2026) */
  transform: rotate(-1.6deg) translate(-10px, -8px);
  z-index: 0;
  pointer-events: none;
}

.chip--overlay {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--tfhp-amber);
  border-color: var(--tfhp-amber);
  color: var(--tfhp-navy);
  transform: rotate(-2.5deg);
  box-shadow: 0 4px 14px -6px rgba(26, 30, 53, 0.5);
}

/* Hero episode card: the coral corner brackets kept from the audit */
.card--ep-hero .card__media::before,
.card--ep-hero .card__media::after {
  content: "";
  position: absolute;
  width: 30px; height: 30px;
  border: 3px solid var(--tfhp-coral);
  z-index: 1;
  pointer-events: none;
}
.card--ep-hero .card__media::before {
  top: 12px; left: 12px;
  border-right: 0; border-bottom: 0;
}
.card--ep-hero .card__media::after {
  bottom: 12px; right: 12px;
  border-left: 0; border-top: 0;
}

/* CTA banner sparkle positions live with the banner styles in
   components.css (pinned to the frame corners). */

/* Mobile list rhythm: stacked rows separate with hairlines, not voids */
@media (max-width: 639px) {
  .supports .card--row + .card--row,
  .episode-strip__rest .card--row + .card--row {
    border-top: 1px solid var(--tfhp-line);
    padding-top: var(--sp-5);
  }
  .s-dark .episode-strip__rest .card--row + .card--row {
    border-top-color: var(--tfhp-line-light);
  }
}

/* ---- About: host introduction ---- */
.host-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 768px) {
  .host-grid { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: var(--sp-7); }
}
.host-grid__media { border-radius: var(--radius-lg); }
.host-grid__media img { width: 100%; height: auto; }

/* ---- Embedded Google Form (Get Featured) ---- */
.gform-embed iframe {
  width: 100%;
  border: 1px solid var(--tfhp-line);
  border-radius: var(--radius-lg);
  background: var(--tfhp-white);
}
.gform-embed .form-note { margin-top: var(--sp-3); }

/* ---- Instagram panel: reads like the profile, links out everywhere ---- */
.ig-panel {
  max-width: 860px;
  margin-inline: auto;
  background: var(--tfhp-white);
  border: 1px solid var(--tfhp-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ig-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--tfhp-line);
}
/* The story-ring avatar: Instagram's own gradient, platform branding
   like the coloured platform marks elsewhere */
.ig-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
  padding: 3px;
}
.ig-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid var(--tfhp-white);
  object-fit: cover;
}
.ig-id { min-width: 0; margin-right: auto; }
.ig-handle {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--tfhp-navy);
  overflow-wrap: anywhere;
}
.ig-name {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--c-text-mute);
}
/* The grid: three tight columns of squares, like the profile itself */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-mid) var(--ease-soft);
}
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.06); }
.ig-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(26, 30, 53, 0.45);
  color: var(--tfhp-white);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.ig-overlay svg { width: 30px; height: 30px; }
.ig-tile:hover .ig-overlay, .ig-tile:focus-visible .ig-overlay { opacity: 1; }
@media (max-width: 479px) {
  .ig-head { flex-wrap: wrap; }
  .ig-head .btn { width: 100%; justify-content: center; }
}

/* ---- Featured episode banner (homepage podcast section) ---- */
.ep-feature {
  display: grid;
  background: var(--tfhp-navy-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 900px) {
  .ep-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
.ep-feature__media { position: relative; display: block; }
.ep-feature__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.ep-feature__media::before,
.ep-feature__media::after {
  content: "";
  position: absolute;
  width: 30px; height: 30px;
  border: 3px solid var(--tfhp-coral);
  z-index: 1;
  pointer-events: none;
}
.ep-feature__media::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.ep-feature__media::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.ep-feature__body { padding: var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-2); justify-items: start; }
.ep-feature__title {
  font-size: var(--fs-h3);
  line-height: 1.15;
}
.ep-feature__title a { color: var(--tfhp-white); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
.ep-feature__title a:hover, .ep-feature__title a:focus-visible { color: var(--tfhp-sky); }

/* ---- Card CTAs: always a visible, obvious next click ---- */
.card__cta { justify-self: start; align-self: start; margin-top: var(--sp-2); }
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--tfhp-blue);
  margin-top: var(--sp-1);
}
.s-dark .card__more { color: var(--tfhp-sky); }

/* ---- About: why-we-exist with a polaroid stack of real stills ---- */
.about-why {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .about-why { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.photo-stack {
  position: relative;
  display: none;
  padding: var(--sp-5);
}
@media (min-width: 1024px) { .photo-stack { display: grid; } }
.photo-stack__item {
  grid-area: 1 / 1;
  border: 6px solid var(--tfhp-white);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(26, 30, 53, 0.55);
  overflow: hidden;
  transform: rotate(-4deg);
}
.photo-stack__item:nth-child(2) { transform: rotate(2.5deg) translate(26px, 34px); }
.photo-stack__item:nth-child(3) { transform: rotate(-1deg) translate(-20px, 72px); }
.photo-stack__item img { display: block; width: 100%; }
.photo-stack .spark--stack { top: -4px; right: 6%; }

/* ---- Podcast guest story format: the playable header banner ---- */
.article-cover--video .video-facade { border-radius: 0; }
.article-cover--video .video-facade::before,
.article-cover--video .video-facade::after {
  content: "";
  position: absolute;
  width: 30px; height: 30px;
  border: 3px solid var(--tfhp-coral);
  z-index: 1;
  pointer-events: none;
}
.article-cover--video .video-facade::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.article-cover--video .video-facade::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.article-cover__caption {
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  text-align: center;
}

/* The YouTube badge: centred on outbound video banners */
.yt-out { display: block; }
.yt-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 60px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 10px 24px rgba(26, 30, 53, 0.45));
  transition: transform var(--dur-mid) var(--ease-spring);
}
.yt-badge svg { width: 100%; height: 100%; }
.yt-out:hover .yt-badge, .yt-out:focus-visible .yt-badge { transform: scale(1.1); }