/* Layer movement does not touch the hero image's existing parallax or title mask. */
.katuna-hero-slides{position:absolute;inset:0;overflow:hidden;isolation:isolate;z-index:0;background:var(--paper)}
.katuna-hero-slide{position:absolute;inset:0;visibility:hidden;pointer-events:none;overflow:hidden}
.katuna-hero-slide.is-current{visibility:visible}
.katuna-hero-slide img{display:block;width:100%;height:100%;object-fit:cover}
/* The same circle and arrow as the history link; only its colour and direction differ. */
.hero-photo>.hero-explore.circle-button{top:24px;right:24px;bottom:auto;left:auto;width:84px;height:84px;font-size:34px;color:#fff;background:transparent;border:1px solid currentColor;backdrop-filter:none;box-shadow:none;z-index:21}
.hero-photo>.hero-explore.circle-button:hover,.hero-photo>.hero-explore.circle-button:active{color:#fff;background:transparent;transform:none;box-shadow:none}
.hero-photo>.hero-explore.circle-button>span{display:block;transform:rotate(-110deg);transition:transform .35s var(--ease)}
.hero-photo>.hero-explore.circle-button:hover>span,.hero-photo>.hero-explore.circle-button:focus-visible>span{transform:rotate(-90deg)}
.hero-photo>.hero-explore.circle-button>.ripple{display:none}
@media(max-width:760px){.hero-photo>.hero-explore.circle-button{top:18px;right:18px;width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){.hero-photo>.hero-explore.circle-button>span{transition:none}}

/* Keep the raised control clickable above the transparent header without lifting the photograph. */
.site-header:not(.scrolled)~main .hero-photo{isolation:auto}

/* On narrow desktop screens keep the unchanged navigation clear of the larger circle. */
@media(min-width:1101px) and (max-width:1599px){.hero-photo>.hero-explore.circle-button{top:80px}}

.hero-photo>.hero-explore.circle-button>span>svg{display:block;width:.7056666667em;height:1em;overflow:visible}