/* Home page: hero, the two-ages overlap diagram, and the four-hall
   entry grid. Ported from prototyping/sojourner-hall-home.html. */

/* ---------- Hero: the beatific vision ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, var(--lapis) 0%, var(--lapis-deep) 100%);
  overflow: hidden;
}
.hero img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* Taller than the hero so the scroll handler in index.html can pan
     the painting from the dome of heaven down to the tomb scene as the
     page scrolls. Without JS (or with reduced motion) the top of the
     painting shows statically. */
  height: 130%;
  object-fit: cover;
  object-position: center top;
  opacity: .92;
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  /* Heavier foot than before: the parallax pan means the strapline can
     sit over the bright lower tiers of the dome, not just the dark
     ground scene. */
  background: linear-gradient(180deg, rgba(21, 43, 84, .25) 0%, rgba(21, 43, 84, 0) 30%, rgba(18, 16, 12, .55) 72%, rgba(18, 16, 12, .88) 100%);
}
.hero-quote {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3.5rem 3rem 5.5rem;
  max-width: 55rem;
  animation: rise 1.2s ease-out both;
}
/* Soft local vignette so the quote stays legible wherever the panning
   painting is brightest. Painted on a ::before that extends well past
   the quote's box, so the fade reaches full transparency before any
   edge and no rectangle shows; the hero's overflow clips the spill. */
.hero-quote::before {
  content: "";
  position: absolute;
  inset: -5rem -13.75rem -3.125rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 58% at 50% 52%, rgba(18, 16, 12, .5) 0%, rgba(18, 16, 12, .3) 45%, rgba(18, 16, 12, .12) 66%, rgba(18, 16, 12, 0) 82%);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1.125rem); }
  to { opacity: 1; transform: none; }
}
.hero-quote h1 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1.3;
  color: var(--vellum);
  text-wrap: balance;
  text-shadow: 0 1px 1rem rgba(18, 16, 12, .8), 0 0 3px rgba(18, 16, 12, .55);
}
.hero-quote .attribution {
  text-shadow: 0 1px .625rem rgba(18, 16, 12, .8);
}
.hero-quote h1 .open-quote,
.hero-quote h1 .close-quote { color: var(--gold-bright); }
.hero-quote .attribution {
  margin-top: 1.25rem;
  color: var(--gold-bright);
  font-size: .95rem;
}
.hero-credit {
  position: absolute;
  bottom: .625rem; right: .875rem;
  z-index: 2;
  font-size: .85rem;
  color: rgba(245, 239, 226, .75);
  letter-spacing: .05em;
}

/* ---------- The overlap of the ages: signature device ---------- */
.overlap {
  background: var(--vellum);
  border-bottom: 1px solid var(--line);
  padding: 4.5rem 1.5rem 4rem;
  text-align: center;
}
.overlap .rubric-label { margin-bottom: 1.75rem; }
.overlap p.gloss {
  max-width: 35rem;
  margin: 1.75rem auto 0;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Four halls: Podcast / Courses / Lectures / Articles ---------- */
.halls {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}
.halls-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.halls-head h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  margin-top: .625rem;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
.cell {
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border: 0 solid var(--line);
  position: relative;
  background: var(--vellum);
  transition: background .3s;
  display: block;
}
.grid .cell:nth-child(1) { border-right-width: 1px; border-bottom-width: 1px; }
.grid .cell:nth-child(2) { border-bottom-width: 1px; }
.grid .cell:nth-child(3) { border-right-width: 1px; }
@media (max-width: 720px) {
  .grid .cell { border-right-width: 0 !important; border-bottom-width: 1px !important; }
  .grid .cell:last-child { border-bottom-width: 0 !important; }
}
.cell:hover { background: var(--vellum-deep); }
/* Boxed illuminated versals: crops of the user's painted P C L A sheet
   (matching the podcast S and the two-ages plate), in a double gold
   rule as on the monogram. */
.cell .initial {
  float: left;
  width: 3.875rem;
  height: 3.875rem;
  margin: .25rem 1.125rem .25rem 0;
  border: 1.5px solid var(--gold);
  position: relative;
}
.cell .initial img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cell .initial::after {
  content: "";
  position: absolute;
  inset: .25rem;
  border: 1px solid rgba(168, 129, 47, .45);
  pointer-events: none;
}
.cell h3 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: 1.55rem;
  margin-bottom: .375rem;
}
.cell .sub {
  font-variant: small-caps;
  letter-spacing: .16em;
  font-size: .95rem;
  color: var(--gold-ink);
  display: block;
  margin-bottom: .875rem;
}
.cell p { color: var(--ink-soft); clear: none; }
.cell .go {
  display: inline-block;
  margin-top: 1.125rem;
  font-variant: small-caps;
  letter-spacing: .16em;
  font-size: .95rem;
  color: var(--lapis);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}