/* Native sticky owns the pin and release, on the browser's scrolling thread. */
.intro-journey{position:relative;overflow-anchor:none}
.network-slot{height:0;pointer-events:none}
.network-entry{position:relative}
.immersion-ready .network-slot{height:var(--network-height,100svh)}
.immersion-ready .network-entry{position:absolute;inset:0;z-index:6;pointer-events:none}
.network-entry-active .network-proof{position:sticky;top:0;pointer-events:auto}
.network-entry-active:not(.network-entry-settled) .network-proof{will-change:clip-path}
.network-entry-active:not(.network-entry-settled) .network-proof-photo{transform:scale(var(--entry-scale,1));transform-origin:60% 52%;will-change:transform}
.network-entry-active:not(.network-entry-settled) .network-proof-copy,.network-entry-active:not(.network-entry-settled) .network-proof-caption{opacity:var(--entry-copy,1);transform:translateY(var(--entry-copy-y,0px))}
.network-entry-active:not(.network-entry-settled) .network-proof-shade{opacity:var(--entry-copy,1)}
.network-entry-active .network-proof[inert]{pointer-events:none}

/* Copy clears both rows of navigation; the caption always occupies its own space. */
.atelier .network-proof{min-height:100svh;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:36px;padding-top:calc(var(--header-height) + 32px);padding-bottom:32px}
.atelier .network-proof-copy{margin-block:auto;align-self:flex-start}
.atelier .network-proof-caption{position:static;inset:auto;flex:none;flex-wrap:wrap;gap:18px 30px}
@media(max-width:600px),(max-width:900px) and (orientation:portrait){
 .atelier .network-proof{padding-top:calc(var(--header-height) + 28px);padding-bottom:28px;gap:32px}
 .atelier .network-proof-caption{align-items:center;gap:18px}
 .atelier .network-proof-caption>span{max-width:none;flex-basis:100%}
 .atelier .network-proof-caption>a{min-height:44px;align-items:center}
 .atelier .network-proof-caption .replay{min-height:44px}
}

/* The poster stays visible through GPU warmup; it uses the same measured mobile slot. */
.atelier .intro .fallback-machine{object-fit:contain;object-position:center;pointer-events:none}
@media(max-width:600px),(max-width:900px) and (orientation:portrait){
 .atelier .intro .chapter-hero .hero-details{display:none}
 .atelier .intro .chapter-hero .hero-offer{margin-bottom:0}
 .atelier .intro .fallback-machine{left:var(--hero-machine-left,16vw);top:var(--hero-machine-top,51svh);width:var(--hero-machine-width,68vw);height:var(--hero-machine-height,30svh);right:auto;bottom:auto}
}

/* On a short phone, the whole machine sits beside the headline, above the actions. */
@media(max-width:600px) and (max-height:760px){
 .atelier .intro .chapter-hero .copy,.story-ready .atelier .intro .chapter-hero .copy{--hero-copy-top:138px;top:var(--hero-copy-top)}
 .atelier .intro .chapter-hero .eyebrow{margin-bottom:16px}
 .atelier .intro .chapter-hero h1{font-size:clamp(26px,7.65vw,42px);line-height:1.12;max-width:54%;margin-bottom:18px;letter-spacing:-.045em;text-wrap:initial}
 .atelier .intro .chapter-hero .hero-offer{font-size:14px;line-height:1.65;max-width:54%;font-weight:500}
 .atelier .intro .chapter-hero .hero-actions{position:absolute;top:calc(100svh - var(--hero-copy-top) - 167px);inset-inline:0;margin:0;gap:8px;flex-direction:row;flex-wrap:nowrap}
 .atelier .intro .chapter-hero .hero-actions .button{flex:1;min-width:0;min-height:48px;font-size:12px;padding:10px 8px}
 .atelier .intro .chapter-hero .story-skip{position:absolute;top:calc(100svh - var(--hero-copy-top) - 105px);left:0;margin:0;font-size:12px;line-height:1.65}
 .atelier .intro .fallback-machine{left:61%;top:190px;width:35%;height:calc(100svh - 373px)}
 .story-ready .atelier .intro .fallback-machine{left:var(--hero-machine-left);top:var(--hero-machine-top);width:var(--hero-machine-width);height:var(--hero-machine-height)}
}

@media(max-height:540px) and (min-width:601px){
 .atelier .intro .chapter-hero .copy,.story-ready .atelier .intro .chapter-hero .copy{top:145px}
 .atelier .intro .chapter-hero h1{font-size:38px;line-height:1.08;margin-bottom:12px}
 .atelier .intro .chapter-hero .eyebrow{margin-bottom:12px}
 .atelier .intro .chapter-hero .hero-details{display:none}
 .atelier .intro .chapter-hero .hero-actions{margin-top:14px}
 .atelier .intro .chapter-hero .story-skip{margin-top:12px}
}