/* An ample flowering canopy belongs to the opening alone. */
.hero {
  padding: 408px 24px 80px;
}
.hero-wood {
  top: -90px;
  left: calc(50% - 490px);
  right: auto;
  bottom: auto;
  width: 900px;
  transform: none;
  transform-origin: 50% 0;
}
.hero h1 {
  font-size: clamp(76px, min(9.4vw, 13.6svh), 146px);
}
.hero .hero-subtitle { margin-top: 20px; }
.hero .explore { margin-top: 20px; }

@media (min-width: 1800px) {
  .hero-wood { width: 1080px; left: calc(50% - 480px); top: -130px; }
}

@media (min-width: 601px) and (min-height: 850px) and (max-height: 949px) {
  .hero { padding-top: 330px; }
  .hero-wood { width: 850px; left: calc(50% - 450px); top: -140px; }
}

@media (max-height: 849px) and (min-width: 601px) {
  .hero { padding: 270px 24px 90px; }
  .hero-wood { width: 700px; left: calc(50% - 390px); top: -145px; }
}

@media (min-height: 651px) and (max-height: 849px) and (min-width: 601px) {
  .hero .explore { position: relative; top: -18px; }
}

@media (max-width: 1100px) and (min-width: 601px) {
  .hero-wood {
    width: clamp(540px, calc(43svh + 239px), 670px);
    left: max(170px, calc(50% - 214px));
    top: clamp(-70px, calc(16.7svh - 187px), -20px);
  }
  .hero h1 { font-size: clamp(76px, min(14.3vw, 13.6svh), 110px); }
}

@media (max-width: 900px) and (min-width: 601px) {
  .hero-peony { right: -100px; }
}

@media (max-width: 1100px) {
  /* The official mark identifies the opening; keep the canopy free of small labels. */
  body:has(.chapter-nav a[href="#intro"][aria-current]) .edition { visibility: hidden; }
}

@media (max-width: 600px) {
  .hero { padding: 360px 24px 90px; }
  .hero-wood { top: 165px; left: 150px; width: 520px; }
  .hero h1 { font-size: clamp(58px, 15.8vw, 96px); }
  .hero-peony { right: -116px; }
}

@media (max-height: 650px) and (min-width: 601px) {
  .hero { padding: 140px 24px 70px; }
  .hero h1 { font-size: clamp(44px, min(9.4vw, 14svh), 88px); }
  .hero .hero-subtitle { margin-top: 13px; }
  .hero .explore { margin-top: 12px; }
  .hero-wood { top: -230px; }
}

@media (max-height: 450px) and (min-width: 601px) {
  .hero { padding: 90px 24px 64px; }
  .hero h1 { font-size: clamp(44px, 14svh, 78px); }
  .hero-wood { width: 520px; left: 130px; top: -210px; }
}

@media (max-height: 650px) and (max-width: 600px) {
  .hero { padding: 240px 24px 80px; }
  .hero h1 { font-size: clamp(48px, min(15.8vw, 9.8svh), 70px); }
  .hero-wood { width: 430px; left: 140px; top: -70px; }
  .hero-peony { right: -110px; }
}