/* Elliptical corners frame the scenery; only the media fades into the page. */
.hero { border-radius: 9% / 18%; background: var(--paper); isolation: isolate; }
.hero-media {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: #48655e;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}
.hero-photo { opacity: 0; transition: opacity 1.8s ease-in-out; }
.hero-photo.is-active { opacity: 1; }
.hero-shade, .hero-content { z-index: 1; }
.photo-caption { z-index: 2; color: var(--ink); }
.photo-caption small { color: #637264; }
.location-dot, .location-dot:after { border-color: var(--ink); }
.hero-index { color: #627460; z-index: 2; left: 5%; }
.hero-index span { color: var(--ink); }
.slideshow-controls {
  position: absolute; z-index: 2; bottom: 24px; left: 50%;
  transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
}
.slide-dot, .slideshow-pause {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); padding: 0;
}
.slide-dot:before {
  content: ''; width: 6px; height: 6px; border-radius: 20px; background: #8a9b84;
  transition: width .3s ease, background .3s ease;
}
.slide-dot.is-active:before { width: 20px; background: var(--ink); }
.slideshow-pause { margin-left: 6px; border: 1px solid #8a9b8455; font-size: 12px; }
.slideshow-pause[hidden] { display: none; }
.slideshow-pause:hover { background: #e4ebda; }
@media (max-width: 1100px) {
  .hero-index { display: none; }
  .slideshow-controls { left: 36px; transform: none; }
}
@media (max-width: 720px) {
  .hero { border-radius: 12% / 8%; min-height: 710px; }
  .hero-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  }
  .hero-content { padding-bottom: 140px; }
  .photo-caption { bottom: 65px; left: 25px; }
  .slideshow-controls { bottom: 17px; left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .slide-dot:before { transition: none; }
}