:root{--bg:#fff;--panel:#f6f6f6;--panel-hover:#f1f1f1;--ink:#1c1c1a;--ink-secondary:#6e6d68;--ink-tertiary:#a5a49e;--line:#ececec;--focus:#1c1c1a;--font-sans:Inter, system-ui, -apple-system, sans-serif;--measure:34rem;--content:50rem;--gutter:24px;--gutter-lg:48px;--plate-inset:16px;--stack-1:16px;--stack-2:40px;--stack-3:96px;--stack-4:160px;--radius-plate:24px}
*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scrollbar-width:none}html::-webkit-scrollbar{display:none}body,h1,p,figure,ul{margin:0}img{max-width:100%;display:block}a{color:inherit}:root{--scale:.6;--fs-h1:15.2px;--fs-letter:15.2px;--fs-card:12.8px;--fs-footer-label:12.8px;--fs-footer-value:14.4px;--side:20px;--section-gap:54px;--nav-content-offset:calc(89px + var(--section-gap));--modal-card-height:548px;--modal-content-gap:42px;--modal-content-padding:40px}html{background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-letter);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;line-height:1.45}.wrap{width:100%;max-width:calc(var(--content) + 2 * var(--side));padding-inline:var(--side);margin-inline:auto}.measure{max-width:var(--measure)}.skip-link{background:var(--bg);color:var(--ink);border:2px solid var(--focus);z-index:10;padding:10px 14px;position:absolute;top:0;left:-9999px}.skip-link:focus{left:var(--side);top:var(--side)}.site-nav{z-index:100;-webkit-backdrop-filter:blur(20px)saturate(180%);backdrop-filter:blur(20px)saturate(180%);background:#f2f2f2bf;border:.5px solid #ffffffa6;border-radius:100px;align-items:center;gap:11px;padding:4px;display:flex;position:fixed;top:30px;left:50%;transform:translate(-50%);box-shadow:0 4px 24px #00000012,inset 0 .5px #fffffff2}.nav-seg{height:50px;color:var(--ink-secondary);cursor:pointer;will-change:transform;appearance:none;background:0 0;border:0;border-radius:100px;justify-content:center;align-items:center;padding:15px 20px;transition:background-color .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s cubic-bezier(.25,.46,.45,.94);display:inline-flex;position:relative;overflow:hidden}.nav-seg svg{display:block;position:relative}.nav-seg svg path,.nav-seg svg circle{fill:#a9a9a9;transition:fill .4s cubic-bezier(.25,.46,.45,.94)}.nav-seg--active svg path,.nav-seg--active svg circle{fill:#000}.nav-seg--active{background:#ffffffe0;box-shadow:0 1px 3px #0000001a,inset 0 .5px #fff}.nav-sheen{pointer-events:none;opacity:0;border-radius:100px;position:absolute;inset:0}.nav-overlay{z-index:200;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);opacity:0;background:#e1e1e126;justify-content:center;align-items:center;padding:16px;transition:opacity .6s cubic-bezier(.4,0,.6,1);display:flex;position:fixed;inset:0}.nav-overlay.is-visible{opacity:1}.nav-dialog-wrap{flex-direction:column;align-items:center;gap:12px;width:min(411px,100%);display:flex}.nav-dialog{width:100%;height:var(--modal-card-height);clip-path:inset(calc(50% - 28px) 33% round 100px);background:#fff;border-radius:30px;flex-direction:column;transition:clip-path .6s cubic-bezier(.4,0,.6,1);display:flex;overflow:hidden;box-shadow:0 34.5px 20.25px #00000003,0 15px 15px #00000003,0 3.75px 8.25px #00000003}.nav-overlay.is-visible .nav-dialog{clip-path:inset(0% round 30px)}.nav-dialog:focus{outline:none}.nav-dialog-content{scrollbar-width:none;padding:var(--modal-content-padding) max(20px, calc(50% - 175px));gap:var(--modal-content-gap);flex-direction:column;flex:1;font-size:clamp(11.2px,2.88vw,12px);font-weight:500;line-height:22px;display:flex;overflow-y:auto}.nav-dialog-content::-webkit-scrollbar{display:none}.nav-dialog-section{flex-direction:column;gap:8px;display:flex}.nav-dialog-section--letter{gap:16px}.nav-dialog-section--contact{gap:0}.nav-dialog-greeting{color:#000;font-weight:500}.nav-dialog-body{color:#a9a9a9;font-weight:500}.nav-dialog-heading{font-size:inherit;font-weight:500;line-height:inherit;color:#000}.nav-dialog-list{padding:0;list-style:none}.nav-dialog-row{border-top:1px solid #efefef;justify-content:space-between;align-items:center;height:clamp(38px,11vw,46px);display:flex}.nav-dialog-num{color:#000;font-weight:500}.nav-dialog-value{color:#000;text-align:right;font-weight:500}.nav-dialog-mail{color:#a9a9a9;text-decoration:none}.nav-dialog-close{-webkit-backdrop-filter:blur(20px)saturate(180%);backdrop-filter:blur(20px)saturate(180%);cursor:pointer;appearance:none;opacity:0;background:#f2f2f2bf;border:.5px solid #ffffffa6;border-radius:100px;justify-content:center;align-items:center;width:58px;height:50px;transition:opacity .6s cubic-bezier(.4,0,.6,1),transform .6s cubic-bezier(.4,0,.6,1);display:inline-flex;transform:scale(.85);box-shadow:0 4px 24px #00000012,inset 0 .5px #fffffff2}.nav-overlay.is-visible .nav-dialog-close{opacity:1;transition:opacity .25s ease-out .3s,transform .25s ease-out .3s;transform:scale(1)}.nav-dialog-close-icon{display:block;transform:rotate(45deg)}.link{color:var(--ink);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:var(--ink-tertiary);text-decoration-color:var(--ink-tertiary)}.link:hover{-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}.intro{padding-top:var(--nav-content-offset)}.intro h1{font-size:var(--fs-h1);letter-spacing:-.01em;color:var(--ink-tertiary);font-weight:700;line-height:1.3}.intro .letter-body{font-size:var(--fs-letter);letter-spacing:-.01em;color:var(--ink);font-weight:400;line-height:1.45}.intro .letter-body strong{font-weight:700}.intro .greeting{margin-top:calc(var(--stack-2) * var(--scale))}.intro .positioning,.intro .availability{margin-top:var(--stack-1)}@keyframes intro-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.intro{animation:.5s ease-out both intro-fade}.plate{background:var(--panel);border-radius:var(--radius-plate);margin-inline:calc(var(--plate-inset) - var(--side));justify-content:center;align-items:center;padding:56px 0;display:flex}.plate .work{height:auto}.plate--logo{aspect-ratio:1;padding:0}.plate--logo .work--logo{object-fit:contain;width:52%;height:28%}.plate--logo img[src="/logos/hsbc-am.webp"]{width:62.4%;height:33.6%}.work--portrait{width:50%}.work--square{width:56%}.work--landscape{width:79%}.work-stack{padding-top:var(--section-gap);gap:calc(var(--stack-3) * var(--scale));flex-direction:column;display:flex}.work-stack .card{width:min(450px,100%)}.work-stack .plate{margin-inline:0}.card{color:inherit;text-decoration:none;display:block}.card .plate{transition:background-color .2s ease-out}.card:hover .plate{background:var(--panel-hover)}.caption{margin-top:var(--stack-1);justify-content:space-between;align-items:baseline;gap:16px;display:flex}.caption .title{font-size:var(--fs-card);letter-spacing:0;color:var(--ink);font-weight:500;line-height:1.4}.caption .years{font-size:var(--fs-card);letter-spacing:0;color:var(--ink-secondary);white-space:nowrap;font-weight:400;line-height:1.4}@keyframes project-page-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.project-page{animation:.5s ease-out both project-page-in}.project-header{padding-top:var(--nav-content-offset)}.project-title{font-size:var(--fs-h1);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;font-weight:500;line-height:1.3}.project-note{margin-top:var(--stack-1);font-size:var(--fs-card);letter-spacing:0;color:var(--ink-secondary);text-wrap:pretty;font-weight:400;line-height:1.4}.plate-stack{padding-top:calc(var(--stack-2) * var(--scale));gap:calc(var(--stack-2) * var(--scale));flex-direction:column;padding-bottom:150px;display:flex}.project-card{gap:var(--stack-1);content-visibility:auto;contain-intrinsic-size:auto 600px;flex-direction:column;display:flex}.project-caption{font-size:var(--fs-card);letter-spacing:0;color:var(--ink);font-weight:500;line-height:1.4}.site-footer{margin-top:calc(var(--stack-4) * var(--scale));padding-bottom:calc(var(--stack-3) * var(--scale))}.footer-groups{width:100%;max-width:var(--content);gap:var(--stack-2);flex-direction:column;display:flex}.footer-group{flex-direction:column;gap:6px;display:flex}.footer-label{font-size:var(--fs-footer-label);letter-spacing:.02em;color:var(--ink-secondary);font-weight:400;line-height:1.5}.footer-value{font-size:var(--fs-footer-value);letter-spacing:0;color:var(--ink);font-weight:400;line-height:1.6}a:focus-visible,:focus-visible{outline:2px solid var(--focus);outline-offset:2px}@media (min-width:481px){:root{--side:var(--gutter)}}@media (max-width:767px){:root{--modal-card-height:min(500px, calc(100dvh - 94px));--modal-content-gap:32px;--modal-content-padding:clamp(24px, 6vw, 32px)}}@media (min-width:768px){:root{--scale:1;--section-gap:90px;--fs-h1:20px;--fs-letter:20px;--fs-card:17px;--fs-footer-label:16px;--fs-footer-value:18px}.nav-dialog-content{font-size:clamp(14px,3.6vw,15px)}.work-stack .card,.footer-groups{width:630px}.footer-groups{flex-direction:row;justify-content:space-between;gap:24px}.footer-group{flex:1;min-width:0}.footer-group--location{text-align:left;flex:none;align-items:flex-start;margin-left:auto}}@media (min-width:1024px){html{zoom:.9}:root{--side:var(--gutter-lg)}.plate{margin-inline:0}.work-stack .card,.footer-groups{width:700px}.plate-stack{padding-bottom:166.667px}}@media (prefers-reduced-motion:reduce){.intro,.project-page{animation:none}.card .plate,.nav-seg{transition:none}.nav-overlay,.nav-dialog,.nav-dialog-close{transition:none!important}}
