/* feltandcotton.com (BRIEF-247). Figma IFD8o16KH7yhhIvPIgu7f3, page 163:985: Desktop 165:19 (1440),
   Tablet 167:990 (768), Mobile 167:1203 (390), SOON 601:1857. Desktop >= 1024px, tablet 640-1023px,
   mobile < 640px. Values are Figma's unless a comment says otherwise. */

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/host-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/host-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --magenta: #ff36a1;
  --teal: #00ccf9;
  --white: #ffffff;
  --black: #171616;
  --cotton: #f9f4f1;
  --black-60: rgba(23, 22, 22, 0.6);
  --black-20: rgba(23, 22, 22, 0.2);
  /* Figma effect style "Ep" */
  --shadow-ep: 0 0 4px rgba(23, 22, 22, 0.1), 0 6px 12px rgba(23, 22, 22, 0.1);
  /* Figma effect style "8 dp" (colour/black/200) */
  --shadow-8dp: 0 6px 12px rgba(21, 34, 48, 0.2);
  --pad-x: 88px;
  --pad-y: 88px;
  --focus: 3px solid var(--black);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2,
h3,
p,
ul {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
}
img {
  display: block;
  max-width: none;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}

/* ---------- 02 Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  height: 720px;
  background: var(--teal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 107.31px var(--pad-x) 0; /* desktop: justify-end puts the wordmark at y 107.31 */
  --doodle-top: -1.5px; /* the instance's y (-2) + the cover's 0.5 */
  --doodle-h: 724.19px;
}
.hero > :not(.hero__doodles) {
  position: relative;
}
.hero__doodles {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--doodle-top);
  height: var(--doodle-h);
  overflow: hidden;
  mix-blend-mode: color-dodge;
  opacity: 0.5;
  pointer-events: none;
}
.doodle {
  position: absolute;
  left: calc(50% + var(--dx));
  top: var(--y);
}
.hero__wordmark {
  width: 565px;
  height: auto;
  flex: none;
}
.hero__tagline {
  max-width: 800px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--white);
  text-align: center;
}
.hero__stage {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.puppet {
  flex: none;
  position: relative;
  overflow: hidden;
}
.puppet--hero {
  width: 480px;
  height: 480px;
}
.puppet__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.puppet picture {
  display: contents;
}
.listen-row {
  flex: none;
  align-self: stretch;
  width: 440px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 14px;
  z-index: 1;
}
.listen {
  width: 210px;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow-ep);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}
.listen:hover {
  box-shadow: var(--shadow-ep), 0 0 0 2px var(--black);
}
.listen__icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listen__label {
  flex: 1;
  text-align: center;
}

/* SOON hero (601:2718): no listen row; the puppets stand together on a 400px stage, 40px lower */
.is-soon .hero {
  padding-top: 47.31px;
}
.is-soon .hero__stage {
  flex: 0 0 400px;
}
.is-soon .puppet--hero {
  margin-bottom: -40px;
}

/* ---------- 03 About ---------- */
.about {
  background: var(--magenta);
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.about__heading {
  max-width: 800px;
  width: 100%;
  font-size: 32px;
  font-weight: 600;
  color: var(--white);
}
.about__body {
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cotton);
}

/* ---------- 04 Latest episode / More episodes ---------- */
.episodes {
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
}
.episodes__group {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section-heading {
  font-size: 32px;
  font-weight: 600;
  color: var(--magenta);
  text-align: center;
}
.ep-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ep {
  position: relative;
  background: var(--white);
  box-shadow: var(--shadow-ep);
  display: grid;
  column-gap: 24px;
}
.ep__art {
  border-radius: 8px;
  overflow: hidden;
  background: var(--cotton);
  aspect-ratio: 1;
}
.ep__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ep__text {
  grid-area: text;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ep__title {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  opacity: 0.7;
  white-space: nowrap;
}
.ep__hook {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.ep__save {
  height: 36px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.ep__save:hover span,
.ep__platform:hover {
  text-decoration: underline;
}
.ep__platform {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.ep__controls {
  grid-area: ctrl;
  display: flex;
  align-items: center;
  gap: 24px;
}
.ep__track {
  flex: 1;
  min-width: 0;
  display: none;
  align-items: center;
  gap: 8px;
}
.ep__playback {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.ep__time {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ep__play {
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.ep__pause,
.ep.is-playing .ep__play-icon {
  display: none;
}
.ep.is-playing .ep__pause {
  display: block;
}
.ep__skip {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
}
.ep__skip:disabled {
  opacity: 0.4;
}
.ep__seek {
  flex: 1;
  min-width: 0;
  height: 24px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  --p: 0%;
}
.ep__seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--black) var(--p), var(--black-20) var(--p));
}
.ep__seek::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--black) var(--p), var(--black-20) var(--p));
}
.ep__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--black);
}
.ep__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--black);
}
.ep__seek:disabled::-webkit-slider-thumb {
  visibility: hidden;
}
.ep__seek:disabled::-moz-range-thumb {
  visibility: hidden;
}

/* type=hero (171:1577); active = type=playing (172:1885) */
.ep--hero {
  border: 2px solid var(--magenta);
  border-radius: 24px;
  padding: 22px; /* Figma's 24 includes its inside stroke */
  grid-template-columns: 239px minmax(0, 1fr);
  grid-template-areas: "art text";
}
.ep--hero .ep__art {
  grid-area: art;
  width: 239px;
  box-shadow: var(--shadow-8dp);
}
.ep--hero .ep__text {
  gap: 8px;
  padding-right: 40px;
}
.ep--hero .ep__controls {
  position: absolute;
  right: 22px;
  bottom: 22px;
}
.ep--hero.is-active {
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas: "art text" "ctrl ctrl";
  row-gap: 24px;
}
.ep--hero.is-active .ep__art {
  width: 200px;
}
.ep--hero.is-active .ep__controls {
  position: static;
}
.ep.is-active .ep__track {
  display: flex;
}

/* type=Ep row (164:639) */
.ep--row {
  border-radius: 16px;
  padding: 16px 24px 16px 16px;
  grid-template-columns: 97px minmax(0, 1fr) auto;
  grid-template-areas: "art text play" "art track track";
  align-items: center;
}
.ep--row {
  column-gap: 16px; /* text to play button (174:927); the art keeps 24 */
}
.ep--row .ep__art {
  grid-area: art;
  width: 97px;
  align-self: center;
  margin-right: 8px;
}
.ep--row .ep__text {
  gap: 7px;
}
.ep--row .ep__controls {
  display: contents;
}
.ep--row .ep__playback {
  grid-area: play;
  align-self: end;
  gap: 16px;
}
.ep--row .ep__track {
  grid-area: track;
  margin-top: 16px;
}
.ep--row .ep__time {
  display: none;
}
.ep--row.is-active .ep__time {
  display: inline;
}

/* SOON (601:2160) */
.soon {
  border: 2px solid var(--magenta);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-ep);
  min-height: 287px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.soon__text {
  font-size: 48px;
  font-weight: 700;
  text-align: center;
}

/* ---------- 06 The hosts ---------- */
.hosts {
  background: var(--cotton);
  padding: var(--pad-y) var(--pad-x);
}
.hosts__cols {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
.host {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.puppet--host {
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: var(--white);
}
.host__name {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.host__bio {
  width: 100%;
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- 07 Segments ---------- */
.segments {
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.segments__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.segment {
  padding: 28px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Every card in a row stretches to the tallest. Figma's teal cards hug their content; they only
   matched there because every line wrapped to the same height (founder, 11 Oct: uneven heights). */
.segment--teal {
  background: var(--teal);
  color: var(--black-60);
}
.segment--magenta {
  background: var(--magenta);
  color: var(--white);
}
.segment__name {
  font-size: 24px;
  font-weight: 600;
}
.segment__line {
  font-size: 18px;
}

/* ---------- 09 Footer ---------- */
.footer {
  background: var(--black);
  padding: 48px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer__wordmark {
  width: 269px;
  height: auto;
  flex: none;
}
.footer__disclosure {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}
.not-found a {
  text-decoration: underline;
}

/* ---------- Tablet / 768 (167:990) ---------- */
@media (max-width: 1023px) {
  .hero {
    padding-top: 88px;
    --doodle-top: 22.5px;
    --doodle-h: 674.71px;
  }
  .hero__tagline {
    font-size: 31px;
    max-width: 592px;
  }
  .listen-row {
    width: 127px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .listen {
    flex: none;
  }
  .is-soon .hero {
    padding-top: 67.31px;
  }
  .is-soon .puppet--hero.puppet--felt {
    margin-right: -148px;
  }
  .about__heading,
  .about__body {
    max-width: 592px;
  }
  .hosts__cols {
    flex-direction: column;
    align-items: stretch;
  }
  .segments__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer {
    flex-direction: column;
    justify-content: center;
    padding: 88px;
  }
}

/* ---------- Mobile / 390 (167:1203) ---------- */
@media (max-width: 639px) {
  :root {
    --pad-x: 24px;
    --pad-y: 64px;
  }
  .hero {
    padding-top: 48px;
    --doodle-top: 0.5px;
    --doodle-h: 718.5px;
  }
  .hero__wordmark {
    width: 322.9px; /* 320 node width at the export's 565/560 ratio */
  }
  .hero__tagline {
    max-width: 342px;
  }
  .puppet--hero.puppet--felt,
  .listen-row {
    margin-right: -96px;
  }
  .listen-row {
    width: 210px;
  }
  .is-soon .hero {
    padding-top: 48px;
  }
  .is-soon .hero__stage {
    flex: 1 1 0;
  }
  .is-soon .puppet--hero {
    margin-bottom: 0;
  }
  .about {
    gap: 20px;
  }

  /* type=compact (172:2091) */
  .ep--hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "art" "text" "ctrl";
  }
  .ep--hero.is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "art" "text" "ctrl";
    row-gap: 0;
  }
  .ep--hero .ep__platform {
    grid-area: mark;
    position: static;
    justify-self: end;
  }
  .ep--hero .ep__art,
  .ep--hero.is-active .ep__art {
    width: 200px;
    justify-self: center;
  }
  .ep--hero .ep__text {
    padding: 16px 0 0;
    gap: 4px;
  }
  .ep--hero .ep__controls {
    position: static;
  }
  .ep--hero .ep__track {
    display: flex;
  }

  /* type=Ep compact (173:2400) */
  .ep--row {
    padding: 24px;
    border-radius: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "art art" "text play";
    row-gap: 16px;
  }
  .ep--row.is-active {
    grid-template-areas: "art art" "text play" "track track";
  }
  .ep--row .ep__art {
    width: 200px;
    margin-right: 0;
    justify-self: center;
    box-shadow: var(--shadow-8dp);
  }
  .ep--row .ep__track {
    margin-top: 0;
  }

  .footer {
    padding: 48px;
  }
  .footer__disclosure {
    white-space: normal;
    text-align: center;
  }
}

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