.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:11px/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:11px/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-placeholder > 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:11px/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; }
/* Solid, so the room's lines behind a frame do not show through it. */
.walk-panel { background:#ffffff; 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:11px/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; }

/* 16:9 picture windows (room for screen recordings later): the frames are
   612px tall (410px on phones) so the window below the title, 145px down and
   70px up from the bottom, comes out at 16:9. */
.walk-panel { height:612px; }
@media(max-width:700px) { .walk-panel { height:410px; } }
.walk-static .walk-panel { height:auto; padding-bottom:70px; }
.walk-static .walk-placeholder { position:relative; inset:auto; width:100%; aspect-ratio:16/9; margin-top:8px; }

/* Videos sit in the window exactly like the stills. */
.walk-placeholder video,.walk-zoom-box > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Website frames: the 16:9 window stays fixed at the top when the frame grows,
   and the description appears underneath it. */
.walk-web { container-type:inline-size; }
.walk-web .walk-placeholder { bottom:auto; aspect-ratio:16/9; }
.walk-desc { position:absolute; left:28px; right:28px; top:calc(145px + 56.25cqw + 26px); bottom:64px; overflow:hidden; opacity:clamp(0, calc(var(--grow, 0) * 3 - 2), 1); pointer-events:none; }
.walk-desc p { margin:0; max-width:none; font:450 19px/1.5 "SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:-.01em; }
@media(max-width:700px) { .walk-desc { left:22px; right:22px; } .walk-desc p { font-size:16px; } }
.walk-static .walk-desc { position:relative; inset:auto; left:auto; right:auto; opacity:1; margin-top:18px; }
/* Frames show their pictures in their original colour. */
.walk-placeholder > img,.walk-placeholder > video{filter:none!important}
/* Picture windows at a laptop screen's shape (1512:945, 16:10) so website
   screenshots fit whole, logo row and all: frames 656px tall (430px on phones). */
.walk-panel { height:656px; }
@media(max-width:700px) { .walk-panel { height:430px; } }
.walk-static .walk-placeholder, .walk-web .walk-placeholder { aspect-ratio:1512/945; }
.walk-desc { top:calc(145px + 62.5cqw + 26px); }
.walk-web .walk-placeholder > img { object-position:50% 0; }
/* Wider frames (Sept 29): 920px across, with the same 48px white edge on the
   left, right and bottom of the picture; the footer sits in the bottom edge. */
@media(min-width:701px){
 .walk-panel { width:920px; height:708px; padding:28px 48px; }
 .walk-placeholder { inset:145px 48px 48px; }
 .walk-panel footer { left:48px; right:48px; bottom:15px; }
 .walk-desc { left:48px; right:48px; top:calc(145px + (100cqw - 96px) * .625 + 26px); }
}
/* Shorter frames (Sept 29): no small label above the number and no footer
   line; just the number, the name and the picture, with an even 40px edge. */
.walk-panel header small, .walk-panel > footer { display:none; }
@media(min-width:701px){
 .walk-panel { height:685px; padding:22px 40px; }
 .walk-panel h2 { margin:0; }
 .walk-panel header { align-items:flex-end; }
 a.walk-panel h3 { margin-bottom:6px; }
 .walk-placeholder { inset:120px 40px 40px; }
 .walk-desc { left:40px; right:40px; top:calc(120px + (100cqw - 80px) * .625 + 26px); }
}
/* Description under a website frame (Oct 1 fix). 100cqw is the frame's width
   inside its padding, which on desktop is already the picture's width (both
   40px in from each side), so the text starts 26px below the picture instead
   of 50px up inside it. On phones the picture is 6px narrower on each side. */
.walk-desc { top:calc(145px + (100cqw - 12px) * .625 + 26px); }
@media(min-width:701px){ .walk-desc { top:calc(120px + 100cqw * .625 + 26px); } }
/* A short line under the picture of a grown frame (Oct 1), e.g. an award:
   the bottom edge opens a little and the line fades in as the frame grows. */
.walk-panel .walk-note { position:absolute; left:28px; right:28px; bottom:22px; margin:0; font:450 15px/1.35 "SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:-.01em; color:#180400; opacity:clamp(0, calc(var(--grow, 0) * 3 - 2), 1); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:none; }
.walk-panel .walk-note b { font-weight:600; }
@media(min-width:701px){
 .walk-panel.has-note .walk-placeholder { bottom:calc(40px + var(--grow, 0) * 36px); }
 .walk-panel .walk-note { left:40px; right:40px; bottom:calc(8px + var(--grow, 0) * 10px); font-size:19px; }
}
/* Short introduction (Oct 1): who I am and what I do now, right under the
   ARCH / PD / PM row, before the WORK walk. */
.home-intro { position:relative; z-index:2; box-sizing:border-box; padding:13.4svh var(--pad,24px) 0; background:#f5f5f7; text-align:center; color:#1d1d1f; }
/* Oct 17 (Alobi): the space above Hello. (from the ARCH / PRODUCTS / PROJECTS row) and the space below the links
   (to the WORK door's lintel) are the same, about a fifth of the screen height: the door sits 17svh into the walk,
   so 3svh of padding below makes 20svh, and the row ends ~9svh - 21px above the intro, so 11svh + 13px on top. */
.home-intro { --hello:clamp(34px,3.3vw,54px); padding-top:max(32px, calc(11svh + 13px)); padding-bottom:3svh; }
.home-intro-hello { margin:0 0 calc(var(--hello) * .3); font:600 var(--hello)/1 "SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:-.045em; color:#1d1d1f; }
.home-intro-lede { max-width:44rem; margin:0 auto; font:450 clamp(16px,1.35vw,21px)/1.45 "SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:-.015em; color:#48484a; text-wrap:balance; }
.home-intro-lede a { white-space:nowrap; color:#1d1d1f; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-skip-ink:auto; transition:opacity .2s ease; }
.home-intro-lede a:hover { opacity:.55; }
.home-intro-lede b { font-weight:600; color:#1d1d1f; }
.home-intro-now { list-style:none; margin:18px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 28px; font:400 13px/1.4 "SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif; color:#6e6e73; }
.home-intro-now span { color:#1d1d1f; font-weight:500; margin-right:4px; }
.home-intro-links { display:flex; justify-content:center; gap:22px; margin:18px 0 0; font:500 11px/1 "DM Mono",ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.home-intro-links a { color:#1d1d1f; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px; }
.home-intro-links a:hover { opacity:.55; }
@media(max-width:700px){ .home-intro { --hello:34px; padding:max(28px, calc(11.3svh - var(--hello) * 1.3)) 20px 0; } .home-intro-lede { font-size:15px; } .home-intro-now { flex-direction:column; gap:4px; font-size:12px; } .home-intro-links { gap:16px; } }
/* The intro is simply there: no cover wiping up as it scrolls in. */
.home-intro.fx-section::after { display:none !important; }

/* The back wall of the WORK room: big outlined lettering and the small kind
   notes beside each frame (walk-gallery.js). */
.walk-wall-word{position:absolute;top:0;left:0;z-index:1;transform-origin:0 0;white-space:nowrap;pointer-events:none;font:800 100px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:.03em;color:transparent;-webkit-text-stroke:2px rgba(24,4,0,.34)}
.walk-kind{position:absolute;top:0;left:0;z-index:2;transform-origin:0 0;display:flex;gap:14px;align-items:baseline;white-space:nowrap;pointer-events:none;font:500 26px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#180400}
.walk-kind b{font-weight:500;color:rgba(24,4,0,.45)}
.walk-static .walk-wall-word,.walk-static .walk-kind{display:none}
/* The corner labels (SPACE / STUDY 01, SCROLL TO WALK) and the frame count are off. */
.walk-gallery .walk-label,.walk-gallery .walk-caption{display:none!important}

/* Oct 5: OpenGym in the room: its screens cycle, and on hover a note says the
   redesign is in progress. The frame is not a link. */
.walk-panel.is-wip{cursor:default}
.walk-panel.is-wip .walk-placeholder > img{opacity:0;transition:opacity .8s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.walk-panel.is-wip .walk-placeholder > img.is-shown{opacity:1}
.walk-wip{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(245,245,247,.42);opacity:0;transition:opacity .35s ease;pointer-events:none}
.walk-wip .walk-wip-label{padding:12px 18px;border:1px solid #1d1d1f;background:#f5f5f7;color:#1d1d1f;font:500 12px/1 DM Mono,ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.walk-panel.is-wip:hover .walk-wip{opacity:1}
/* Oct 6: Call of the Sea shows its cover; on hover the same in-progress tag as OpenGym. */
.walk-panel.has-tag:hover .walk-wip,.walk-panel.has-tag:focus-visible .walk-wip{opacity:1}
/* Oct 6: in-progress frames (not links) lay out their name exactly like the
   linked frames: number on the left, name top right. */
div.walk-panel.is-wip { display:block; color:#180400; }
div.walk-panel.is-wip header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
div.walk-panel.is-wip 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; }
@media(max-width:700px) { div.walk-panel.is-wip h3 { font-size:22px; margin-bottom:18px; } }
@media(min-width:701px) { div.walk-panel.is-wip h3 { margin-bottom:6px; } }


/* Oct 19: no small "01 PRODUCT" wall labels beside the frames; each frame already shows its number and field. */
.walk-kind{display:none!important}