/* Home page. A full-bleed deep-lapis hero built on the pilgrim emblem,
   descending into a calm vellum scroll: about, a cinematic threshold band,
   a coming-soon listen block, and a media teaser. No JavaScript. */

/* ============================ HERO ============================ */
/* The hero ground is the emblem's own painted lapis (#012153, sampled
   from the artwork's corners). Keeping the base a flat solid of that
   colour lets the emblem's square tile dissolve into it with no seam, so
   only the gold and lapis rings and the gold pilgrim appear to float; a
   soft radial vignette adds depth at the rim. If the emblem art is ever
   re-exported, re-sample its corners and update --lapis-night. */
.hero {
  background-color: var(--lapis-night);
  background-image: radial-gradient(120% 100% at 50% 42%, transparent 42%, rgba(1, 10, 32, .72) 100%);
  color: var(--vellum);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 8vh, 6rem) 1.5rem clamp(2.5rem, 6vh, 4rem);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 46rem;
  position: relative;
}
/* The text lockup and cues rise in gently on load. The emblem itself is
   the LCP and is deliberately left out of the animation, so it paints
   instantly and crisp rather than fading up from the dark ground. */
@media (prefers-reduced-motion: no-preference) {
  .hero-lockup, .hero-tagline, .hero-soon, .hero .podcast-platforms, .scroll-cue {
    animation: hero-rise 1s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero-tagline { animation-delay: .08s; }
  .hero-soon, .hero .podcast-platforms { animation-delay: .16s; }
  .scroll-cue { animation-delay: .24s; }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: none; }
  }
}

/* The emblem: the centrepiece. Its painted ground matches the hero, so
   its square tile is already seamless; no mask is applied because the two
   rings reach close to the tile edges and a radial fade would clip them. */
.hero-emblem {
  width: clamp(15rem, 46vw, 24rem);
  height: auto;
  aspect-ratio: 1;
}

/* The wordmark lockup sits just beneath the emblem, reading as one unit
   with the pilgrim above. A small pull-up nests it toward the rings'
   lower crossing without overlapping them. */
.hero-lockup {
  margin-top: clamp(-1.25rem, -1.5vw, 0rem);
  position: relative;
  z-index: 1;
}
.wordmark {
  font-family: 'Cardo', serif;
  font-weight: 400;
  line-height: .98;
  font-size: clamp(2.1rem, 6.4vw, 3.7rem);
  letter-spacing: .01em;
}
.wordmark span { display: block; }
.wordmark .line-gold { color: var(--gold-bright); }

.hero-tagline {
  max-width: 32rem;
  margin: 1.5rem auto 0;
  font-style: italic;
  color: rgba(245, 239, 226, .82);
  font-size: 1.05rem;
}

/* Pre-launch cue in place of the listen row: a quiet gold line. */
.hero-soon {
  margin-top: 1.75rem;
  color: var(--gold-bright);
  letter-spacing: .2em;
  font-size: .95rem;
}

/* Listen-on row (used once the show launches): bright gold links parted
   by small fleurons, as on the sibling sites. */
.hero .podcast-platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 0;
  margin-top: 2rem;
  font-size: .95rem;
}
.hero .podcast-platforms a {
  color: var(--gold-bright);
  letter-spacing: .16em;
  padding: .55rem .35rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.hero .podcast-platforms a:hover { border-bottom-color: var(--gold-bright); }
.hero .podcast-platforms li + li::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin: 0 1.125rem;
  background: rgba(201, 162, 39, .65);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}

/* A quiet scroll cue: a bright gold fleuron that bobs, since the hero
   fills the viewport and the page continues below. */
.scroll-cue {
  margin-top: 2.5rem;
  color: var(--gold-bright);
  opacity: .85;
}
.scroll-cue .fleuron { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: cue-bob 2.4s ease-in-out infinite; }
  @keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(.4rem); }
  }
}

/* ============================ ABOUT ============================ */
.about {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.about .rubric-label { display: inline-block; }
.about-body { margin-top: 1.5rem; text-align: left; }
.about-body p { margin-bottom: 1.125rem; color: var(--ink-soft); }
.about-body p:last-child { margin-bottom: 0; }
/* The incipit: a rubricated drop cap opening the first paragraph. */
.incipit { color: var(--ink); font-size: 1.18rem; }
.incipit::first-letter {
  font-family: 'Cardo', serif;
  font-size: 3.4em;
  line-height: .82;
  color: var(--rubric);
  float: left;
  padding: .06em .14em 0 0;
}

/* ========================= THRESHOLD ========================= */
/* A full-bleed cinematic band reprising the title art between the calm
   vellum sections. The image carries its own baked title, so no wordmark
   is overlaid; a caption sits beneath on the lapis ground. */
.threshold {
  position: relative;
  background: var(--lapis-night);
}
.threshold-img {
  display: block;
  width: 100%;
  height: auto;
  /* Show the whole scene rather than cropping it: the baked "Between Two
     Realms" title runs edge to edge, so a fixed-height cover crop would
     clip the first and last letters. The aspect-ratio reserves the space
     to avoid layout shift while the image loads. */
  aspect-ratio: 2400 / 1340;
}
/* On phones the art-directed portrait source loads; reserve its taller box. */
@media (max-width: 640px) {
  .threshold-img { aspect-ratio: 1200 / 2150; }
}
.threshold-caption {
  margin: 0;
  padding: 1.125rem 1.5rem 1.375rem;
  text-align: center;
  font-style: italic;
  color: rgba(245, 239, 226, .8);
  font-size: 1.05rem;
  background: var(--lapis-night);
}

/* =========================== LISTEN =========================== */
.listen {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
  text-align: center;
}
.listen .rubric-label { display: inline-block; }
.listen-lead {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.listen .podcast-platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 0;
  margin-top: 2rem;
  font-size: .95rem;
}
.listen .podcast-platforms a {
  color: var(--lapis);
  letter-spacing: .16em;
  padding: .55rem .35rem;
  border-bottom: 1px solid var(--gold);
}
.listen .podcast-platforms a:hover { color: var(--gold-ink); }
.listen .podcast-platforms li + li::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin: 0 1.125rem;
  background: var(--gold);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}

/* ======================== MEDIA TEASER ======================== */
.media-teaser {
  background: var(--vellum-deep);
  border-top: 1px solid var(--line);
  padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
}
.media-teaser-inner {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.media-teaser-inner h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--lapis);
}
.media-teaser-inner p {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: var(--ink-soft);
}
.media-teaser-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--lapis);
  letter-spacing: .14em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.media-teaser-link:hover { color: var(--gold-ink); }