/* Responsive layout and motion: loaded after the visual theme. */
html{scroll-padding-top:90px}body{overflow-x:clip}img{max-width:100%}main,section,.hero-copy,.site-copy,.about-body{min-width:0}
.progress{width:100%;transform:scaleX(0);transform-origin:right;pointer-events:none}
.reveal{transition:opacity .65s ease,translate .65s cubic-bezier(.22,1,.36,1)}
.js-motion .reveal:not(.visible){translate:0 18px}
.hero-copy,.photo-frame{animation-duration:.85s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.portrait-wrap:before{animation:none}.floating-mark{animation:float 7s ease-in-out infinite}
.site-shot,.actual-work{transition:transform .3s ease,box-shadow .3s ease}
dialog{max-height:90dvh;overscroll-behavior:contain}body:has(dialog[open]){overflow:hidden}
dialog[open]{animation:dialog-in .25s ease both}.close{width:44px;height:44px;z-index:4}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:1000px) and (min-width:701px){.hero{height:auto;min-height:740px;padding:140px 5% 85px;gap:25px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.hero h1{font-size:clamp(44px,6.2vw,62px)}.hero-actions{gap:18px;flex-wrap:wrap}.hero .portrait-wrap{height:420px;width:100%}.hero-metrics{gap:24px}.hero .button{gap:16px;padding:15px 18px}.hero p{font-size:14px}.portrait-label{display:none}}
@media(max-width:700px){
html{scroll-padding-top:86px}header,header.scrolled,header.menu-open{height:68px;padding:0 20px;background:#063d39f5;backdrop-filter:blur(12px)}
header .brand{font-size:21px;flex-shrink:0}header .brand span{font-size:7px;letter-spacing:2.5px}header .nav-cta{font-size:11px;padding:10px 14px;margin-left:10px;min-height:40px;display:flex;align-items:center}header .nav-cta span{display:none}.menu-toggle{width:44px;height:44px;flex-shrink:0}
#main-nav{display:flex;top:68px;padding:12px 24px 20px;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;max-height:calc(100dvh - 68px);overflow:auto}.menu-open #main-nav{visibility:visible;opacity:1;transform:none;pointer-events:auto}#main-nav a{font-size:16px;padding:13px 4px;min-height:48px}
.hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;max-height:none;padding:106px 24px 54px;gap:26px}.hero-copy{text-align:center}.hero .eyebrow{justify-content:center;font-size:10px;line-height:1.9;gap:9px}.hero h1{font-size:clamp(40px,11.8vw,62px);line-height:1.28;letter-spacing:-.7px;margin:21px 0 16px}.hero p{font-size:13px;line-height:2;max-width:380px;margin:auto}.hero p .desktop{display:none}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:380px;margin:23px auto 0}.hero-actions a{justify-content:center;font-size:11px;min-height:48px;padding:12px 8px;gap:12px;white-space:nowrap}.hero-actions .text-link{border:1px solid #a2d7c54a;border-radius:5px}.hero-metrics{max-width:360px;margin:24px auto 0;padding-top:17px;gap:0;justify-content:center}.hero-metrics>span{width:50%;font-size:10px}.hero-metrics>span+span{border-right:1px solid #a4dbc323}.hero-metrics b{font-size:24px;margin-bottom:4px}.hero-metrics .handwritten{display:none}.hero-note{font-size:9px;margin-top:16px;gap:12px;justify-content:center}.hero-note .line{width:24px}
.hero .portrait-wrap{height:auto;aspect-ratio:1/1.12;width:min(100%,330px);max-width:330px;align-self:center;flex:none}.portrait-wrap:before{width:84%;height:auto;aspect-ratio:1;top:16%;max-width:none}.photo-frame{inset:0 0 -5px;mask-image:linear-gradient(#000 82%,transparent)}.photo-frame img{object-position:center top}.orbit{inset:13% 7% 6%;transform:rotate(-13deg)}.portrait-label{display:none}.floating-mark{width:64px;height:64px;font-size:17px;left:2%;bottom:16%;animation:none;transform:rotate(8deg)}.hero-index{display:none}.scroll-cue{position:static;align-self:center;font-size:10px;gap:16px;margin-top:-18px}.scroll-cue span{font-size:19px}
.ribbon{padding:13px 0}.ribbon>div{font-size:12px;gap:24px;animation-duration:60s}.ribbon span{font-size:17px}
.section,.about,.portrait-section{padding:54px 24px}.section-label{font-size:10px;margin-bottom:14px}.section-heading{display:block}h2,.portrait-text h2,.process h2{font-size:clamp(30px,8.3vw,42px);line-height:1.45;letter-spacing:-.5px}.about{display:block}.about-bottom{display:grid;grid-template-columns:1fr;gap:16px;margin:21px 0}.about p{font-size:13px;line-height:2.1}.interests{gap:7px}.interests span{padding:8px 11px;font-size:10px}.web-intro{font-size:12px;line-height:1.95;margin-top:18px}
.website-grid{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:28px}.website-card,.featured-site{display:block;grid-column:auto;padding:0 0 30px;margin:0;border-bottom:1px solid #b6e1ca20}.site-shot,.featured-site .site-shot{border-radius:12px;transform:none!important;box-shadow:0 10px 24px #001b2220}.screenshot-window,.featured-site .screenshot-window,.pharmacy-shelves-preview .screenshot-window{aspect-ratio:1.5}.site-shot .preview-hint{left:10px;bottom:10px;font-size:8px;padding:7px 10px}.pharmacy-shelves-preview .preview-hint{bottom:auto;top:10px}.shelves-caption{font-size:7px;right:10px;bottom:10px;padding:7px 9px}.site-copy,.featured-site .site-copy{padding:18px 0 0}.site-kicker{font-size:9px;gap:12px;line-height:1.8}.site-kicker b{width:25px;height:25px;font-size:10px}.site-copy h3,.featured-site h3{font-size:clamp(24px,6.8vw,31px);line-height:1.5;margin-top:10px;letter-spacing:0}.site-en{font-size:9px;letter-spacing:1px;margin:7px 0 11px;line-height:1.7}.site-copy p{font-size:13px;line-height:2;max-width:none}.site-actions{margin-top:17px}.visit-site{width:100%;justify-content:space-between;min-height:46px;padding:12px 17px;font-size:12px}.access-note{font-size:10px;margin-top:10px;border:0;padding-top:0}
.filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:3px 2px 12px;margin:22px -2px 18px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters button{flex:none;min-height:42px;padding:10px 14px;font-size:11px}.projects{grid-template-columns:minmax(0,1fr);gap:28px}.actual-work{height:auto;aspect-ratio:1.5;transform:none!important}.project-info{gap:12px;margin-top:14px}.project-info>div{min-width:0}.project-info h3{font-size:23px;line-height:1.5;margin-top:6px}.project-info small{font-size:9px}.arrow{flex-shrink:0;width:44px;height:44px}.portfolio-download{display:flex;flex-direction:column;align-items:stretch;padding:20px;margin-top:32px;gap:16px}.portfolio-download>span{font-size:23px}.portfolio-download .button{justify-content:space-between;min-height:48px}
.portrait-section{grid-template-columns:1fr;gap:27px}.portrait-text .portrait-bio{font-size:13px;line-height:2;margin:18px 0}.gallery-photo{width:min(100%,330px);height:auto;aspect-ratio:4/5;max-width:330px;border-radius:150px 150px 12px 12px}.gallery-photo img{height:96%}.gallery-photo .portrait-halo{width:75%;height:auto;aspect-ratio:1}.gallery-photo .portrait-credit{font-size:9px;right:18px}.gallery-photo .gallery-zoom{width:40px;height:40px;left:16px;bottom:18px}
.process{grid-template-columns:1fr;gap:26px}.process-steps details{padding:19px 0}.process-steps summary{font-size:17px;gap:16px;min-height:32px}.process-steps details>p{font-size:12px;margin:14px 28px 0 0}.contact h2{font-size:clamp(36px,10vw,50px);line-height:1.4}.contact p{font-size:13px;line-height:2;margin:20px 0 24px}.contact .button{width:100%;justify-content:space-between;min-height:48px;font-size:12px;padding:14px 18px}.contact-star{font-size:170px;left:-60px;top:90px;animation:none}.copy-handle{min-height:44px;font-size:11px;gap:20px}footer{padding:26px 24px;gap:22px;flex-wrap:wrap}footer .brand{font-size:22px}footer>span{order:3;width:100%;font-size:10px}
dialog,.work-dialog{width:calc(100% - 24px);max-width:560px;max-height:calc(100dvh - 28px);padding:60px 18px 22px;border-radius:14px}dialog h2,.site-dialog h2,.work-dialog h2{font-size:26px;line-height:1.5;margin:8px 0 16px}.site-modal-grid{grid-template-columns:minmax(0,1fr);gap:18px}.site-modal-grid>img{order:-1;max-height:220px;object-fit:contain}.site-dialog p{font-size:13px}.site-dialog .button{display:flex;justify-content:space-between;min-height:48px}.work-viewer img{max-height:52dvh}.viewer-controls{gap:26px;padding:12px}.viewer-controls button{width:44px;height:44px}.work-dialog p{font-size:12px}#photo-dialog{width:calc(100% - 24px);padding:45px 8px 0}#photo-dialog img{max-width:100%;width:100%;max-height:80dvh;padding:0}
.js-motion .reveal:not(.visible){translate:0 12px}.reveal{transition-duration:.5s}.site-shot:hover img,.actual-work:hover img{transform:none}.button:hover{transform:none}.visit-site:hover,.filters button:hover{translate:none}
}
@media(max-width:360px){header,header.scrolled,header.menu-open{padding-inline:16px}.hero{padding-inline:18px}.section,.about,.portrait-section{padding-inline:18px}.hero h1{font-size:40px}.hero .eyebrow{font-size:9px}.hero-actions a{font-size:10px;gap:8px}.site-copy h3,.featured-site h3{font-size:24px}.hero .portrait-wrap{max-width:280px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal:not(.visible){opacity:1;translate:none}}