/* The film stays behind the natural page flow; only its frame follows scrolling. */
body{isolation:isolate}
.zipp-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--ground)}
.zipp-backdrop-media{position:absolute;left:-6%;top:-6%;width:112%;height:112%;object-fit:cover;object-position:50% 50%;transform:translate3d(0,var(--zipp-depth,0px),0)}
.zipp-backdrop video{opacity:0}
.zipp-backdrop.is-ready video{opacity:1}
.zipp-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,24,.60) 0%,rgba(4,10,24,.60) 48%,rgba(4,10,24,.46) 100%),linear-gradient(0deg,rgba(4,10,24,.2),transparent 28%,transparent 80%,rgba(4,10,24,.2))}
body>.top,body>main,body>footer{position:relative;z-index:1}
.zipp-poster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px;border-top:1px solid #514650;padding:72px 0;scroll-margin-top:32px}
.zipp-poster figure{margin:0;width:100%;max-width:520px;justify-self:center}
.zipp-poster img{display:block;width:100%;height:auto;border-radius:16px}
.zipp-poster .intro{max-width:38ch}
[data-zipp-parallax]{transform:translate3d(0,var(--zipp-parallax,0px),0)}
@media(max-width:700px){
  .zipp-backdrop::after{background:rgba(4,10,24,.53)}
  .zipp-poster{grid-template-columns:1fr;gap:40px;padding:48px 0}
  .zipp-poster figure{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .zipp-backdrop video{display:none}
  .zipp-backdrop-media,[data-zipp-parallax]{transform:none}
}

/* Reserve the hero image before decoding, including its centered grid row. */
.project-intro .hero img{width:100%;height:auto;aspect-ratio:1450/1800}