.walk-gallery { height:745svh; position:relative; background:#f5f5f7; color:#180400; }
.walk-stage { position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; }
.walk-portal { position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none; }
.walk-world { transform-origin:50% 50%; }
/* Share the final WORK viewport with the first ME room viewport: after the
   quarter turn the walk's room is the ME room, which takes over at the same
   scroll position without a duplicate screen. */
@media(prefers-reduced-motion:no-preference) {
 .walk-gallery + .about-journey { margin-top:-100svh; position:relative; background:transparent!important; }
 .walk-gallery + .about-journey .me-room { background:transparent; }
 /* The reading strip starts rising while the room is finishing its turn. */
 .walk-gallery + .about-journey .me-room > .me-story { margin-top:65svh; }
 .walk-gallery + .about-journey:after { display:none!important; }
 .walk-gallery + .about-journey > .about-light-flow { background:transparent!important; }
}
.walk-space,.walk-world { position:absolute; inset:0; width:100%; height:100%; }
.walk-space { pointer-events:none; }
.walk-label { position:absolute; z-index:4; top:30px; left:5%; right:5%; display:flex; justify-content:space-between; font:10px/1.5 'DM Mono',monospace; letter-spacing:.07em; pointer-events:none; }
.walk-panel { position:absolute; top:0; left:0; width:760px; height:510px; background:#f5f5f7; border:1px solid #1d1d1f; transform-origin:0 0; box-sizing:border-box; padding:28px; overflow:hidden; }
.walk-panel:before,.walk-panel:after { content:''; position:absolute; width:14px; height:14px; border-color:#1d1d1f; }
.walk-panel:before { top:8px;left:8px;border-top:1px solid;border-left:1px solid; }
.walk-panel:after { bottom:8px;right:8px;border-bottom:1px solid;border-right:1px solid; }
.walk-panel header { position:relative; z-index:1; width:62%; }
.walk-panel small { font:10px/1.4 'DM Mono',monospace; letter-spacing:.08em; }
.walk-panel h2 { margin:45px 0 20px; font:750 88px/.88 Arial,Helvetica,sans-serif; letter-spacing:-.07em; }
.walk-panel p { font-size:17px; line-height:1.4; max-width:320px; }
.walk-panel img { position:absolute; width:35%; height:76%; top:12%; right:28px; object-fit:cover; filter:grayscale(1); }
.walk-panel .walk-seal { object-fit:contain; mix-blend-mode:multiply; }
.walk-panel footer { position:absolute; bottom:25px; left:28px; right:28px; display:flex; justify-content:space-between; font:10px/1.5 'DM Mono',monospace; }
.walk-panel a { color:inherit; text-decoration:none; border-bottom:1px solid; padding-bottom:3px; }
.walk-panel a:focus-visible { outline:2px solid;outline-offset:5px; }
.walk-panel.walk-image header { width:100%; }
.walk-panel.walk-image h2 { font-size:68px; margin:15px 0; }
.walk-panel.walk-image img { top:150px; left:28px; right:28px; width:calc(100% - 56px); height:285px; }
.walk-panel.walk-image p { display:none; }
.walk-person-diagram { position:absolute; right:36px; top:120px; width:210px; height:250px; border:1px solid; }
.walk-person-diagram i { display:block; width:65px;height:65px;border:1px solid;border-radius:50%;margin:30px auto; }
.walk-person-diagram b { display:block;width:130px;height:100px;border:1px solid;border-radius:70px 70px 0 0;margin:auto; }
.walk-person-diagram span { display:block;font:9px monospace;text-align:center;margin-top:30px; }
.walk-numbers { position:absolute; right:35px;top:100px; width:200px;border-top:1px solid; }
.walk-numbers strong { display:block;font:750 80px/1.2 Arial;letter-spacing:-.07em;margin-top:20px; }
.walk-numbers span { font:11px monospace; }
.walk-caption { position:absolute; left:5%;right:5%;bottom:35px;display:flex;justify-content:space-between;align-items:end;pointer-events:none; }
.walk-count { font:12px monospace; }
.walk-caption p { margin:0;font-size:14px; }
.walk-progress { position:absolute; bottom:20px;left:5%;right:5%;height:1px;background:#bbb; }
.walk-progress i { display:block;height:1px;background:#1d1d1f;transform:scaleX(var(--walk-progress,0));transform-origin:left; }
.walk-panel { background:transparent; border:.75px solid #180400; }
.walk-panel header { width:100%; }
.walk-panel h2 { font-size:100px; margin:18px 0; }
.walk-placeholder { position:absolute; inset:145px 28px 70px; border:.75px solid #180400; background:#f5f5f7; }
.walk-placeholder i,.walk-placeholder b { position:absolute; left:50%; top:50%; width:28px; height:1px; background:#969699; transform:translate(-50%,-50%); }
.walk-placeholder b { transform:translate(-50%,-50%) rotate(90deg); }
.walk-panel:before,.walk-panel:after { display:none; }
@media(max-width:700px) { .walk-stage {top:0;height:100svh} .walk-label {font-size:8px;top:22px} .walk-caption p {max-width:220px;text-align:right;font-size:11px}
 .walk-panel{width:400px;height:570px;padding:22px}.walk-panel header{width:100%}.walk-panel h2{font-size:62px;margin:25px 0 18px}.walk-panel p{font-size:19px;max-width:340px}.walk-panel img{top:315px;right:22px;width:42%;height:180px}.walk-panel footer{left:22px;right:22px;font-size:9px}.walk-panel.walk-image h2{font-size:40px;margin-top:30px}.walk-panel.walk-image img{top:155px;left:22px;width:calc(100% - 44px);height:335px}.walk-person-diagram{top:300px;right:22px;width:150px;height:180px}.walk-person-diagram i{width:42px;height:42px;margin:18px auto}.walk-person-diagram b{width:95px;height:70px}.walk-person-diagram span{margin-top:15px}.walk-numbers{top:340px;left:22px;width:calc(100% - 44px);display:grid;grid-template-columns:1fr 1fr;align-items:center}.walk-numbers strong{font-size:50px;margin-top:6px}.walk-numbers span{font-size:10px}
}
.walk-gallery.walk-static { height:auto; }
.walk-static .walk-stage { position:relative;top:0;height:auto;overflow:visible;padding:80px 5%; }
.walk-static .walk-space,.walk-static .walk-caption,.walk-static .walk-progress {display:none}
.walk-static .walk-portal {display:none}
.walk-static .walk-world {transform:none!important;opacity:1!important}
.walk-static .walk-world {position:relative;height:auto;display:grid;gap:40px}
.walk-static .walk-panel {position:relative;width:100%;height:510px;transform:none!important;opacity:1!important;visibility:visible!important}
@media(max-width:700px) { .walk-static .walk-panel {height:620px;padding:20px} .walk-static .walk-panel h2{font-size:58px;margin-top:20px}.walk-static .walk-panel header{width:100%}.walk-static .walk-panel img{top:300px;height:240px;width:55%;right:20px}.walk-static .walk-panel.walk-image img{top:200px;left:20px;width:calc(100% - 40px);height:330px}.walk-static .walk-person-diagram{top:290px;height:230px}.walk-static .walk-numbers{top:310px;width:90%;left:20px;display:flex;gap:20px;align-items:center}.walk-static .walk-numbers strong{font-size:50px}.walk-static .walk-panel footer{left:20px;right:20px;font-size:8px} }

/* Project frames: each frame is a link to one architecture project. */
a.walk-panel { display:block; color:#180400; text-decoration:none; cursor:pointer; }
a.walk-panel header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
a.walk-panel h3 { margin:0 0 26px; max-width:55%; font:650 30px/1.02 "SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:-.035em; text-align:right; }
.walk-placeholder { overflow:hidden; }
.walk-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
a.walk-panel:hover .walk-placeholder img,a.walk-panel:focus-visible .walk-placeholder img { transform:scale(1.035); filter:none; }
.walk-placeholder img { transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease; }
a.walk-panel footer span:last-child { transition:transform .35s cubic-bezier(.16,1,.3,1); }
a.walk-panel:hover footer span:last-child,a.walk-panel:focus-visible footer span:last-child { transform:translateX(-6px); }
a.walk-panel:focus-visible { outline:2px solid #180400; outline-offset:6px; }
.walk-progress-cover { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px 20px; background:#180400; color:#f5f5f7; font:10px/1.4 'DM Mono',monospace; letter-spacing:.08em; }
.walk-progress-cover strong { font:900 64px/.94 Impact,'Arial Narrow',sans-serif; letter-spacing:0; text-shadow:none; }
.walk-progress-cover em { font-style:normal; align-self:flex-end; }
@media(max-width:700px) { a.walk-panel h3 { font-size:22px; margin-bottom:18px; } .walk-progress-cover strong { font-size:48px; } }
/* Zoom from a frame into its project (walk-gallery.js openProject). */
.walk-zoom { position:fixed; inset:0; z-index:2147482000; pointer-events:none; }
.walk-zoom-veil { position:fixed; inset:0; background:#f5f5f7; opacity:0; }
.walk-zoom-box { position:fixed; overflow:hidden; background:#f5f5f7; box-shadow:0 0 0 .75px #180400; will-change:left,top,width,height; }
.walk-zoom-box > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; }
.walk-zoom-box > .walk-progress-cover { position:absolute; inset:0; }