/* The three photographs travel together, following the reader's native vertical scroll. */
.hero-scroll{position:relative;height:auto}
.hero-scroll.is-enhanced{height:370dvh;min-height:370dvh}
.hero-scroll.is-enhanced .hero{
  position:sticky;
  top:0;
  height:100dvh;
  min-height:0;
  max-height:none;
  width:100%;
}
.hero-scroll.is-enhanced .hero-slides{
  display:flex;
  position:absolute;
  top:0;
  left:0;
  right:auto;
  bottom:0;
  width:calc(var(--hero-scenes,3) * 100%);
  height:100%;
  will-change:transform;
}
.hero-scroll.is-enhanced .hero-slide,
.hero-scroll.is-enhanced .hero-slide.is-active,
.hero-scroll.is-enhanced .hero-slide.is-before{
  position:relative;
  inset:auto;
  flex:0 0 calc(100% / var(--hero-scenes,3));
  width:calc(100% / var(--hero-scenes,3));
  height:100%;
  visibility:visible;
  opacity:1;
  transform:none;
  transition:none;
  z-index:0;
}
.hero-scroll.is-enhanced .hero-slide>picture{position:absolute;inset:0;display:block}
.hero-scroll.is-enhanced .scene-image,
.hero-scroll.is-enhanced .hero-slide.is-active .scene-image{
  transform:none;
  transition:none;
}
.hero-scroll.is-enhanced .hero-copy,
.hero-scroll.is-enhanced .is-active .hero-copy{
  opacity:1;
  transform:none;
  transition:none;
}
.hero-scroll [data-hero-toggle]{display:none}
.hero-story-active .site-header{position:fixed;top:0}
.hero-controls .icon-button:disabled{opacity:.28;transform:none}

/* A short tidal opening gives the first photograph time to arrive. No input is blocked. */
.wave-loader{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#f1f6ed;
  background:#173e35;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.65,0,.22,1),opacity .4s;
  animation:wave-loader-safety 1.4s step-end forwards;
}
.loader-brand{
  position:relative;
  z-index:2;
  margin-top:-8vh;
  font-family:Oswald,'Arial Narrow',Arial,sans-serif;
  font-size:clamp(60px,9vw,108px);
  line-height:1;
  letter-spacing:-.04em;
  text-align:center;
}
.loader-brand span{
  display:block;
  font-family:Manrope,Arial,sans-serif;
  margin-top:22px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.34em;
}
.loader-wave{
  position:absolute;
  width:170%;
  height:75%;
  left:-35%;
  bottom:-48%;
  border-radius:45% 52% 0 0;
  will-change:transform;
}
.loader-wave-back{
  background:#41796b;
  opacity:.75;
  animation:loader-tide-back 1.35s cubic-bezier(.3,.1,.3,1) both;
}
.loader-wave-front{
  background:#a3cfbb;
  bottom:-58%;
  border-radius:48% 44% 0 0;
  animation:loader-tide-front 1.35s cubic-bezier(.3,.1,.3,1) both;
}
.wave-loader.is-loaded{transform:translate3d(0,-100%,0);opacity:0}
@keyframes loader-tide-back{
  from{transform:translate3d(-6%,35%,0) rotate(-7deg)}
  to{transform:translate3d(5%,-20%,0) rotate(5deg)}
}
@keyframes loader-tide-front{
  from{transform:translate3d(7%,30%,0) rotate(7deg)}
  to{transform:translate3d(-5%,-17%,0) rotate(-4deg)}
}
@keyframes wave-loader-safety{0%{visibility:visible}100%{visibility:hidden}}
@media(max-width:767px){
  .hero-scroll.is-enhanced{height:355dvh;min-height:355dvh}
  .hero-scroll.is-enhanced .hero{min-height:0;height:100dvh}
}
@media(prefers-reduced-motion:reduce){
  .wave-loader{display:none!important}
  .hero-scroll,.hero-scroll.is-enhanced{height:auto;min-height:0}
  .hero-scroll.is-enhanced .hero{position:relative;height:100dvh;min-height:0}
  .hero-scroll.is-enhanced .hero-slides{display:block;width:100%;transform:none!important;will-change:auto}
  .hero-scroll.is-enhanced .hero-slide{position:absolute;inset:0;width:100%;visibility:hidden;opacity:0}
  .hero-scroll.is-enhanced .hero-slide.is-active{visibility:visible;opacity:1}
  .hero-story-active .site-header{position:absolute}
}
/* Keep the full chapter and controls visible on short laptop and landscape-phone screens. */
@media(max-height:620px){
  .hero-scroll.is-enhanced .hero-copy,
  .hero-scroll.is-enhanced .hero-slide[data-index='2'] .hero-copy{top:24%}
  .hero-scroll.is-enhanced h1,
  .hero-scroll.is-enhanced h2{font-size:clamp(40px,6.5vw,65px);line-height:1.04}
  .hero-scroll.is-enhanced .hero-kicker{font-size:8px;margin-bottom:14px}
  .hero-scroll.is-enhanced .hero-copy p{font-size:10px;line-height:1.6;margin-top:14px}
  .hero-scroll.is-enhanced .hero-copy .text-link{font-size:10px;margin-top:10px;padding-top:6px;padding-bottom:8px}
  .hero-scroll.is-enhanced .hero-bottom{bottom:18px}
  .hero-story-active .site-header{height:72px;padding-top:13px;padding-bottom:13px}
  .hero-story-active .wordmark{font-size:28px}
  .hero-story-active .wordmark-caption{font-size:6px;margin-top:6px}
}
@media(max-height:460px){
  .hero-scroll.is-enhanced .hero-copy p{display:none}
  .hero-scroll.is-enhanced h1,
  .hero-scroll.is-enhanced h2{font-size:clamp(38px,6.3vw,58px)}
  .hero-scroll.is-enhanced .hero-kicker{margin-bottom:10px}
  .hero-scroll.is-enhanced .hero-copy .text-link{margin-top:10px}
  .hero-scroll.is-enhanced .chapter{padding-top:10px;padding-bottom:12px}
  .hero-scroll.is-enhanced .hero-controls .icon-button{height:34px;width:34px}
}