:root {
  --pink: #ff66c4;
  --cyan: #5ce1e6;
  --cream: #f8f5ee;
  --brown: #561206;
  --nav-text: #8a96a3;
  --nav-active: #304254;
  --headline: "Anton", "Impact", sans-serif;
  --body: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--pink);
  font-family: var(--body);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  height: 56px;
  align-items: center;
  padding: 0 16px;
  background: #fff;
}
.nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-size: 22px;
}
.nav a:hover, .nav a.active { color: var(--nav-active); }

/* ---------- Layout ---------- */
main {
  max-width: 1306px;
  margin: 0 auto;
  padding: 35px 20px 60px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 20px;
  align-items: stretch;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .nav a { font-size: 18px; }
  .nav { gap: 16px; }
}
.section { margin-top: 68px; }

/* ---------- Type ---------- */
.headline {
  font-family: var(--headline);
  color: var(--cyan);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
  font-weight: 400;
}
.headline.huge { font-size: clamp(90px, 12vw, 172px); }
.headline.cream { color: var(--cream); }
.headline.center { text-align: center; }
.headline.save-date { font-size: clamp(110px, 16vw, 230px); }
.headline.page-title { font-size: clamp(80px, 11vw, 160px); }
.headline.episodes-title { font-size: clamp(80px, 9vw, 130px); }
.goal-cards { margin-top: 110px; }
.story-page { padding-top: 72px; }

.tagline {
  color: var(--cyan);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.5;
  margin: 70px 0 0 15px;
}

/* ---------- Images ---------- */
.logo {
  width: 100%;
  height: 100%;
  min-height: 300px;
  aspect-ratio: 643 / 697;
  object-fit: cover;
  display: block;
}

/* ---------- Cards ---------- */
.card {
  background: var(--cream);
  color: var(--brown);
  text-align: center;
  padding: 50px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card .icon {
  width: 130px;
  height: 130px;
  margin-bottom: 50px;
}
.card .icon.small { width: 115px; height: 85px; margin-bottom: 40px; }
.card h3 {
  font-family: var(--headline);
  color: var(--pink);
  text-transform: uppercase;
  font-size: 42px;
  font-weight: 400;
  margin: 0 0 12px;
}
.card p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}
.card.bold p { font-weight: 700; font-size: 25px; }
.stack { display: grid; gap: 24px; }

/* ---------- Episodes ---------- */
.episodes {
  color: var(--cream);
  padding-left: 30px;
}
.episodes .list { margin-top: 90px; }
.episodes h4 {
  font-size: 25px;
  margin: 0 0 12px;
}
.episodes a {
  display: block;
  color: var(--cream);
  font-size: 19px;
  word-break: break-all;
  margin-bottom: 40px;
}
.episodes a:hover { color: var(--cyan); }

/* ---------- Story ---------- */
.story-box {
  background: var(--cyan);
  color: var(--pink);
  font-weight: 700;
  text-align: center;
  padding: 10px 36px 20px;
}
.story-box h2 { font-size: 36px; margin: 0 0 50px; }
.story-box p { font-size: 36px; line-height: 1.5; margin: 0; }
@media (max-width: 800px) {
  .story-box p, .story-box h2 { font-size: 24px; }
}