.wave-grid .opening{height:230svh}
.wave-grid .hero{position:sticky;top:0;height:100svh;min-height:100svh;overflow:hidden}
.wave-grid .hero h1 .media-stop{display:inline-block;width:.16em;height:.16em;margin-left:.018em;background:#242320;border-radius:0;vertical-align:baseline}
.period-media{position:absolute;z-index:4;overflow:hidden;pointer-events:none;will-change:width,height,left,top,border-radius}
.period-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.period-caption{position:absolute;inset:auto 0 0;padding:80px var(--gutter) 64px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:white;opacity:0;pointer-events:auto}
.period-caption p{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.period-caption h2{font-size:clamp(38px,6vw,88px);line-height:1.05;font-weight:500;letter-spacing:-.04em;margin:16px 0 24px}.period-caption a{display:inline-block;border-bottom:1px solid #ffffff80;padding-bottom:9px}
@media(prefers-reduced-motion:reduce){.wave-grid .opening{height:auto}.wave-grid .hero{position:relative;height:auto;min-height:calc(100svh - 110px)}.period-media{display:none}}

.wave-grid .hero{isolation:isolate}.wave-grid .grid-backdrop{position:absolute;inset:0}.period-media>img{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}.period-media>img.is-active{opacity:var(--image-reveal,0);transition:none}.period-caption{z-index:1}
.period-media{background:var(--ink)}

.wave-grid .hero-stage{position:sticky;top:0;height:100svh;isolation:isolate;overflow:hidden}
.wave-grid .hero{position:static;height:calc(100svh - 110px);min-height:0;isolation:auto;overflow:visible}
@media(max-width:760px){.wave-grid .hero{height:calc(100svh - 88px)}}
@media(prefers-reduced-motion:reduce){.wave-grid .hero-stage{position:relative;height:auto;min-height:100svh}.wave-grid .hero{height:auto;min-height:calc(100svh - 110px)}}
/* Without the reveal script, the hero is one screen and all copy remains readable. */
.wave-grid:not(.has-reveal) .opening{height:auto}
.wave-grid:not(.has-reveal) .hero-stage{position:relative}
.wave-grid:not(.has-reveal) .period-media{display:none}
.grid-backdrop[data-ready="true"]{background-image:none!important}