@import url('./base.css');
/* R2: full-bleed overview → workbench macro → centered exhibit. */
html,body{background:#ffffff}
.header{background:linear-gradient(#000000e8,#00000060);border:0;backdrop-filter:blur(8px)}
.take{background:#ffffff;min-height:900px}
.take-one .media-pane{inset:0;width:100%;height:100%;max-width:none;right:0}
.take-one .media-pane img{object-position:50% 50%;object-fit:cover}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(0deg,#000000f5 0%,#00000088 27%,#00000000 65%),linear-gradient(90deg,#0000004d,transparent 65%)}
.scene-kicker{position:absolute;top:125px;left:var(--pad);font-size:10px;letter-spacing:.16em;z-index:5;color:#606068}
.take-one .take-copy{top:auto;bottom:110px;max-width:none;right:var(--pad)}
.take-one h1{font-size:clamp(58px,7vw,108px);font-weight:400;line-height:1.12;margin:24px 0 32px;letter-spacing:-.055em}
.take-one h1 span{display:inline-block}.hero-baseline{display:flex;align-items:center;gap:60px;justify-content:space-between;max-width:900px}
.hero-baseline .pill{margin:0}.take-one .eyebrow{color:#606068}.take-one .lede{color:#606068;max-width:none}
.take .pill{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:16px;font-weight:500;line-height:24px}
.motion-on .stage-index{bottom:45px;right:var(--pad)}.motion-on .scroll-note{bottom:40px}
.take-two{background:#f5f5f7}.take-two .scene-kicker{left:66%;color:#606068;top:145px}
.macro-main{position:absolute;left:0;top:0;width:59%;height:100%;overflow:hidden}
.macro-main img{width:100%;height:100%;object-fit:cover;object-position:40% 75%}
.macro-inset{position:absolute;left:46%;top:10%;width:18%;height:25%;padding:9px;background:#f5f5f7;z-index:2}
.macro-inset img{width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.take-two .take-copy{left:66%;right:4%;top:34%;max-width:none;color:#1d1d1f}
.take-two h2{font-size:clamp(40px,4.5vw,70px);letter-spacing:-.055em;margin:22px 0 30px}
.take-two .eyebrow{color:#606068}.take-two .lede{color:#606068;font-size:15px;line-height:1.9}
.take-two .pill{background:#ffffff;color:#606068;gap:20px}.take-two .pill>span{background:#f5f5f7;color:#1d1d1f}
.macro-caption{position:absolute;bottom:45px;left:25px;color:white;font-size:10px;letter-spacing:.1em;text-shadow:0 1px 5px #e5e5ea}
.take-three{background:#f5f5f7;color:#1d1d1f}
.take-three .scene-kicker{color:#606068}
.product-heading{position:absolute;top:15%;left:10%;right:10%;text-align:center;z-index:4}
.product-heading .eyebrow{color:#606068}.take-three .product-heading h2{font-size:clamp(36px,4.3vw,66px);font-weight:400;letter-spacing:-.05em;margin:18px 0 0}
.product-frame{position:absolute;top:30%;left:50%;transform:translateX(-50%);height:59%;width:30svh;max-width:36vw;overflow:hidden;background:#f5f5f7;z-index:2}
.product-frame img{width:100%;height:100%;object-fit:cover;object-position:83% 50%}
.product-rule{position:absolute;left:var(--pad);right:var(--pad);top:70%;height:1px;background:#00000066;z-index:0}
.take-three .take-copy{left:var(--pad);top:58%;max-width:28%;z-index:3}
.take-three .take-copy .eyebrow{color:#606068}.take-three .lede{font-size:15px;color:#606068}
.take-three .pill{background:#ffffff;color:#606068;gap:20px}.take-three .pill>span{background:#f5f5f7;color:#1d1d1f}
.photo-reference{position:absolute;right:var(--pad);top:52%;width:170px;max-width:20%;border:0;padding:0;background:none;color:#606068;z-index:5;text-align:left}
.photo-reference img{width:100%;aspect-ratio:1;object-fit:contain;background:#f5f5f7}.photo-reference span{font-size:11px;display:block;padding:15px 0;line-height:1.7}.photo-reference:hover span{text-decoration:underline}
.photo-viewer{width:min(94vw,900px);max-height:94svh;background:#f5f5f7;color:#1d1d1f;border:0;padding:20px}
.photo-viewer img{width:100%;height:70svh;object-fit:contain;margin:10px auto}.photo-viewer p{font-size:12px;line-height:1.8}.photo-close{display:block;margin-left:auto;min-height:44px;background:none;border:0;color:inherit}
.motion-on .take-two,.motion-on .take-three{clip-path:inset(0 0 0 100%);background:#f5f5f7}
.motion-on .take-three{background:#f5f5f7}
.motion-on .take-two .take-copy,.motion-on .take-three .take-copy{opacity:1}
.stage[data-act="2"] .stage-index,.stage[data-act="3"] .stage-index{color:#1d1d1f}
.stage[data-act="2"] .index-track,.stage[data-act="3"] .index-track{background:#00000044}
.stage[data-act="2"] .scroll-note,.stage[data-act="3"] .scroll-note{color:#606068}
.stage[data-act="3"] .scroll-note{display:none}
.stage[data-act="2"] .stage-index{right:18%}
@media(max-width:1100px) and (min-width:761px){.take-two .take-copy{left:64%;right:3%}.take-two .scene-kicker{left:64%;font-size:9px}.take-two h2{font-size:4.3vw}.take-three .take-copy{max-width:30%}.photo-reference{width:130px}.take .pill{gap:12px;font-size:14px;padding-left:18px}}
@media(max-width:760px){
 .header{height:72px}.take{min-height:820px}.motion-on .stage{height:100svh;min-height:0}.motion-on .cinema{height:340svh}
 .scene-kicker{top:94px;left:20px;font-size:9px}
 .take-one .media-pane{inset:0;width:100%;height:100%}.take-one .media-pane img{object-position:58% 50%}.take-one .media-pane::after{display:none}
 .hero-vignette{background:linear-gradient(0deg,#000000fa 0%,#000000aa 36%,#00000000 78%)}
 .take-one .take-copy{top:auto;bottom:120px;left:20px;right:20px;max-width:none}.take-one h1{font-size:clamp(38px,10.8vw,58px);margin:22px 0 26px}.take-one h1 span{display:block}
 .hero-baseline{display:block}.hero-baseline .pill{margin-top:22px}.take .pill{font-size:15px;line-height:22px;gap:22px}
 .take-one .lede{font-size:14px}.motion-on .stage-index{top:auto;bottom:80px;right:20px;background:none;padding:0}.motion-on .scroll-note{display:none}
 .macro-main{width:100%;height:51%;top:0}.macro-main img{object-position:42% 82%}
 .macro-inset{left:auto;right:18px;top:39%;width:27%;height:16%;padding:5px}
 .take-two .scene-kicker{left:20px;top:80px;color:#606068;background:#000000b0;padding:6px 8px}
 .take-two .take-copy{top:56%;left:20px;right:20px;max-width:none}.take-two h2{font-size:clamp(30px,8vw,44px);margin:15px 0 18px}.take-two h2 span{display:inline}.take-two .lede{font-size:14px}.take-two .pill{margin-top:20px}.macro-caption{display:none}
 .product-heading{top:16%;left:20px;right:20px}.take-three .scene-kicker{top:88px;font-size:8px}.take-three .product-heading h2{font-size:clamp(27px,7.8vw,38px);margin-top:12px}
 .product-frame{top:30%;height:39%;width:23svh;max-width:60%}.product-rule{top:61%;left:20px;right:20px}.take-three .take-copy{top:73%;left:20px;right:20px;max-width:none}.take-three .lede{font-size:13px}.take-three .take-copy .eyebrow{display:none}.take-three .pill{font-size:15px;margin-top:16px}
 .photo-reference{top:63%;right:20px;max-width:none;width:auto;min-height:44px}.photo-reference img{display:none}.photo-reference span{padding:10px 0;font-size:11px}
 .stage[data-act="2"] .stage-index{right:20px}.stage[data-act="3"] .stage-index{display:none}
 .photo-viewer img{height:62svh}.take-three .pill{gap:20px}.product-heading .eyebrow{font-size:9px}
}
@media(max-height:740px) and (min-width:761px){.take-one h1{font-size:clamp(48px,6vw,78px)}.take-one .take-copy{bottom:95px}.take-two h2{font-size:48px}.take-three .product-heading h2{font-size:45px}.take-three .scene-kicker,.take-two .scene-kicker{top:110px}}
/* Visual review 1: contain each shot's paint order, restore image aspect ratio. */
.take{isolation:isolate}.motion-on .take-one{z-index:1}.motion-on .take-two{z-index:2}.motion-on .take-three{z-index:3}
.photo-reference img{height:auto}.product-frame img{object-position:100% 50%}
.header{backdrop-filter:none;background:linear-gradient(#000000ed,#00000088)}
/* Visual review 2: keep progress and source-view controls clear of primary content. */
.motion-on .stage-index{right:185px}
@media(max-width:760px){.product-frame{width:20svh}.photo-reference{top:69%}.motion-on .stage-index{right:20px}}