/* Focus the original photo on the crescent and white blossoms. */
.hero-art {
  width: 112%;
  height: auto;
  max-width: none;
  left: auto;
  right: -1%;
  top: clamp(-120px, -9vw, -65px);
  object-fit: initial;
  object-position: initial;
}
.hero:after {
  background: linear-gradient(90deg, #0c132bec 0%, #0c132b9c 36%, #0c132b15 64%, transparent 82%);
}
.hero .moon-glow { width: 40%; height: 80%; right: 0; top: -8%; }
.moon-highlights i:nth-child(1) { top: 18%; left: 86%; }
.moon-highlights i:nth-child(2) { top: 49%; left: 77%; }
.moon-highlights i:nth-child(3) { top: 36%; left: 92%; }
@media (max-width: 700px) {
  .hero { height: 720px; min-height: 0; }
  .hero-art {
    width: 225%;
    right: -10px;
    top: 55px;
    mask-image: linear-gradient(180deg, transparent 0, #000 90px);
  }
  .hero:after {
    background: linear-gradient(180deg, #0c132bec 0%, #0c132b7a 16%, transparent 32%, transparent 58%, #0c132bcc 80%, #0c132bf0 100%);
  }
  .hero-copy {
    height: 100%; width: 100%; padding: 24px;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .hero h1 { font-size: clamp(30px, 8.7vw, 36px); line-height: 1.4; }
  .hero-copy > .star-rule { width: 205px; margin: 14px 0 0; }
  .hero p { margin: auto 0 18px; font-size: 14px; }
  .hero .entrance { margin: 0; }
  .hero .moon-glow { width: 85%; height: 48%; top: 22%; right: -4%; }
  .moon-highlights i:nth-child(1) { top: 31%; left: 70%; }
  .moon-highlights i:nth-child(2) { top: 52%; left: 39%; }
  .moon-highlights i:nth-child(3) { top: 43%; left: 83%; }
}
@media (min-width: 501px) and (max-width: 700px) {
  .hero-art { width: 190%; top: -15px; }
  .hero { height: 780px; }
}