:root{color-scheme:light;--paper:#f8f7f4;--ink:#262624}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{margin:0;color:var(--ink);background:var(--paper);font:12px/1.25 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:transparent;padding:0;cursor:pointer}a:hover,button:hover{opacity:.55}a:focus-visible,button:focus-visible{outline:1px solid;outline-offset:6px}header{position:fixed;z-index:5;inset:0 0 auto;display:grid;grid-template-columns:1fr 1fr 1fr auto;padding:22px 26px;pointer-events:none}header>*{pointer-events:auto;margin:0}.name{text-transform:uppercase;width:max-content}.discipline{color:#686864}nav{display:flex;flex-direction:column;align-items:flex-start}.location{min-width:100px}.gallery{padding:0 26px}.project{height:100svh;min-height:620px;position:relative;display:flex;align-items:center;justify-content:center;scroll-snap-align:start}.project-button{display:block;width:clamp(280px,36vw,570px);text-align:left}.visual{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1.38;overflow:hidden}.visual img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.project-button:hover{opacity:1}.project-button:hover img{transform:scale(1.025)}.caption{display:flex;justify-content:space-between;gap:20px;margin-top:15px;font-size:11px}.caption h2{font:inherit;margin:0}.caption span{color:#777772;text-align:right}.project-number{position:absolute;left:0;top:50%;color:#777772;font-size:10px}.project:nth-child(even) .project-button{width:clamp(280px,41vw,630px)}footer{position:fixed;z-index:5;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;padding:22px 26px;font-size:11px;pointer-events:none}footer>*{pointer-events:auto}.controls{display:flex;gap:24px}.controls button{font-size:17px;line-height:1}footer>a{min-width:100px}.about{position:fixed;z-index:4;inset:0;background:var(--paper);overflow-y:auto;padding:160px 26px 100px}.about[hidden]{display:none}.about-close{position:absolute;right:26px;top:90px}.about-content{max-width:550px;margin:0 auto}.about h2{font-size:12px;font-weight:400;margin:0 0 45px}.about-content>p{font-size:23px;line-height:1.35;letter-spacing:-.6px;margin:0 0 24px}.about-details{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:65px 0 45px}.about h3{font-size:11px;font-weight:400;color:#777772;margin:0 0 16px}.about-details p{margin:0;line-height:1.8}.about-details a{display:block;line-height:1.8}dialog{width:min(1000px,94vw);max-height:94svh;border:0;padding:25px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#f8f7f4eb}.close{display:block;margin-left:auto;margin-bottom:35px}.detail-heading{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-bottom:20px}.detail-heading h2{font:inherit;margin:0}.detail-heading span{color:#777772}dialog img{display:block;width:100%;height:60svh;object-fit:contain}dialog p{max-width:500px;line-height:1.6;margin:25px 0 0;color:#686864}.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}.skip{position:fixed;top:-50px;left:25px;z-index:10;background:var(--paper);padding:10px}.skip:focus{top:5px}@media(min-width:1500px){.project-button{width:35vw}}@media(max-width:650px){header{padding:20px;grid-template-columns:1fr 1fr auto;font-size:11px}.discipline{display:none}.location{min-width:85px}nav{padding-left:15px}.gallery{padding:0 20px}.project{min-height:560px}.project-button,.project:nth-child(even) .project-button{width:min(100%,450px)}.project-number{top:auto;bottom:110px}.caption{margin-top:12px;font-size:10px}.caption span{max-width:140px}footer{padding:20px;grid-template-columns:1fr 1fr auto;gap:10px;font-size:10px}footer>a{display:none}.controls{gap:28px}.about{padding:160px 25px 100px}.about-content>p{font-size:21px}.about-details{margin-top:45px}dialog{padding:18px}.detail-heading{font-size:11px}dialog img{height:45svh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.visual img{transition:none}}
/* Horizontal project index */
html{scroll-snap-type:none}body{overflow:hidden}.gallery{height:100svh;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,28vw,540px);align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:100px 16px 65px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;cursor:grab;touch-action:pan-x}.gallery::-webkit-scrollbar{display:none}.gallery.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.project{height:auto;min-height:0;display:block;scroll-snap-align:start;scroll-margin-left:16px;transform:translateY(4vh)}.project-button,.project:nth-child(even) .project-button{width:100%;display:flex;flex-direction:column}.visual{order:2;aspect-ratio:auto;height:61svh;background:#eeede9}.visual img{object-fit:contain;width:100%;height:100%;pointer-events:none}.caption{order:1;width:100%;margin:0 0 12px;justify-content:flex-start;font-size:11px;text-transform:uppercase}.caption span,.project-number{display:none}.project-button:hover img{transform:scale(1.015)}.gallery.is-dragging .project-button{pointer-events:none}.controls button:disabled{opacity:.25;cursor:default}@media(max-width:650px){.gallery{grid-auto-columns:76vw;padding:100px 20px 75px;gap:10px}.project{transform:none;scroll-margin-left:20px}.visual{height:56svh}.caption{font-size:10px;margin-bottom:10px}.project-button,.project:nth-child(even) .project-button{width:100%}}@media(prefers-reduced-motion:reduce){.gallery{scroll-behavior:auto}}
.gallery{scroll-snap-type:none;touch-action:none}.gallery.lenis-smooth{scroll-behavior:auto!important}.gallery.lenis-stopped{overflow:hidden}
/* Editorial covers fill the gallery; interface previews remain in project details. */
.visual img{object-fit:cover}.visual{background:transparent}

header .name{font-size:28px;line-height:.95;letter-spacing:-1px}@media(max-width:650px){header .name{font-size:24px;letter-spacing:-.8px}}
/* The gallery sits on one consistent outer and inner gutter. */
.gallery{--grid-gutter:8px;gap:var(--grid-gutter);padding:100px var(--grid-gutter) var(--grid-gutter);align-items:end}.project{transform:none;scroll-margin-left:var(--grid-gutter)}@media(max-width:650px){.gallery{--grid-gutter:10px;padding:100px var(--grid-gutter) var(--grid-gutter);gap:var(--grid-gutter)}.project{transform:none;scroll-margin-left:var(--grid-gutter)}}

.motion-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.motion-cover-toggle{position:absolute;z-index:2;bottom:14px;right:14px;color:#fff;background:#0006;border:1px solid #ffffff50;padding:7px 10px;font-size:10px;line-height:1;border-radius:0}.motion-cover-toggle:hover{opacity:1;background:#000a}@media(prefers-reduced-motion:reduce){.motion-cover,.motion-cover-toggle{display:none}}
.visual{position:relative;isolation:isolate}

/* Project hover affordance. */
.project-button .visual::after{content:'+';position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#111;color:#fff;font:300 30px/1 Arial,Helvetica,sans-serif;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .2s ease,transform .25s ease}.project-button:hover .visual::after,.project-button:focus-visible .visual::after{opacity:1;transform:translate(-50%,-50%) scale(1)}@media(hover:none){.project-button:hover .visual::after{opacity:0}}@media(prefers-reduced-motion:reduce){.project-button .visual::after{transition:none}}

.visual::before{content:'';position:absolute;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none;transition:opacity .4s ease}.project-hover-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:28px;display:flex;flex-direction:column;gap:12px;color:#fff;text-align:left;opacity:0;transform:translateY(9px);transition:opacity .3s ease,transform .4s ease;pointer-events:none}.project-hover-copy>span{font-size:10px;line-height:1.4}.project-hover-copy strong{font-size:clamp(20px,2.2vw,32px);font-weight:400;line-height:1.15;letter-spacing:-.6px;max-width:320px}.project-button:hover .visual::before,.project-button:focus-visible .visual::before{opacity:.82}.project-button:hover .project-hover-copy,.project-button:focus-visible .project-hover-copy{opacity:1;transform:translateY(0)}@media(hover:none){.project-button:hover .visual::before{opacity:0}.project-button:hover .project-hover-copy{opacity:0}}@media(prefers-reduced-motion:reduce){.visual::before,.project-hover-copy{transition:none}}


.about-details .freelance-clients p{line-height:1.8}.freelance-clients span{display:block}.about-details{row-gap:32px}

.about-identity{display:flex;align-items:flex-end;gap:28px;margin-bottom:40px}.about-portrait{display:block;width:140px;height:auto;filter:grayscale(1)}.about-identity h2{margin:0 0 3px}@media(max-width:650px){.about-portrait{width:110px}.about-identity{gap:22px;margin-bottom:32px}}
/* About portrait alongside the biography. */
.about-content{max-width:1040px;position:relative;padding-right:420px;min-height:490px}.about-identity{display:block;margin-bottom:45px}.about-identity h2{margin:0}.about-portrait{position:absolute;right:0;top:0;width:340px;height:auto}.about-content>p{max-width:550px}@media(max-width:900px) and (min-width:651px){.about-content{padding-right:310px}.about-portrait{width:260px}}@media(max-width:650px){.about-content{padding-right:0;min-height:0}.about-identity{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:35px}.about-portrait{position:static;width:min(75%,280px);align-self:flex-end}.about-identity h2{order:-1}}
/* Subtle camera motion on the original photographic covers. */
.project .visual>img{transform-origin:50% 50%;will-change:transform;animation:cover-camera 13s ease-in-out infinite alternate;animation-play-state:paused;transition:filter .4s ease}.project.in-view .visual>img{animation-play-state:running}.project:nth-child(3n+1) .visual>img{--camera-x:-2%;--camera-y:1.5%;animation-duration:14s;animation-delay:-3s}.project:nth-child(3n+2) .visual>img{--camera-x:2%;--camera-y:-1%;animation-duration:17s;animation-delay:-7s}.project:nth-child(3n) .visual>img{--camera-x:-1%;--camera-y:-2%;animation-duration:15s;animation-delay:-5s}.project-button:hover .visual>img{animation-play-state:paused}@keyframes cover-camera{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.13) translate(var(--camera-x,2%),var(--camera-y,-1%))}}@media(prefers-reduced-motion:reduce){.project .visual>img{animation:none;transform:none;will-change:auto}}

.contact-card{display:flex;flex-direction:column}.contact-card>.caption{order:0;flex:none}.contact-card>.caption h2{font:inherit;margin:0}.contact-card-body{height:61svh;background:#111;color:#fff;display:flex;flex-direction:column;padding:30px 25px;overflow:hidden}.contact-card-kicker{font-size:10px;color:#aaa;line-height:1.5}.contact-card-body>h2{font-size:clamp(30px,3.8vw,58px);font-weight:400;line-height:1.05;letter-spacing:-2px;margin:40px 0 auto}.contact-card-links{display:flex;flex-direction:column;margin:35px 0 24px}.contact-card-links a,.contact-card-links button{display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #393939;background:none;color:inherit;font:12px/1.4 Arial,Helvetica,sans-serif;text-align:left;padding:14px 0;cursor:pointer}.contact-card-links a:hover,.contact-card-links button:hover{opacity:1;color:#aaa}.contact-card-links span{font-size:18px}.contact-card-email{font-size:10px;color:#888;overflow-wrap:anywhere}@media(max-width:650px){.contact-card-body{height:56svh;padding:25px}.contact-card-body>h2{font-size:44px;margin-top:30px;letter-spacing:-1.8px}.contact-card-links{margin:25px 0 20px}.contact-card-links a,.contact-card-links button{padding:12px 0}}
.contact-card{align-items:stretch}.contact-card-body{width:100%}
/* A stronger closing invitation. */
.contact-card-body{background:#ff542e;color:#171713}.contact-card-kicker{color:#391f17}.contact-card-links{margin:32px 0 24px}.contact-card-links a,.contact-card-links button{font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:-.7px;padding:18px 0;border-bottom-color:#17171355}.contact-card-links span{font-size:28px}.contact-card-links a:hover,.contact-card-links button:hover{color:#fff}.contact-card-email{color:#4d261b}.contact-card-body>h2{font-size:clamp(30px,3.5vw,53px)}@media(max-width:650px){.contact-card-links a,.contact-card-links button{font-size:25px;padding:15px 0}.contact-card-body>h2{font-size:38px}.contact-card-links{margin:24px 0 18px}.contact-card-links span{font-size:27px}}
header{font-size:14px}header .name{font-size:30px}@media(max-width:650px){header{font-size:13px}header .name{font-size:26px}}

.grid-cover-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}

/* Header typography: two points larger. */
header{font-size:16px}header .name{font-size:32px}@media(max-width:650px){header{font-size:15px}header .name{font-size:28px}}

/* One typographic scale and separate header navigation items. */
header{font-size:16px;grid-template-columns:1fr 1fr auto auto auto;column-gap:44px;align-items:start}
header .name,header .discipline,header nav,header nav button,header nav a{font-size:inherit;font-weight:400;line-height:1.25;letter-spacing:normal}
header nav{display:contents;padding:0}
header .name{line-height:1.15}
@media(max-width:650px){header{font-size:15px;grid-template-columns:1fr auto auto auto;column-gap:22px}header .discipline{display:none}header .name{font-size:inherit}}

header .theme-toggle{grid-column:auto;position:static;justify-self:end;align-self:start;display:grid;place-items:center;font:inherit;line-height:1.25;width:1.25em;height:1.25em;padding:0;margin:0}
header .theme-toggle svg{width:1em;height:1em}

/* Static slider covers; hover overlays remain active. */
.project .visual>img,.project.in-view .visual>img,.project-button:hover .visual>img{animation:none;transform:none;will-change:auto}

/* Clickable project covers use the cursor as their only circular affordance. */
.project-button .visual::after{display:none}
.project-hover-copy{align-items:flex-start;justify-content:flex-start;text-align:left}
@media(hover:hover) and (pointer:fine){
 .project-button,.project-button *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23000' stroke='%23fff' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E") 16 16,pointer}
}

/* Centered original work preview, shared by home and Work covers. */
.visual>.cover-ui-preview{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82%;max-height:62%;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.23));transition:opacity .25s ease}
.visual>.cover-ui-preview>img{display:block;width:100%;height:auto;max-height:42svh;object-fit:contain;border-radius:5px}
.project-button:is(:hover,:focus-visible) .cover-ui-preview{opacity:.25}

/* Reveal a still of the detail demo only on hover or keyboard focus. */
.visual>.cover-ui-preview{opacity:0;transition:opacity .3s ease}
.project-button:is(:hover,:focus-visible) .visual>.cover-ui-preview{opacity:1}
.visual>.cover-ui-preview.mobile-ui-preview{width:42%;max-height:74%}
.visual>.cover-ui-preview.mobile-ui-preview>img{width:auto;max-width:100%;max-height:48svh;border-radius:18px}

/* Hover composition: interface above, description below. */
.visual>.cover-ui-preview{top:8%;left:8%;transform:none;width:84%;height:54%;max-height:54%;align-items:flex-start;justify-content:center}
.visual>.cover-ui-preview>img{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center top}
.visual>.cover-ui-preview.mobile-ui-preview{left:8%;top:8%;width:84%;height:54%;max-height:54%}
.visual>.cover-ui-preview.mobile-ui-preview>img{width:auto;height:100%;max-width:100%;max-height:100%;border-radius:14px}
.visual>.project-hover-copy{top:auto;bottom:6%;left:8%;right:8%;width:auto;align-items:flex-start;justify-content:flex-start;text-align:left}

.project-button:is(:hover,:focus-visible) .cover-ui-preview>img{transform:none}

.cover-ui-preview>video{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center top;border-radius:5px;pointer-events:none}
.cover-ui-preview.mobile-ui-preview>video{width:auto;max-width:100%;border-radius:14px}

@media(hover:none),(max-width:650px){a:hover,button:hover{opacity:1}
.project-button:is(:hover,:focus-visible) .visual::before,.project-button:is(:hover,:focus-visible) .visual::after,.project-button:is(:hover,:focus-visible) .project-hover-copy{opacity:0}
.project-button:hover img,.project-button:hover .visual>img{transform:none}
.visual>.cover-ui-preview{top:50%;left:50%;transform:translate(-50%,-50%);width:84%;height:auto;max-height:70%;align-items:center;justify-content:center}
.visual>.cover-ui-preview>img{width:100%;height:auto;max-height:34svh;object-position:center}
.visual>.cover-ui-preview.mobile-ui-preview{top:50%;left:50%;width:46%;height:auto;max-height:70%}
.visual>.cover-ui-preview.mobile-ui-preview>img{width:auto;height:auto;max-width:100%;max-height:34svh}
.project-button:is(:hover,:focus-visible) .visual>.cover-ui-preview{opacity:1}}