/* Home page. A full-bleed deep-lapis hero built on the pilgrim emblem,
   descending into a calm vellum scroll: about, the two ages, the hosts,
   the book, and a latest-episodes teaser. No JavaScript. */

/* ============================ HERO ============================ */
/* The hero ground is the road emblem's own painted lapis (sampled from
   the artwork's corners, ~#012153). Keeping the base a flat solid of that
   colour lets the emblem's radial-masked edges dissolve into it with no
   seam; a soft vignette over the top adds depth at the rim. If the emblem
   art is ever re-exported, re-sample its corners and update this value. */
.hero {
  --hero-ground: #012153;
  background-color: var(--hero-ground);
  background-image: radial-gradient(120% 95% at 50% 36%, transparent 34%, rgba(2, 12, 38, .6) 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, 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 .podcast-platforms, .scroll-cue {
    animation: hero-rise 1s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero-tagline { animation-delay: .08s; }
  .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: centrepiece. Its painted ground is the same lapis as the
   hero, so its square tile is already seamless; a soft radial mask only
   fades the extreme corners, guarding against the vignette darkening the
   ground beneath the tile edge. The opaque core (to 80%) safely holds
   the road, the radiant city and the fleur finial. */
.hero-emblem {
  width: clamp(14rem, 42vw, 22rem);
  height: auto;
  aspect-ratio: 1;
  -webkit-mask: radial-gradient(circle at 50% 48%, #000 56%, transparent 71%);
  mask: radial-gradient(circle at 50% 48%, #000 56%, transparent 71%);
}

/* The wordmark lockup, pulled up into the emblem's empty lower ground so
   the seal and name read as one heraldic unit beneath the pilgrim. */
.hero-lockup {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: clamp(-2.5rem, -3vw, -1.25rem);
  /* The emblem's CSS mask makes it a stacking context that would
     otherwise paint over the lockup pulled up beneath it; lift the
     lockup so the wordmark sits above the emblem's empty lower ground. */
  position: relative;
  z-index: 1;
}
.hero-seal {
  flex-shrink: 0;
  width: clamp(3.25rem, 9vw, 4.75rem);
  aspect-ratio: 1;
  border: 1.5px solid var(--gold-bright);
  background: var(--vellum);
  position: relative;
}
.hero-seal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-seal::after {
  content: "";
  position: absolute;
  inset: .25rem;
  border: 1px solid rgba(201, 162, 39, .55);
}
.wordmark {
  font-family: 'Cardo', serif;
  font-weight: 400;
  line-height: .98;
  text-align: left;
  font-size: clamp(2.1rem, 6.2vw, 3.6rem);
}
.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;
}

/* Listen-on row: bright gold links parted by small fleurons, as on the
   sibling site's podcast hero. */
.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;
  /* Taller hit area so each platform clears a comfortable thumb target
     and the closely set links are not a mis-tap risk one-handed. */
  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); }
  }
}

/* ===================== SHARED SECTION RHYTHM ===================== */
.about, .two-ages, .hosts, .book, .latest {
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.two-ages, .book { background: var(--vellum-deep); }
.about .rubric-label,
.hosts-head .rubric-label,
.two-ages > .rubric-label,
.book-text .rubric-label,
.latest .rubric-label { display: inline-block; }

/* ============================ ABOUT ============================ */
.about {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.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, the
   manuscript conceit carried into the body. */
.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;
}

/* ========================== TWO AGES ========================== */
.two-ages { text-align: center; }
.two-ages > .rubric-label { margin-bottom: 1.75rem; }
.two-ages-plate { max-width: 36rem; margin: 0 auto; }
.two-ages .gloss {
  max-width: 32rem;
  margin: 1.75rem auto 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

/* =========================== HOSTS =========================== */
.hosts { max-width: 72.5rem; margin: 0 auto; }
.hosts-head { text-align: center; margin-bottom: 3rem; }
.hosts-head h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  margin-top: .75rem;
}
.host-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 760px) { .host-list { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; } }
.host {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gold);
  position: relative;
}
/* A small gold fleuron astride each host's top rule. */
.host::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: .8rem;
  height: .8rem;
  transform: translate(-50%, -50%);
  background: var(--vellum);
  box-shadow: 0 0 0 .35rem var(--vellum);
}
.host::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: .8rem;
  height: .8rem;
  transform: translate(-50%, -50%);
  background: var(--gold);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}
.host-name {
  font-family: 'Cardo', serif;
  font-size: 1.4rem;
  color: var(--lapis);
}
.host-role {
  color: var(--gold-ink);
  font-size: .82rem;
  margin-top: .25rem;
}
.host-where {
  margin-top: .625rem;
  color: var(--ink);
  font-size: 1rem;
}
.host-loc { display: block; color: var(--ink-soft); font-style: italic; font-size: .95rem; }
.host-note {
  margin-top: .875rem;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}
/* The lead host carries a touch more weight: a rubric versal initial. */
.host-lead .host-name::first-letter { color: var(--rubric); }

/* ============================ BOOK ============================ */
.book-inner {
  max-width: 60rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}
@media (max-width: 680px) {
  .book-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .book-text { text-align: center; }
}
.book-plate { width: 100%; max-width: 15rem; }
.book-plate a { display: block; border: 0; }
.book-name {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--lapis);
  margin-top: .75rem;
  line-height: 1.15;
}
.book-sub { font-style: italic; color: var(--ink-soft); margin-top: .5rem; }
.book-by {
  font-variant: small-caps;
  letter-spacing: .08em;
  color: var(--gold-ink);
  font-size: .9rem;
  margin-top: .75rem;
}
.book-text > p { color: var(--ink-soft); margin-top: 1rem; }
.book-link {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--lapis);
  font-variant: small-caps;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.book-link:hover { color: var(--gold-ink); }

/* =========================== LATEST =========================== */
.latest { max-width: 50rem; margin: 0 auto; text-align: center; }
.latest-head { margin-bottom: 1.75rem; }
.latest-list { list-style: none; text-align: left; }
.latest-list li { border-bottom: 1px solid var(--line); }
.latest-row {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  padding: .9rem 2px;
  transition: background .2s;
}
.latest-row:hover { background: rgba(168, 129, 47, .07); }
.latest-no {
  font-family: 'Cardo', serif;
  color: var(--lapis);
  min-width: 2.2em;
  text-align: right;
}
.latest-title {
  color: var(--lapis);
  border-bottom: 1px solid var(--gold);
}
.latest-date {
  margin-left: auto;
  padding-left: .875rem;
  font-size: .95rem;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.latest-more { margin-top: 2rem; }
.latest-more a {
  color: var(--lapis);
  font-variant: small-caps;
  letter-spacing: .14em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.latest-more a:hover { color: var(--gold-ink); }