/* A shared material and motion system. The artwork itself stays sharp. */
:root{--glass-bg:linear-gradient(145deg,#ffffff14,#ffffff06);--glass-border:#ffffff26;--glass-light:#ffffff20;--ease-out:cubic-bezier(.22,.8,.2,1);--ease-spring:cubic-bezier(.18,.8,.22,1);--muted:#b9bbc1}
html{scroll-padding-top:112px}body{overflow-x:clip}#app{isolation:isolate}
header,.home header{border-bottom:1px solid #ffffff0b;background:#101113d9;-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%)}
header nav{gap:3px;padding:5px;border:1px solid #ffffff12;border-radius:999px;background:#ffffff04;box-shadow:inset 0 1px 0 #ffffff08}
header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:0;border-radius:999px;color:#bec0c6;transition:background .22s,color .22s,box-shadow .25s,transform .25s var(--ease-out)}
header nav a.active{color:#fff;background:linear-gradient(150deg,#ffffff1b,#ffffff0c);box-shadow:inset 0 1px 0 #ffffff25,0 4px 12px #0003}
.media-links{gap:12px;margin:22px 0 32px;align-items:stretch}.media-links a,.glass-link{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;gap:13px;min-height:66px;padding:11px 21px 11px 12px;border:1px solid var(--glass-border);border-radius:22px;background:var(--glass-bg);box-shadow:inset 0 1px 0 var(--glass-light),inset 0 -1px 0 #ffffff03,0 9px 25px #0003;color:#f4f2ed;font-size:14px;line-height:1.2;text-decoration:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .3s var(--ease-spring),background .25s,border-color .25s,box-shadow .3s;isolation:isolate;overflow:hidden}
.glass-link::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 10%,#ffffff0e 45%,transparent 75%);opacity:0;transform:translateX(-30%);transition:opacity .35s,transform .65s var(--ease-out)}
.link-mark{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid #ffffff13;border-radius:50%;background:#ffffff08;box-shadow:inset 0 1px 0 #ffffff12;color:#eddfca;transition:background .25s,transform .3s var(--ease-out)}.link-mark svg{display:block;width:19px;height:19px}.link-label{display:flex;flex-direction:column;gap:5px;white-space:nowrap}.link-label small{font-size:10px;letter-spacing:.2px;color:#bdc0c6;font-weight:400}
.all-work,.back,.menu-button,.pager button,.filters button,#flow-open,.video-caption>a,.photo-index>summary,footer small a{border:1px solid var(--glass-border);background:var(--glass-bg);box-shadow:inset 0 1px 0 #ffffff1a,0 7px 18px #0003;border-radius:999px;min-height:46px;padding:12px 20px;font-size:13px;color:#e8e7e4;transition:transform .25s var(--ease-spring),background .25s,border-color .25s,box-shadow .25s;text-decoration:none}
.video-caption>a,footer small a{display:inline-flex;align-items:center;justify-content:center}.video-caption>a{flex-shrink:0}.filters{padding:7px 3px 10px;gap:9px}.filters .chip{padding-inline:20px}.filters button.active{color:#f6e9d8;background:linear-gradient(145deg,#6d5c483b,#ffffff12);border-color:#e2bf8d6b;box-shadow:inset 0 1px 0 #ffffff25,0 3px 16px #0004}.view-toggle{padding-inline:22px!important}.photo-index>summary{width:max-content;list-style-position:inside;margin-bottom:24px}.photo-index[open]>summary{background:#ffffff12}.menu-panel{background:#101113f0!important;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}.menu-panel a{border-bottom:1px solid #ffffff12;padding:8px 0;min-height:44px}.menu-panel button{min-height:44px;padding:10px 20px;border-radius:30px;background:#ffffff10;border:1px solid #ffffff24}
.hero-select{background:#ffffff05;border:1px solid #ffffff15;box-shadow:inset 0 1px 0 #ffffff0d;gap:4px}.hero-select button{transition:background .3s,box-shadow .3s,transform .25s var(--ease-spring)}.hero-select button.selected{background:linear-gradient(145deg,#ffffff24,#ffffff0d);color:#f4e8d6;box-shadow:inset 0 1px 0 #ffffff35,0 4px 12px #0006}.hero-caption small{color:#bec0c6}
.reveal,.reveal:not(.visible){opacity:1;transform:none;transition:none}.project-card{transition:transform .45s var(--ease-out)}.project-card .image{border-radius:12px;transition:box-shadow .4s,border-color .4s}.project-card img{transition:transform .7s var(--ease-out)}.project-gallery>button{border-radius:14px;overflow:hidden;transition:box-shadow .35s,transform .4s var(--ease-out)}.project-gallery img{transition:transform .6s var(--ease-out)}.email{width:fit-content;color:#f3f1ed;transition:color .2s;text-decoration-thickness:1px;text-underline-offset:10px}.email:hover{text-decoration:underline;text-decoration-color:#e2bd8266;color:#f4dfbd}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #f0d7b1;outline-offset:5px}.glass-link:focus-visible{border-color:#f0d7b1}.route-focus:focus{outline:none}
@media(hover:hover) and (pointer:fine){header nav a:hover{color:white;background:#ffffff0d}header nav a:active{transform:scale(.97)}.glass-link:hover,.media-links a:hover{transform:translateY(-3px);background:linear-gradient(145deg,#ffffff20,#ffffff0b);border-color:#ffffff47;box-shadow:inset 0 1px 0 #ffffff32,0 15px 32px #0005}.glass-link:hover::after{opacity:1;transform:translateX(30%)}.glass-link:hover .link-mark{background:#ffffff12;transform:scale(1.04)}.all-work:hover,.back:hover,.pager button:hover,.filters button:hover,#flow-open:hover,.video-caption>a:hover,.photo-index>summary:hover,footer small a:hover{background:#ffffff12;border-color:#ffffff45;transform:translateY(-2px);color:#fff}.project-card:hover{transform:translateY(-5px)}.project-card:hover img{transform:scale(1.025)}.project-gallery>button:hover{transform:translateY(-3px);box-shadow:0 16px 32px #0006}.project-gallery>button:hover img{transform:scale(1.012)}}
.glass-link:active,.media-links a:active,.all-work:active,.back:active,.menu-button:active,.pager button:active,.filters button:active,#flow-open:active,.video-caption>a:active,.hero-select button:active{transform:scale(.97);box-shadow:inset 0 1px 4px #0005;transition-duration:.1s}
@media(hover:none){.project-card:hover,.project-card:hover img,.hero-link:hover img{transform:none}.project-card:active{transform:scale(.988)}.project-card:hover .image{box-shadow:0 20px 35px #0004}}
@media(min-width:801px){header{height:100px}.hero-shell .hero{border-radius:16px}.hero-shell{margin-inline:14px}}
@media(max-width:1100px) and (min-width:801px){header{padding-inline:25px}header nav a{padding-inline:11px;font-size:11px}}
@media(max-width:800px){html{scroll-padding-top:92px}header nav{display:none}.media-links{gap:10px}.media-links a,.glass-link{min-height:62px;padding:10px 17px 10px 10px;border-radius:20px;gap:10px;font-size:13px}.link-mark{width:36px;height:36px;flex-basis:36px}.link-label small{font-size:10px}.home-links .glass-link{flex:1 1 140px}.hero-shell .hero{border-radius:11px}.hero-caption{gap:10px}.hero-caption>a{min-width:0}.hero-caption strong{font-size:22px}.hero-caption small{font-size:11px}.hero-select{gap:0}.filters .chip{font-size:12px;padding-inline:18px}.video-caption>a{font-size:12px;padding-inline:17px}.project-card .image{border-radius:9px}.project-gallery>button{border-radius:10px}footer small a{font-size:11px;padding-inline:16px}.email{font-size:clamp(20px,6vw,29px)}}
/* Native View Transitions crossfade content while the navigation holds still. */
::view-transition-group(root){animation-duration:.34s}::view-transition-old(root){animation:page-leave .18s ease-out both}::view-transition-new(root){animation:page-arrive .38s var(--ease-out) both}header{view-transition-name:site-header}::view-transition-old(site-header),::view-transition-new(site-header){animation:none;mix-blend-mode:normal}::view-transition-old(site-header){display:none}::view-transition-group(site-header){animation-duration:0s}
@keyframes page-leave{to{opacity:0;transform:translateY(-4px)}}@keyframes page-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-transparency:reduce){header,.home header,.menu-panel{background:#111214!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.media-links a,.glass-link,.all-work,.back,.menu-button,.pager button,.filters button,#flow-open,.video-caption>a,.photo-index>summary,footer small a{background:#222428;backdrop-filter:none;-webkit-backdrop-filter:none}.glass-link::after{display:none}.hero-select,header nav{background:#18191c}}
@media(prefers-contrast:more){header nav,.media-links a,.glass-link,.all-work,.back,.menu-button,.pager button,.filters button,#flow-open,.video-caption>a,.photo-index>summary,footer small a{border-color:#b5b5b5}.link-label small,header nav a,.hero-caption small{color:#eee}.filters button.active,header nav a.active{outline:1px solid #eee}.link-mark{color:#fff}}
@media(forced-colors:active){.glass-link,.media-links a,.link-mark,.filters button,header nav a.active{border:1px solid ButtonText}.link-label small{color:LinkText}.glass-link::after{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.glass-link:hover,.media-links a:hover,.project-gallery>button:hover,.project-gallery>button:hover img,.project-card:hover,.project-card:hover img,.glass-link:active,.media-links a:active{transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.logo,.email{min-height:44px;display:inline-flex;align-items:center}.logo{min-width:44px}