/* scroll-explode: the pinned scroll take-apart (shared part, Manager 3, 2026-10-27). Used for the Miss Saigon pho and the Marlin roof.
   Nabil: "as I'm scrolling... I already scrolled past it"; "people need to be able to see it".
   The section is a track. Its stage sticks under the header for the pin (1.5 screens or less) with native scroll only, so the piece
   (bowl, roof) stays whole on screen while the scroll drives its frames from assembled to apart. Apart by 75% of the pin, held for
   the rest, then the page moves on. Every class starts with sx-. Inputs (set them on .sx or any parent):
   --sx-top / --sx-bottom: the sticky header and the phone bottom bar (sx.js measures them from data-sx-head / data-sx-foot);
   --sx-pin: pin length in screens (default 1.2, capped at 1.5); --sx-fw / --sx-fh: the frame size, e.g. 640 and 854;
   --sx-reserve: height the caption and the progress line take (sx.js measures it); --sx-bw-max: widest the piece gets;
   --sx-share: most of the row the piece takes beside its caption (default 62%). Frames with transparency are fine (the canvas clears). */
.sx{--sx-room:calc(100vh - var(--sx-top,0px) - var(--sx-bottom,0px));--sx-pad:clamp(12px,2.4vh,28px);--sx-gut:clamp(16px,4vw,56px);
  --sx-bw:min(var(--sx-bw-max,560px),calc((var(--sx-room) - 2 * var(--sx-pad) - var(--sx-reserve,0px)) * var(--sx-fw,4) / var(--sx-fh,3)));
  position:relative}
@supports (height:100svh){.sx{--sx-room:calc(100svh - var(--sx-top,0px) - var(--sx-bottom,0px))}}

/* the pin: only with JavaScript (html.js is set in the page head, or sx.js adds .sx-on) and without reduced motion */
html.js .sx,.sx.sx-on{height:calc(var(--sx-room) + min(var(--sx-pin,1.2),1.5) * 100vh)}
@supports (height:100svh){html.js .sx,.sx.sx-on{height:calc(var(--sx-room) + min(var(--sx-pin,1.2),1.5) * 100svh)}}
html.js .sx-stage,.sx.sx-on .sx-stage{position:sticky;top:var(--sx-top,0px);height:var(--sx-room)}
.sx-stage{box-sizing:border-box;padding:var(--sx-pad) 0;display:grid;align-content:center}

/* the piece and its caption: side by side on wide screens, stacked on phones (sites restyle freely) */
.sx-piece{box-sizing:border-box;width:100%;max-width:var(--sx-max,1180px);margin:0 auto;padding:0 var(--sx-gut);display:grid;
  grid-template-columns:min(var(--sx-bw),var(--sx-share,62%)) minmax(0,1fr);column-gap:var(--sx-gap,clamp(24px,4vw,64px));align-items:center}
.sx-fig{margin:0;width:100%}
.sx-box{position:relative;width:100%;aspect-ratio:var(--sx-fw,4)/var(--sx-fh,3);overflow:hidden;border-radius:var(--sx-radius,6px)}
.sx-box img,.sx-box canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.sx-cv{opacity:0}
.sx-ready .sx-cv{opacity:1}
.sx-ready .sx-img{opacity:0}
.sx-cap{min-width:0}

/* the thin progress line under the piece: it fills as the piece comes apart (sx.js sets --sx-p from 0 to 1) */
.sx-bar{display:block;height:3px;margin-top:12px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,currentColor 18%,transparent)}
.sx-bar i{display:block;height:100%;background:var(--sx-accent,currentColor);transform-origin:0 50%;transform:scaleX(var(--sx-p,0))}

/* parts light up as the progress passes their data-at */
.sx-parts{list-style:none;margin:0;padding:0}
.sx-parts li{opacity:.42;transition:opacity .3s ease}
.sx-parts li.on{opacity:1}

@media (max-width:759px){
  .sx-piece{grid-template-columns:minmax(0,1fr);row-gap:14px;justify-items:center}
  .sx-fig{width:min(100%,var(--sx-bw))}
  .sx-cap{width:100%}
}

/* the piece does not fit this screen (a short landscape phone): sx.js turns the pin off and scrubs as it passes, nothing is cut */
html.js .sx.sx-nopin,.sx.sx-nopin{height:auto}
html.js .sx.sx-nopin .sx-stage,.sx.sx-nopin .sx-stage{position:relative;top:auto;height:auto}

/* reduced motion, no JavaScript, or a browser without canvas: the finished frame as a still, every part listed, no pin */
@media (prefers-reduced-motion:reduce){
  html.js .sx,.sx.sx-on{height:auto}
  html.js .sx-stage,.sx.sx-on .sx-stage{position:relative;top:auto;height:auto}
  .sx-cv{display:none}
  .sx-parts li{opacity:1;transition:none}
  .sx-bar i{transform:none}
}
html.js .sx.sx-still{height:auto}
html.js .sx.sx-still .sx-stage{position:relative;top:auto;height:auto}
.sx-still .sx-cv{display:none}
.sx-still .sx-parts li,html:not(.js) .sx-parts li{opacity:1}
.sx-still .sx-bar i,html:not(.js) .sx-bar i{transform:none}

/* r38: reliable entrances. A hidden canvas always has a visible still. */
.sx-still.sx-ready .sx-img{opacity:1!important}
@media(prefers-reduced-motion:reduce){.sx-ready .sx-img{opacity:1!important}}

/* r41: scoped phone spacing, visible order choices and header directions. */
#head .nav-directions{position:relative;flex:none;order:1}
#head .nav-directions>summary{display:flex;align-items:center;justify-content:center;gap:7px;min-width:48px;min-height:48px;padding:0 10px;list-style:none;cursor:pointer;color:var(--accent-bright);font:600 14px/1.2 var(--body)}
#head .nav-directions>summary::-webkit-details-marker{display:none}
#head .nav-directions svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#head .directions-options{position:absolute;z-index:100;right:0;top:calc(100% + 6px);width:200px;max-width:calc(100vw - 36px);padding:6px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 32px #0005}
#head .directions-options a{display:flex;align-items:center;min-height:48px;padding:0 14px;color:inherit;text-decoration:none;font:600 15px/1.3 var(--body)}
#head .directions-options a:hover,#head .directions-options a:focus-visible{background:var(--accent);color:var(--accent-on)}
#head .nav-directions>summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
#head .head-cta .nav-phone{width:48px;height:48px;flex-basis:48px;order:0}
#head .head-cta .burger{order:2}
body .vz3-also>a.btn{display:inline-flex;flex:0 0 124px;justify-content:center;box-sizing:border-box;width:124px;min-height:48px;height:48px;padding:0 12px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font:700 15px/1.2 var(--body)}
body .vz3-also>a.btn:hover{background:rgba(255,255,255,.08)}
.pxh .pxh-in .r41-menu-order{position:static;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,420px);margin:20px auto 0}
.pxh .r41-menu-order .vz3-act{display:flex;justify-content:center;gap:12px;width:100%;margin:0}
.pxh .r41-menu-order .vz3-act>a.btn{flex:1 1 0;width:auto;min-height:48px;padding:0 12px}
.pxh .r41-menu-order .vz3-also{justify-content:center;gap:10px 12px;width:100%;margin:0}
@media(max-width:899px){
 #head .wrap{gap:12px}
 #head .head-cta{gap:4px}
 #head .nav-directions>summary{padding:0;width:48px}
 #head .nav-directions>summary span{display:none}
 html.js body .pho-sec.sx-on:not(.sx-nopin) .sx-stage{grid-template-rows:auto;align-content:start;padding-top:28px}
 html.js body .pho-sec.sx-on:not(.sx-nopin) .sx-stage>.pxb{grid-row:1}
 body .pho-after .pho-tk{width:100%;margin-inline:0;transform:none}
 body .story-beat .st3{padding-top:116px}
 body .story-beat .st3-ground picture{overflow:hidden}
 body .story-beat .st3-ground img{height:calc(100% + 96px);transform:translateY(-96px);object-position:50% 75%}
 body .story-beat .st3-ground .st3-cap{top:10px;max-width:calc(100% - 2 * var(--g));font-size:12px;line-height:1.45}
}
@media(max-width:430px){
 body .vz3-also .vz3-lbl{flex-basis:100%;text-align:center}
 body .vz3-also{justify-content:center}
}