/* landing.css — front-of-house styling for the arrival, about, and tiers
 * rooms. Rides on the shared system in home.css; only the flourishes those
 * pages need live here: the arrival glow, the two doors, the garden quote,
 * the credit block, and the tier row. Every value derives from the custom
 * properties in home.css, so one ruling still changes the whole house.
 */

/* ---------- arrival ---------- */

.arrival-hero {
  position: relative;
  text-align: center;
  padding: var(--home-space-5) var(--home-space-3);
  /* the one permitted glow: a single subtle warm radial behind the header */
  background: radial-gradient(
    ellipse 65% 75% at 50% 15%,
    rgb(217 164 65 / 8%),
    transparent 70%
  );
}

.arrival-hero h1 {
  font-size: 2.4rem;
  margin-bottom: var(--home-space-3);
}

.hero-sub {
  color: var(--home-text-dim);
  font-weight: 400;
  white-space: nowrap;
}

.hero-line {
  font-family: var(--home-serif);
  font-size: 1.15rem;
  max-width: var(--home-measure);
  margin: 0 auto var(--home-space-4);
}

.hero-doors {
  display: flex;
  justify-content: center;
  gap: var(--home-space-3);
  flex-wrap: wrap;
}

.hero-doors .door {
  font-size: 1.05rem;
  padding: var(--home-space-2) var(--home-space-4);
}

.rooms {
  margin: var(--home-space-4) 0;
}

.rooms .panel p {
  font-size: 0.98rem;
  color: var(--home-text);
}

/* ---------- quoted words, carried on their own terms ---------- */

.garden,
blockquote.framing {
  max-width: var(--home-measure);
  margin: var(--home-space-5) auto;
  text-align: center;
}

.garden blockquote {
  margin: 0;
}

.garden blockquote p,
blockquote.framing p {
  font-family: var(--home-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--home-text);
  margin-bottom: var(--home-space-2);
}

.garden blockquote footer,
blockquote.framing footer {
  font-family: var(--home-sans);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--home-text-dim);
}

blockquote.framing {
  margin: var(--home-space-4) 0;
  text-align: left;
  border-left: 3px solid var(--home-ember-dim);
  padding-left: var(--home-space-3);
}

/* ---------- about ---------- */

.about h2 {
  margin-top: var(--home-space-4);
}

.about ul li {
  margin-bottom: var(--home-space-2);
}

.credit-block {
  background: var(--home-raised);
  border: 1px solid var(--home-line);
  border-left: 3px solid var(--home-ember-dim);
  border-radius: var(--home-radius);
  padding: var(--home-space-3);
  max-width: var(--home-measure);
}

.credit-block p {
  font-family: var(--home-serif);
  font-style: italic;
  margin: 0;
}

/* ---------- tiers ---------- */

.tier-row {
  margin: var(--home-space-4) 0;
  align-items: stretch;
}

.tier h2 {
  margin-bottom: var(--home-space-1);
}

.tier-price {
  font-family: var(--home-mono);
  font-size: 0.95rem;
  color: var(--home-ember);
  margin-bottom: var(--home-space-3);
}

.tier p {
  font-size: 0.98rem;
}

/* ---------- small rooms ---------- */

@media (max-width: 720px) {
  .arrival-hero {
    padding: var(--home-space-4) var(--home-space-2);
  }

  .arrival-hero h1 {
    font-size: 1.9rem;
  }

  .hero-sub {
    display: block;
    white-space: normal;
    font-size: 1.2rem;
  }
}