/* Front-page zoom (full-bleed, scroll-driven). Ink on cream, teal accent. */
.zl{position:relative;height:440vh;background:#F4EBDD;color:#1E1A2B}
.zl-sticky{position:sticky;top:0;height:100vh;height:100svh;padding-top:64px;box-sizing:border-box;display:flex;flex-direction:column}
.zl-frame{position:relative;flex:1;width:100%;overflow:hidden;background:#F4EBDD;contain:paint}
.zl-layer{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:0 0;will-change:transform,opacity;user-select:none;-webkit-user-drag:none}
/* Feathered edges on the inner scenes, so each melts into the wider one. */
.zl-layer:not(:last-child){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(0deg,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(0deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
/* Captions printed on the picture, over a soft paper fade. */
.zl-caps{position:absolute;left:0;right:0;bottom:0;z-index:10;padding:clamp(40px,8vh,90px) clamp(16px,4vw,48px) clamp(26px,5vh,46px);background:linear-gradient(to top,rgba(244,235,221,.96) 35%,rgba(244,235,221,0));pointer-events:none;min-height:5.5em}
.zl-cap{position:absolute;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:clamp(26px,5vh,46px);margin:0;text-align:center;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(1.25rem,3vw,2.4rem);line-height:1.15;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.zl-cap.on{opacity:1;transform:none}
.zl-cap b{font-style:normal;font-weight:900;color:#1D7F74}
.zl-progress{position:absolute;left:0;right:0;bottom:0;z-index:11;height:4px;background:rgba(30,26,43,.12)}
.zl-progress span{display:block;height:100%;background:#2BB3A3;transform-origin:0 50%;transform:scaleX(0)}
.zl-hint{position:absolute;right:clamp(16px,4vw,48px);top:calc(64px + 18px);z-index:11;font:700 .7rem 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;background:#F4EBDD;border:1px solid #1E1A2B;padding:6px 10px;transition:opacity .3s}
.zl-done .zl-hint{opacity:0}
/* Motion off: no pinning, just the globe and the last caption. */
.zl-static{height:auto}
.zl-static .zl-sticky{position:relative;height:auto}
.zl-static .zl-frame{flex:none;aspect-ratio:1376/768}
.zl-static .zl-layer{display:none}
.zl-static .zl-layer:last-child{display:block;transform:none!important;opacity:1!important;visibility:visible!important}
.zl-static .zl-cap{opacity:0}.zl-static .zl-cap:last-child{opacity:1;transform:none}
.zl-static .zl-hint,.zl-static .zl-progress{display:none}
@media (max-width:700px){
  .zl{height:360vh}
  .zl-sticky{padding-top:58px}
  .zl-hint{top:calc(58px + 12px)}
}