/* Current live homepage photograph; the saved moon-garden CSS and art remain untouched. */
.moon-garden-page { padding-top: 0; }

.moon-garden-page .hero {
  --hero-ink: #2d2927;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(650px, 100svh, 1120px);
  padding: max(130px, calc(var(--site-header-height) + 42px)) 5vw 64px;
  color: var(--hero-ink);
  background:
    linear-gradient(90deg,
      rgba(255, 252, 245, .98) 0%,
      rgba(255, 252, 245, .94) 34%,
      rgba(255, 252, 245, .72) 54%,
      rgba(255, 252, 245, .25) 78%,
      rgba(255, 252, 245, .08) 100%),
    url("public/images/hero-china-journey.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 66% center;
}

.moon-garden-page .hero-copy {
  position: relative;
  z-index: 1;
  width: 53%;
  max-width: 850px;
}

.moon-garden-page .hero h1 {
  color: var(--hero-ink);
  font-size: clamp(40px, min(5vw, 8svh), 80px);
  line-height: 1.12;
}

.moon-garden-page .hero p {
  max-width: 610px;
  margin-top: 28px;
  color: var(--hero-ink);
  font-size: clamp(17px, 1.5vw, 24px);
}

.moon-garden-page .hero-actions { margin-top: 28px; }
.moon-garden-page .hero .primary { background: #006443; color: #fff; }
.moon-garden-page .hero .secondary { color: var(--hero-ink); }

@media (prefers-color-scheme: dark) {
  .moon-garden-page .hero {
    --hero-ink: #eef4f0;
    background:
      linear-gradient(90deg,
        rgba(16, 21, 17, .98) 0%,
        rgba(16, 21, 17, .92) 34%,
        rgba(16, 21, 17, .70) 56%,
        rgba(16, 21, 17, .30) 80%,
        rgba(16, 21, 17, .16) 100%),
      url("public/images/hero-china-journey.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 66% center;
  }
}

@media (max-width: 1080px) {
  .moon-garden-page .hero { padding-inline: 4vw; }
  .moon-garden-page .hero-copy { width: 67%; }
  .moon-garden-page .hero h1 { font-size: clamp(35px, 5.7vw, 60px); }
  .moon-garden-page .hero {
    background-image:
      linear-gradient(180deg, rgba(255, 252, 245, .97) 0%, rgba(255, 252, 245, .91) 48%, rgba(255, 252, 245, .52) 100%),
      url("public/images/hero-china-journey.webp");
    background-position: 62% center;
  }
  @media (prefers-color-scheme: dark) {
    .moon-garden-page .hero {
      background-image:
        linear-gradient(180deg, rgba(16, 21, 17, .97) 0%, rgba(16, 21, 17, .90) 48%, rgba(16, 21, 17, .48) 100%),
        url("public/images/hero-china-journey.webp");
    }
  }
}

@media (max-width: 680px) {
  .moon-garden-page .hero {
    align-items: flex-start;
    min-height: max(760px, 100svh);
    padding: calc(var(--site-header-height) + 50px) 20px 84px;
    background-image:
      linear-gradient(180deg, rgba(255, 252, 245, .97) 0%, rgba(255, 252, 245, .92) 36%, rgba(255, 252, 245, .80) 64%, rgba(255, 252, 245, .42) 100%),
      url("public/images/hero-china-journey.webp");
    background-position: 64% center;
  }
  .moon-garden-page .hero-copy { width: 100%; }
  .moon-garden-page .hero h1 { font-size: clamp(29px, 9.3vw, 52px); }
  .moon-garden-page .hero p { max-width: 94%; font-size: 17px; }
  .moon-garden-page .hero-actions { gap: 12px; }
  @media (prefers-color-scheme: dark) {
    .moon-garden-page .hero {
      background-image:
        linear-gradient(180deg, rgba(16, 21, 17, .97) 0%, rgba(16, 21, 17, .91) 36%, rgba(16, 21, 17, .78) 64%, rgba(16, 21, 17, .40) 100%),
        url("public/images/hero-china-journey.webp");
    }
  }
}