*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fafafa;color:#191919;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #555;outline-offset:6px}[hidden]{display:none!important}header{position:fixed;inset:0 0 auto;z-index:5;padding:31px 3.6%;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#fafafa 15%,#fafafa00)}.brand{font-size:29px;letter-spacing:5px;color:inherit;text-decoration:none;font-weight:300}nav{display:flex;gap:48px}nav button{font-size:15px;padding:12px 0}nav button:hover{opacity:.5}main{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;user-select:none}main.dragging{cursor:grabbing}canvas{display:block;width:100%;height:100%}#labels{position:absolute;inset:0;pointer-events:none}.house-label{position:absolute;pointer-events:auto;text-align:left;font-size:12px;line-height:1.45;border-left:1px solid #aaa;padding:0 0 56px 10px;white-space:nowrap;transform:translateY(-100%);transition:opacity .2s}.house-label strong{font-weight:400;display:block}.house-label span{display:block;color:#777}.house-label:after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#888;bottom:0;left:-2px}.house-label:hover strong,.house-label:focus-visible strong{font-weight:600}.house-label:hover{border-color:#555}footer{position:fixed;inset:auto 0 0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:26px 3.6%;pointer-events:none;background:linear-gradient(#fafafa00,#fafafa 90%)}footer>*{pointer-events:auto}.edition{font-size:8px;letter-spacing:1.7px;color:#888}.hint{font-size:9px;letter-spacing:3px;position:absolute;left:47%;transform:translateX(-50%);white-space:nowrap}.hint span{font-size:22px;margin-left:14px;vertical-align:middle}.controls{display:flex;align-items:center;gap:12px;font-size:13px}.controls button{width:39px;height:39px;border:1px solid #222;border-radius:50%;font-size:23px;transition:background .2s}.controls button:hover{background:#e9e9e9}.controls button:disabled{opacity:.25;cursor:default}#zoomIn,#zoomOut{width:28px;height:28px;font-size:17px;border-color:#bbb}.divider{width:8px}#counter{margin-left:16px}.controls i{width:20px;height:1px;background:#222}#back{position:fixed;left:3.6%;top:110px;z-index:5;font-size:12px}#focus{position:fixed;z-index:3;left:5%;bottom:17%;max-width:300px}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase}h1{font-size:36px;line-height:1.15;font-weight:400;letter-spacing:-1px;margin:17px 0 24px}#more{font-size:13px;padding:12px 0;border-bottom:1px solid #222;width:160px;text-align:left}#more span{float:right}dialog{border:0;background:#fafafa;color:#222;padding:0;max-width:100%;box-shadow:0 20px 100px #0002}dialog::backdrop{background:#f6f6f6df;backdrop-filter:blur(8px)}.close{position:absolute;right:23px;top:15px;font-size:30px;z-index:3}#detail{width:940px;max-height:90vh;padding:50px 65px;overflow:auto}.intro{font-size:12px;color:#888}.photo-slot{margin-top:30px;background:#efefed;height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#888}.photo-slot span{font-size:9px;letter-spacing:3px}.photo-slot p{font-size:17px;color:#555;margin:20px 0 10px}.photo-slot small{font-size:12px}.photo-meta{display:flex;gap:55px;font-size:13px;line-height:1.8;color:#777}.photo-meta p{flex:1}#info{width:540px;padding:65px;line-height:1.7}#infoText{font-size:15px;color:#777}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:700px){header{padding:25px 6%}.brand{font-size:20px;letter-spacing:3px}nav{gap:17px}nav button{font-size:12px}.house-label{font-size:10px;padding-bottom:40px;padding-left:6px}.edition{display:none}footer{padding:22px 6%}.hint{left:6%;transform:none;bottom:78px;font-size:8px;letter-spacing:1.5px}.hint span{display:none}.controls{margin-left:auto;gap:9px}.controls button{width:34px;height:34px;font-size:21px}#counter{margin-left:7px}#back{top:90px;left:6%}#focus{left:6%;bottom:18%;max-width:90%}h1{font-size:28px;margin:10px 0 16px}#detail{width:94vw;padding:40px 25px}.photo-slot{height:260px;text-align:center;padding:20px}.photo-meta{display:block}#info{width:92vw;padding:50px 30px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
.house-label{opacity:0;pointer-events:none;background:linear-gradient(90deg,#fafafae8,#fafafa00);padding-right:12px}.house-label.shown,.house-label:focus-visible{opacity:1;pointer-events:auto}.search-wrap{position:fixed;top:105px;left:3.6%;z-index:6;width:220px}.search-box{display:flex;align-items:center;gap:8px;background:#eeeeeb;border-radius:12px;padding:9px 13px;color:#777}.search-box span{font-size:24px;line-height:20px}.search-box input{border:0;background:none;outline:none;min-width:0;width:100%;font:inherit;font-size:12px;color:#333}.search-box:focus-within{outline:1px solid #aaa}#results{margin-top:7px;background:#fafafa;border:1px solid #e7e7e4;border-radius:10px;max-height:280px;overflow:auto;box-shadow:0 8px 30px #0000000c;padding:6px}#results button{display:block;text-align:left;padding:11px 8px;font-size:11px;line-height:1.5;width:100%;border-radius:4px}#results button:hover,#results button:focus{background:#ecece8}#results p{font-size:12px;color:#777;padding:9px}body:has(#focus:not([hidden])) .search-wrap{top:150px}@media(max-width:700px){.search-wrap{left:6%;top:83px;width:175px}.search-box{padding:7px 10px}.search-box input{font-size:11px}body:has(#focus:not([hidden])) .search-wrap{top:127px}}

.house-label{font-size:14px}.search-box input,#results button{font-size:14px}.edition{font-size:12px;letter-spacing:1px}.hint{font-size:12px;letter-spacing:2px}@media(max-width:700px){.house-label{font-size:14px}.search-box input{font-size:14px}.hint{font-size:12px}}

#focus{left:5%;top:25%;bottom:auto;max-width:290px;padding:20px 22px;background:#fafafae8}#focus .eyebrow{font-size:26px;letter-spacing:0;text-transform:none;margin:0}#focus h1{font-size:38px;margin:8px 0 14px}#area,#category{font-size:14px;line-height:1.5;color:#777}.project-story{margin-top:30px}.project-story h2{font-size:22px;line-height:1.2;letter-spacing:-.5px}.project-story p{font-size:17px;line-height:1.4;margin-bottom:24px}.project-story:has(p[hidden]){display:none}body:has(#focus:not([hidden])) .search-wrap{display:none}@media(max-width:700px){#focus{left:6%;top:auto;bottom:90px;max-width:88%;max-height:34vh;overflow:auto;padding:12px 16px}#focus .eyebrow{font-size:18px}#focus h1{font-size:26px}.project-story{margin-top:18px}.project-story p{font-size:16px}#area,#category{margin:5px 0}#more{padding:8px 0}}


#modelStatus{position:fixed;right:4%;bottom:90px;z-index:6;padding:10px 15px;background:#fafafae8;font-size:14px;max-width:280px}

/* Header matches the supplied Jou and Bou artwork. */
header{padding:36px 4.2%;height:112px}.brand{display:block;line-height:0}.brand img{display:block;width:226px;height:37px}nav{gap:clamp(28px,4.5vw,68px)}nav button{font-size:18px;color:#66685e;font-weight:400}nav button[aria-current]{font-weight:700;color:#191919}.explore-hint{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:16px;font-size:14px;color:#555;white-space:nowrap;pointer-events:none}.explore-hint span{font-size:26px;font-weight:300;line-height:1}.search-wrap{top:120px}#back{top:125px}
@media(max-width:700px){header{height:118px;padding:20px 6%;align-items:flex-start;flex-wrap:wrap;gap:14px}.brand img{width:170px;height:28px}nav{width:100%;justify-content:space-between;gap:12px}nav button{font-size:14px;padding:6px 0}.search-wrap{top:132px}#back{top:138px}.explore-hint{bottom:24px;font-size:14px}}

.project-page{position:fixed;inset:0;width:min(960px,90vw);max-width:960px;height:auto;max-height:88dvh;margin:auto;padding:0;overflow-y:auto;overscroll-behavior:contain;background:#fafafa;box-shadow:0 15px 80px #0002}.project-page article{padding:54px 30px 65px}.project-close{position:sticky;top:8px;float:right;margin:8px 10px -44px 0;right:auto;width:36px;height:36px;font-size:25px;background:#fafafaeF;z-index:2}.project-heading{text-align:center;margin:10px 0 58px}.project-page img{display:block;width:100%;height:auto}.project-heading .project-symbol{width:42px;height:29px;margin:0 auto 45px}.project-heading h1{font-size:32px;letter-spacing:-1px;font-weight:400;margin:0 0 10px}.project-heading p{font-size:14px;color:#66685e;margin:0}.project-intro{display:grid;grid-template-columns:1.08fr 1fr;gap:40px;align-items:center}.project-overview p{font-size:14px;line-height:1.6;margin:0;color:#191919}.project-overview .project-facts{color:#777;margin-bottom:34px;line-height:1.45}.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}.project-pair figure{margin:0}.project-pair figcaption{font-size:14px;line-height:1.6;color:#191919;margin:30px 8px 0}.terrace-pair{margin-top:38px}.interior-photo{margin-top:36px}.project-page::backdrop{background:#fafafa99;backdrop-filter:blur(3px)}
@media(max-width:700px){.project-page{width:92vw;max-height:90dvh}.project-page article{padding:34px 18px 40px}.project-heading{margin:5px 0 36px}.project-heading .project-symbol{margin-bottom:28px;width:34px;height:24px}.project-heading h1{font-size:28px}.project-intro{grid-template-columns:1fr;gap:24px}.project-overview .project-facts{margin-bottom:24px}.project-pair{gap:14px;margin-top:32px}.concept-pair{grid-template-columns:1fr;gap:30px}.project-pair figcaption{margin:18px 0 0}.interior-photo{margin-top:22px}.explore-hint{font-size:14px}}
/* JH30 — a fixed photographic stage and a flowing project story. */
.project-page{width:min(1280px,90vw);max-width:1280px;height:min(72dvh,740px);max-height:82dvh;overflow:hidden;border:0;border-radius:8px;background:#fafafa;padding:0;box-shadow:0 24px 100px #0002}
.project-page[open]{display:grid;grid-template-columns:58% 42%;animation:panel-arrive .55s cubic-bezier(.2,.7,.2,1)}
.project-page .project-close{position:absolute;right:12px;top:10px;float:none;margin:0;background:#fafafad9;z-index:5;font-size:28px;line-height:1}
.project-stage{position:relative;margin:32px 0 32px 32px;min-width:0;min-height:0;overflow:hidden;background:#f3f3f1}
.project-page .stage-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .65s ease,transform 1.2s ease;transform:scale(1)}
.project-page .stage-photo.active{opacity:1}.project-stage:hover .stage-photo.active{transform:scale(1.025)}
.project-page article.project-scroll{padding:60px clamp(28px,3.5vw,64px) 50px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d0d0cd transparent;outline-offset:-4px}
.project-heading{text-align:left;margin:0 0 36px}.project-heading .project-symbol{width:34px;height:24px;margin:0 0 24px}.project-heading h1{font-size:clamp(26px,2.3vw,34px);letter-spacing:-1px;margin:0 0 8px;font-weight:400}.project-heading p{font-size:13px;color:#777}
.project-scroll p{font-size:16px;line-height:1.7;margin:0 0 28px;color:#333}.project-scroll .project-facts{font-size:13px;line-height:1.65;color:#757575;margin-bottom:32px}.opening{padding-bottom:48px;min-height:70%}.story-section{margin:0 0 68px}.photo-story figure{margin:0;overflow:hidden}.photo-story figure img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.photo-story figure:hover img{transform:scale(1.03)}.rhythm-0 figure{width:83%;margin-left:auto}.rhythm-1 figure{width:72%;margin-right:auto}.rhythm-2 figure{width:100%}.concept-block{margin-top:64px}.concept-block p{margin-top:28px}.concept-block img+img{margin-top:24px}.reveal{opacity:1}.project-scroll.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.project-scroll.motion-ready .reveal.visible{opacity:1;transform:translateY(0)}
.project-page::backdrop{background:#fafafa9c;backdrop-filter:blur(5px)}
@keyframes panel-arrive{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:760px){.project-page{width:92vw;height:84dvh;max-height:84dvh}.project-page[open]{grid-template-columns:1fr;grid-template-rows:32% 68%}.project-stage{margin:16px 16px 0}.project-page article.project-scroll{padding:28px 24px 40px}.project-heading{margin-bottom:24px}.project-heading .project-symbol{margin-bottom:14px}.project-heading h1{font-size:28px}.opening{padding-bottom:10px;min-height:0}.story-section{margin-bottom:44px}.project-scroll p{font-size:16px}.project-page .project-close{top:5px;right:5px}}
@media(prefers-reduced-motion:reduce){.project-page[open]{animation:none}.project-page .stage-photo,.photo-story figure img,.project-scroll.motion-ready .reveal{transition:none;transform:none}.project-scroll.motion-ready .reveal{opacity:1}}
/* Full-panel film, then a compact editorial bento. */
.project-page[open]{display:block}.project-page article.project-scroll{height:100%;padding:0;overflow-y:auto}.project-page .project-close{background:#fafafae8;border-radius:50%}
.film-hero{position:relative;width:100%;height:100%;background:#151515;display:flex;align-items:center;justify-content:center}.film-hero video{width:100%;height:100%;object-fit:contain;display:block}.film-hero :is(#film-toggle,.film-toggle){position:absolute;bottom:20px;right:24px;background:#0005;border:1px solid #fff5;color:white;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}
.project-content{padding:64px clamp(24px,5vw,76px) 76px}.project-narrative{margin-bottom:64px}.project-narrative .project-heading{text-align:center;margin-bottom:40px}.project-narrative .project-symbol{margin:0 auto 22px}.narrative-columns{display:grid;grid-template-columns:1fr 1.65fr;gap:48px}.narrative-columns p{margin:0}.project-narrative .project-facts{margin:0}.bento-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.bento-card{margin:0;min-width:0;overflow:hidden}.bento-card.wide{grid-column:1/-1}.bento-card>img{width:100%;height:auto}.slide-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;aspect-ratio:3/4;background:#f0f0ee}.wide .slide-track{aspect-ratio:16/10}.slide-track::-webkit-scrollbar{display:none}.gallery-slide{flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start;overflow:hidden}.project-page .gallery-slide img{width:100%;height:100%;object-fit:contain;transition:transform .8s ease}.gallery-slide:hover img{transform:scale(1.025)}.slide-caption{display:flex;justify-content:space-between;align-items:center;padding:12px 0 16px;font-size:13px;color:#666}.slide-caption>div{display:flex;align-items:center;gap:12px}.slide-caption button{border:0;background:none;color:#333;cursor:pointer;width:30px;height:32px;font-size:18px}.slide-caption button:disabled{opacity:.25;cursor:default}.slide-count{font-size:12px;font-variant-numeric:tabular-nums}.design-studies{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px}.design-studies .concept-block{margin:0}.design-studies .concept-block:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px}.design-studies .concept-block img+img{margin:0}
@media(max-width:760px){.project-page[open]{display:block}.project-page article.project-scroll{padding:0}.project-content{padding:40px 20px}.narrative-columns{grid-template-columns:1fr;gap:26px}.project-narrative{margin-bottom:40px}.bento-grid{gap:14px}.slide-caption{align-items:flex-start;gap:4px;flex-direction:column}.slide-caption>div{gap:6px}.design-studies{grid-template-columns:1fr}.project-scroll p{font-size:16px}.film-hero{height:100%}.film-hero video{object-fit:contain}.project-heading h1{font-size:28px}}
/* Refined spacing and the supplied focus hierarchy. */
#back{font-size:14px}
.project-page{height:80dvh;max-height:900px;width:min(1280px,92vw)}.project-page article.project-scroll{padding:28px 0;scroll-padding-block:28px}.film-hero{height:calc(80dvh - 56px);max-height:844px;background:#fafafa;padding:12px 32px 24px}.film-hero video{background:#111}.film-hero :is(#film-toggle,.film-toggle){bottom:40px;right:48px}.project-content{padding:88px clamp(24px,5vw,76px) 110px}.project-narrative{margin-bottom:80px}.narrative-columns{gap:56px}.bento-grid{gap:40px 24px;align-items:start}.bento-card.wide>img{max-height:620px;object-fit:contain;background:#f2f2f0}.slide-track{aspect-ratio:3/4;min-height:0}.wide .slide-track{aspect-ratio:16/9}.slide-caption{padding:16px 0 0;min-height:52px;font-size:14px;color:#333;gap:12px}.slide-caption button{border:1px solid #dededb;border-radius:50%;width:34px;height:34px;font-size:16px}.slide-caption button:hover:not(:disabled){background:#eaeae7}.slide-caption>div{gap:10px}.slide-count{min-width:35px;text-align:center}.design-studies{margin-top:88px;gap:40px 24px}.gallery-slide:hover img{transform:none}.project-page .project-close{top:8px;right:8px}
@media(max-width:760px){.project-page{height:86dvh;max-height:86dvh}.project-page article.project-scroll{padding:24px 0}.film-hero{height:auto;min-height:0;aspect-ratio:16/10;padding:18px 16px 0}.film-hero :is(#film-toggle,.film-toggle){bottom:12px;right:26px}.project-content{padding:60px 22px 72px}.narrative-columns{gap:24px}.bento-grid{grid-template-columns:1fr;gap:32px}.bento-card.wide{grid-column:auto}.slide-track{aspect-ratio:4/5}.slide-caption{flex-direction:row;align-items:center}.design-studies{margin-top:60px}.project-narrative{margin-bottom:48px}}

/* Responsive neighborhood controls and comfortable touch layouts. */
#menu-toggle{display:none}.map-zoom{position:fixed;z-index:4;right:4.2%;bottom:25px;display:flex;gap:8px}.map-zoom button{width:44px;height:44px;border:1px solid #d3d3cf;border-radius:50%;background:#fafafae8;font-size:22px}.map-zoom button:hover{background:#eaeae6}
@media(max-width:700px){
 header{height:82px;padding:calc(14px + env(safe-area-inset-top)) 20px 10px;align-items:center;flex-wrap:nowrap;background:linear-gradient(#fafafa 70%,#fafafa00)}
 .brand img{width:160px;height:auto}#menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:10px}#menu-toggle span{height:1px;width:24px;background:#333}
 header nav{display:none;position:absolute;top:calc(76px + env(safe-area-inset-top));right:16px;width:180px;padding:12px;background:#fafafa;border:1px solid #e5e5e1;box-shadow:0 12px 36px #0001;border-radius:8px}header nav.menu-open{display:flex;flex-direction:column;gap:0}header nav button{text-align:left;min-height:44px;padding:10px 14px;font-size:16px}
 .search-wrap{top:calc(90px + env(safe-area-inset-top));left:20px;width:190px}.search-box{min-height:44px}.search-box input{font-size:16px}#results{max-height:45dvh}#results button{min-height:44px}
 #back{top:calc(91px + env(safe-area-inset-top));left:20px;min-height:44px;background:#fafafae6;padding:8px 12px;border-radius:6px}
 #focus{left:20px;right:20px;bottom:calc(82px + env(safe-area-inset-bottom));max-width:none;max-height:25dvh;padding:16px 18px;border-radius:8px;background:#fafafaf2}#focus .eyebrow{font-size:15px}#focus h1{font-size:25px;margin:5px 0 8px}#focus .project-story{display:none}#category{margin:4px 0}#more{min-height:44px;width:100%}
 .explore-hint{left:20px;transform:none;bottom:calc(28px + env(safe-area-inset-bottom));font-size:12px;gap:10px}.explore-hint span{font-size:23px}.map-zoom{right:20px;bottom:calc(18px + env(safe-area-inset-bottom))}
 .project-page{width:calc(100vw - 24px);height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:none;border-radius:10px}.project-page article.project-scroll{padding:44px 0 20px}.project-page .project-close{width:44px;height:44px;top:2px;right:2px}.film-hero{padding:0 12px;aspect-ratio:16/9}.project-content{padding:40px 20px 48px}.project-heading h1{font-size:28px}.bento-grid{grid-template-columns:1fr;gap:28px}.slide-caption button{width:44px;height:44px}.slide-caption{gap:8px}.slide-track{aspect-ratio:4/5}.wide .slide-track{aspect-ratio:4/3}.design-studies .concept-block:last-child{grid-template-columns:1fr}.project-scroll p{font-size:15px;line-height:1.75}
 #modelStatus{bottom:76px;right:20px;max-width:calc(100vw - 40px)}
}
@media(max-height:520px) and (orientation:landscape){#focus{top:125px;bottom:auto;max-width:230px;max-height:calc(100dvh - 195px)}header{height:74px;padding-block:16px}.search-wrap,#back{top:82px}.project-page{height:92dvh}.explore-hint{bottom:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}