/* Transparent artwork, with a stable frame to prevent layout shifts. */
.hero-slideshow { position: relative; width: 100%; aspect-ratio: 1944 / 1467; isolation: isolate; }
.hero-art .hero-slideshow .hero-slide { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; mix-blend-mode: normal; }
.hero-slide-first { opacity: 1; }
.hero-slide-second { opacity: 0; animation: gh-hero-crossfade 12s ease-in-out infinite; }
@keyframes gh-hero-crossfade { 0%, 40%, 100% { opacity: 0; } 50%, 90% { opacity: 1; } }
/* Fade the first image too, so transparent portions do not reveal both artworks. */
.hero-slide-first { animation: gh-hero-first 12s ease-in-out infinite; }
@keyframes gh-hero-first { 0%, 40%, 100% { opacity: 1; } 50%, 90% { opacity: 0; } }
.hero-slideshow.is-paused .hero-slide { animation-play-state: paused; }
.hero-slideshow-toggle { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 7px 11px; border: 1px solid rgba(9,89,127,.22); border-radius: 4px; background: rgba(255,255,255,.92); color: #09597f; font: 500 11px Raleway, sans-serif; cursor: pointer; }
.hero-slideshow-toggle:hover { background: #fff; }
.hero-slideshow-toggle:focus-visible { outline: 2px solid #09597f; outline-offset: 3px; }
.hero-slideshow-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-slideshow .hero-slide { animation: none; } .hero-slideshow .hero-slide-first { opacity: 1; } .hero-slideshow .hero-slide-second { opacity: 0; } .hero-slideshow-toggle { display: none; } }