:root{--bg:#fff;--ink:#222;--cap:#666;--active:#1a4bff;--hov:#003153;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Montserrat","Proxima Nova",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:.8rem}
a,button{color:inherit}:focus-visible{outline:2px solid var(--active);outline-offset:3px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 2rem;padding:1.5rem clamp(1rem,3vw,3.4rem) 1.2rem}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:11;background:var(--bg)}
.logo{height:36px;width:auto;margin:0;display:block}
nav{display:flex;gap:clamp(1.2rem,3vw,3.2rem)}nav a{text-decoration:none;font:inherit;padding:.2rem 0}
.nv{position:absolute;top:1.1rem;right:clamp(1rem,3vw,3.4rem)}
@media (max-width:760px){.nv{position:static;order:-1;flex-basis:100%}}

.f{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hh,80px));z-index:5;background:var(--bg);display:flex;flex-wrap:wrap;gap:.8rem 2rem;padding:1.1rem max(clamp(1rem,3vw,3.4rem),calc(100% - 36rem)) 1.1rem clamp(1rem,3vw,3.4rem)}
.f button{background:none;border:0;padding:.2rem 0;font:inherit;cursor:pointer;position:relative}
.f button::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s}
.f button:hover::after,.f button[aria-pressed="true"]::after{transform:scaleX(1)}
.f button[aria-pressed="true"]{color:var(--active)}
.cols{display:grid;gap:clamp(1rem,2.6vw,3.2rem);padding:0 clamp(1rem,3vw,3.4rem) 5rem;align-items:start}
.col{display:flex;flex-direction:column;gap:clamp(2.25rem,5.25vw,4.875rem)}
.it{margin:0;overflow:visible}
.it .w{overflow:hidden}
.it img{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
figcaption{margin-top:.7rem;font-size:.85rem;color:var(--cap)}
@media (hover:hover){.it:hover img{transform:scale(1.04)}}
.js .it{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .it.in{opacity:1;transform:none}
.m{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:.3rem 1.1rem;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--bg);border:1px solid var(--cap);padding:.55rem 1.1rem;font-size:.72rem;max-width:calc(100% - 2rem)}
.m span{color:var(--cap)}.m button{background:none;border:0;border-bottom:1px solid transparent;font:inherit;cursor:pointer;padding:.15rem 0}
.m button[aria-pressed="true"]{color:var(--active);border-bottom-color:currentColor}
.bk{background:none;border:0;border-bottom:1px solid currentColor;font:inherit;cursor:pointer;padding:.15rem 0;color:var(--ink)}.bk:hover{color:var(--active)}
#pv{padding:2rem clamp(1rem,3vw,3.4rem) 6rem}
.pg{columns:3 280px;column-gap:clamp(1rem,2.6vw,3.2rem);margin-top:2rem}
.pg>*{break-inside:avoid;margin:0 0 clamp(2rem,5vw,4.5rem)}.pg img{display:block;width:100%;height:auto}
.pt h1,.bx h1{font-size:1.5rem;font-weight:500;letter-spacing:.22em;margin:0 0 1rem}
.pt p,.bx p{font-size:.9rem;line-height:1.6;margin:0}.pt p{max-width:46ch}
.hs{position:relative}.hs-stick{position:sticky;overflow:hidden}
.hs-track{display:flex;align-items:flex-start;gap:clamp(2rem,6vw,5rem);height:100%;padding-right:12vw;width:max-content;will-change:transform}
.hs{--ih:min(70vh,640px)}
.end{width:15rem;font-size:.8rem;line-height:1.5;color:var(--cap);letter-spacing:.04em}
.hp{flex:none;display:flex;align-items:flex-start;justify-content:center;height:auto;padding-top:calc((var(--sh,600px) - var(--ih))/2)}.hero{width:100vw}
.hp img{display:block;height:min(70vh,640px);width:auto;max-width:none}
.bx{width:min(38rem,82vw);min-height:var(--ih);box-sizing:border-box;padding:0 2rem 0 0}
.it[data-p]{cursor:pointer}
.m{flex-wrap:wrap}

.hs-stick{display:flex}
.side{flex:none;width:clamp(13rem,22vw,18rem);padding:calc((var(--sh,600px) - var(--ih,600px))/2) clamp(1rem,2vw,2rem);display:flex;flex-direction:column;align-items:flex-end;text-align:right;overflow:auto}
.side h1{font-size:1.25rem;font-weight:500;letter-spacing:.04em;margin:0 0 .4rem}
.side .loc{margin:0 0 .3rem;font-size:.8rem;color:var(--cap);letter-spacing:.06em}.side .yr{margin:0;font-size:.8rem;color:var(--cap)}
.meta{margin:0}.meta dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cap);margin-top:.9rem}.meta dd{margin:.15rem 0 0;font-size:.78rem}
.side .meta{margin-top:1.4rem}.side .bkw{margin-top:auto;padding-top:1.5rem}
.win{flex:1;min-width:0;overflow:hidden;position:relative}
.cue{position:absolute;right:1.2rem;bottom:4.6rem;z-index:2;background:var(--bg);padding:.35rem .7rem;font-size:.72rem;letter-spacing:.06em;color:var(--cap);pointer-events:none;transition:opacity .5s}
.cue span{display:inline-block;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){.cue span{animation:none}}
.hero{width:auto;justify-content:flex-start;padding-left:clamp(1rem,4vw,3rem)}
.hp.hero img{max-width:calc(var(--ww,100vw)*.56);object-fit:cover}.hp img{max-height:92%;}
.bx .mm{display:none}.bx p,.pt p{margin:0 0 1rem}.bx p:last-child,.pt p:last-child{margin:0}.pt .meta{margin:0 0 1.5rem}.bx .meta{margin:0 0 1.4rem}
@media (max-width:760px){.hs-stick{flex-direction:column}.side{width:auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;text-align:left;padding:.8rem 1rem;overflow:visible}.side .loc,.side .yr,.side .meta{display:none}.side .bkw{margin:0 0 0 auto;padding:0}.bx .mm{display:block}}
.none{display:none}
@media (prefers-reduced-motion:reduce){.js .it{opacity:1;transform:none;transition:none}.it img,.it:hover img{transition:none;transform:none}}
button,input{font-family:inherit}
.hero-home{position:fixed;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.hl{width:min(28.75vw,150px);height:auto;display:block;will-change:transform}
#site{position:relative;z-index:1;margin-top:100vh;margin-top:100dvh;background:var(--bg)}
.hc{position:absolute;bottom:calc(2rem + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.08em;color:var(--cap);transition:opacity .4s}
.hc span{display:inline-block;animation:drop 1.4s ease-in-out infinite}
@keyframes drop{50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hc span{animation:none}}
.intro .logo{visibility:hidden}
.hc{display:none}

.nv a[aria-current]{color:var(--active)}
.about .f button{display:none}.about .f{min-height:3.4rem}
#ab{max-width:62rem;margin:0 auto;padding:2.2rem clamp(1rem,3vw,3.4rem) 7rem}
#ab p{margin:0 0 1.3rem;max-width:46ch;line-height:1.75;font-size:.9rem}
#ab strong{font-weight:700}
.tm{display:grid;grid-template-columns:repeat(3,minmax(0,14rem));gap:2rem 2.2rem;margin:3.5rem 0 4.5rem;padding:0;list-style:none}
.tm img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.tm h2{margin:.9rem 0 .15rem;font-size:.72rem;font-weight:700;letter-spacing:.22em}
#ab .tm p{margin:0;font-size:.74rem;font-style:italic;color:var(--cap);line-height:1.4}
.ig{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.ig img{width:3.6rem;height:3.6rem;border-radius:50%;display:block}
.ig .ih{flex:1;min-width:12rem}.ig .ih b{display:block;font-weight:300;font-size:1.45rem}
.ig .ih span{display:block;font-size:.85rem;color:var(--cap);line-height:1.6}
.ig a{color:inherit}.ig a.fl{border:1px solid currentColor;padding:.5rem 1.4rem;text-decoration:none;font-size:.8rem}.ig a:hover{color:var(--active)}
.igg{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.igg a{display:block;aspect-ratio:1;overflow:hidden}.igg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.igg a:hover img{transform:scale(1.06)}}
@media (max-width:640px){.igg{grid-template-columns:repeat(3,1fr)}.tm{gap:1rem}}

#ct{max-width:62rem;margin:0 auto;padding:2.2rem clamp(1rem,3vw,3.4rem) 7rem}
.cg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.6rem);align-items:start}
.cph img{display:block;width:100%;height:auto}
.cinfo h1{margin:0 0 1.5rem;font-size:1.3rem;font-weight:300;letter-spacing:.14em}
.cinfo h3{margin:0 0 .25rem;font-size:.8rem;font-weight:700}
.cinfo p{margin:0 0 1.4rem;font-size:.8rem;line-height:1.7;color:var(--cap)}
.cinfo a{color:inherit;text-decoration:none}.cinfo p a{font-style:italic;font-weight:500;color:var(--ink)}
.cinfo p a:hover,.soc a:hover{color:var(--active)}
.soc{display:flex;gap:1.9rem;margin:0 0 1.2rem;align-items:center}.soc a,.soc span{display:inline-flex;color:var(--ink)}
.mp{display:block;overflow:hidden}.mp img{display:block;width:100%;height:auto}
@media (max-width:720px){.cg{grid-template-columns:1fr}}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}
.pj .hero-home{display:none}.pj #site{margin-top:0}



.f button:not([aria-pressed="true"]):hover,nav a:not([aria-current]):hover{color:var(--hov)}

html{caret-color:#ff1a1a}

@media (max-width:760px){body,body *{font-size:9px!important}}

.tg{display:contents}
.hs.vert .hs-stick{position:static!important;height:auto!important;overflow:visible}
.hs.vert .win{overflow:visible}
.hs.vert .hs-track{flex-direction:column;align-items:stretch;width:auto;height:auto;padding:0 1rem 5rem;gap:1.4rem;transform:none!important}
.hs.vert .hp{width:auto!important;padding:0!important}
.hs.vert .hp img,.hs.vert .hero img{width:100%!important;max-width:none!important;height:auto!important}
.hs.vert .bx{width:auto;min-height:0;padding:0}
.hs.vert .cue{display:none}
@media (max-width:760px){
.f{flex-wrap:wrap}
.tg{display:flex;flex-wrap:wrap;flex-basis:100%;gap:.6rem .5rem}.tg button{white-space:nowrap}
.tg button{flex:none}
}

#tp{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:12;width:34px;height:34px;display:none;align-items:center;justify-content:center;background:var(--bg);color:var(--ink);border:1px solid currentColor;border-radius:50%;padding:0;opacity:0;pointer-events:none;transition:opacity .3s,color .2s}
#tp:hover{color:var(--hov)}
@media (max-width:760px){#tp{display:flex}html.pj #tp.on{opacity:1;pointer-events:auto}}
@media (hover:hover){.it figcaption{transition:color .25s,font-weight .25s}.it:hover figcaption{font-weight:700;color:var(--ink)}}

/* ---- multi-page additions ---- */
@media (max-width:760px){.logo{height:27.5px!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nohero #site{margin-top:0}
.it a{display:block;color:inherit;text-decoration:none}
html:not(.js) .cols{display:block;columns:3 260px}
html:not(.js) .cols .it{break-inside:avoid;margin-bottom:3rem}
.bx h2{font-size:1.5rem;font-weight:500;letter-spacing:.22em;margin:0 0 1rem}
a.bk{text-decoration:none;display:inline-block}
a.end{display:block;text-decoration:none}
header .nv{position:absolute}
@media (max-width:760px){header .nv{position:static;order:2;margin-top:.6rem}}
.pn{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;margin:1.1rem 0 0;font-size:.7rem}
.pn a{text-decoration:none;color:var(--cap)}.pn a:hover{color:var(--hov)}
@media (max-width:760px){.pn{display:none}}
.cityi{max-width:46rem;padding:0 clamp(1rem,3vw,3.4rem) 2.5rem}
.cityi h1{font-size:1.25rem;font-weight:500;letter-spacing:.06em;margin:.4rem 0 1rem}
.cityi p{font-size:.9rem;line-height:1.75;margin:0 0 1rem;max-width:56ch}
.cityi a{color:var(--active);text-decoration:none}
#ab a{color:inherit}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* always light (design revision 5 Nov) */
:root{color-scheme:light}

/* ---- design revision 6 Nov ---- */
html,html *{cursor:url(/assets/cursor.png) 2 2,auto;cursor:-webkit-image-set(url(/assets/cursor.png) 1x,url(/assets/cursor@2x.png) 2x) 2 2,auto}
a,a *,button,button *,[role=button],.it,.it *,label,summary,.hl,.logo{cursor:url(/assets/hover.png) 3 3,pointer!important;cursor:-webkit-image-set(url(/assets/hover.png) 1x,url(/assets/hover@2x.png) 2x) 3 3,pointer!important}
/* filters in two rows */
.tg{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;flex-basis:100%}
.tg .r1,.tg .r2{display:flex;flex-wrap:nowrap;gap:0 clamp(1rem,2.2vw,2rem);white-space:nowrap}
.tg button{flex:none;white-space:nowrap}
@media (max-width:1060px){.f .nv{position:static;order:-1;flex-basis:100%}}
/* mobile: "+" opens the filter panel */
.plus{display:none}
@media (max-width:760px){
.plus{display:block;position:relative;width:30px;height:30px;background:none;border:0;padding:0;color:var(--ink)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.plus[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.plus[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(135deg)}
.plus:hover{color:var(--hov)}
html.about .plus,html.pj .plus{display:none}
.tg{position:fixed!important;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--hh,60px));z-index:9;background:var(--bg);padding:1rem clamp(.8rem,3vw,1.2rem) 1.3rem!important;flex-wrap:nowrap!important;flex-direction:column!important;gap:.7rem!important;border-bottom:1px solid #e8e8e8;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .3s cubic-bezier(.3,.8,.3,1),visibility 0s .3s}
.tg.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.tg .r1{width:100%;justify-content:space-between;gap:0 .4rem}
.tg .r2{gap:0 1rem}
.tg button{font-size:clamp(7px,2.2vw,9px)!important}
}
/* end of project: next project card */
.end{width:15rem}.end p{margin:2rem 0 0}
.nx{display:block;width:100%;text-align:left;color:var(--ink);text-decoration:none}
.nx span{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cap)}
.nx img{display:block;width:100%;height:auto;margin:.7rem 0 .5rem;transition:opacity .3s}
.nx:hover img{opacity:.8}.nx b{font-weight:500}
.end a.back{color:var(--cap);text-decoration:none}
@media (max-width:760px){.end{width:100%;padding:1rem 0 2.5rem}.nx img{max-width:70%}}

/* contact photo sits at the bottom of its column on desktop (revision 11 Nov) */
@media(min-width:761px){.cph{align-self:end}.cph img{height:auto!important}}

/* touch screens */
.nohero-t .hero-home{display:none}.nohero-t #site{margin-top:0}
.hs.tch .win{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none}
.hs.tch .win::-webkit-scrollbar{display:none}
.hs.tch .hs-track{transform:none!important}