*{box-sizing:border-box;margin:0}:root{--pad-l:max(16px, env(safe-area-inset-left));--pad-r:max(16px, env(safe-area-inset-right))}body{color:#222;padding:0 var(--pad-r) env(safe-area-inset-bottom) var(--pad-l);-webkit-tap-highlight-color:transparent;background:#fff;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}header{z-index:1;margin-inline:calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));padding:calc(8px + env(safe-area-inset-top,0px)) var(--pad-r) 8px var(--pad-l);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffbf;border-bottom:1px solid #00000014;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 24px;display:flex;position:sticky;top:0}.name{text-transform:uppercase;letter-spacing:.2em;font-weight:600;text-decoration:none}header nav{align-items:center;gap:16px;width:100%;font-size:14px;display:flex}.nav-end{align-items:center;gap:12px;margin-left:auto;display:flex}.nav-end .icon-btn{color:inherit;margin-block:-4px}header nav a{text-decoration:none}section{scroll-margin-top:calc(65px + env(safe-area-inset-top,0px));padding-block:24px}h2{text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-size:14px;font-weight:600}#about p,#contact p{max-width:60ch}.filters{flex-wrap:wrap;gap:0 16px;margin-bottom:12px;font-size:14px;display:flex}.filters button{color:#888;padding-block:4px}.filters button[aria-pressed=true]{color:#222;text-underline-offset:4px;text-decoration:underline}.gallery{margin-inline:calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));gap:4px;display:grid;container-type:inline-size}.gallery button{--frame:8px;height:calc((100cqw - 2 * var(--frame)) / var(--r) + 2 * var(--frame));background:#f5f5f5;position:relative;overflow:hidden;container-type:size}.gallery img{object-fit:contain;padding:var(--frame);opacity:0}.gallery img.loaded{opacity:1;animation:.2s fade-in}html:has(.viewer[open]){overflow:hidden}.viewer{background:#fff;border:0;width:100%;max-width:none;height:100%;max-height:none;padding:16px}.viewer[open]{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.viewer .stage{touch-action:none;cursor:zoom-in;flex:1;width:100%;min-height:0;position:relative;overflow:hidden;container-type:size}.viewer .stage.zoomed{cursor:grab}.viewer .stage.zoomed:active{cursor:grabbing}.viewer img{object-fit:contain;transform-origin:0 0;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.viewer .stage.animate img{transition:transform .15s}.viewer img{opacity:0}.viewer img.loaded{opacity:1;transition:opacity .2s}.viewer .stage.animate img.loaded{transition:transform .15s,opacity .2s}.viewer .stage .hd{position:absolute;inset:0}.skeleton{width:min(100cqw, 100cqh * var(--r));aspect-ratio:var(--r);background:#f5f5f5 linear-gradient(90deg,#f5f5f5 30%,#fafafa 50%,#f5f5f5 70%) 0 0/300% 100%;margin:auto;animation:1.4s linear infinite shimmer;position:absolute;inset:0}.gallery .skeleton{width:min(100cqw - 2 * var(--frame), (100cqh - 2 * var(--frame)) * var(--r));background:#e8e8e8 linear-gradient(90deg,#e8e8e8 30%,#f2f2f2 50%,#e8e8e8 70%) 0 0/300% 100%}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}.viewer p{text-align:center;font-size:14px}.viewer nav{gap:24px;font-size:14px;display:flex}.contact{gap:32px;display:grid}.contact p{align-items:center;gap:8px;margin-bottom:8px;display:flex}.contact a{align-items:center;gap:8px;text-decoration:none;display:inline-flex}.icon-btn{color:#888;padding:4px;display:inline-flex}.contact form{gap:12px;max-width:32rem;display:grid}.contact label{gap:4px;font-size:14px;display:grid}.contact input,.contact textarea{font:inherit;border:1px solid #ccc;border-radius:0;width:100%;padding:8px}.outline{border:1px solid #222;justify-self:start;padding:4px 12px;font-size:14px}.outline:disabled{opacity:.5}.to-top{bottom:calc(12px + env(safe-area-inset-bottom,0px));right:calc(12px + env(safe-area-inset-right,0px));background:#fff;border:1px solid #ccc;border-radius:50%;place-items:center;width:32px;height:32px;animation:.2s fade-in;display:grid;position:fixed}@keyframes fade-in{0%{opacity:0}}footer{color:#888;padding-block:32px;font-size:12px}@media (hover:hover) and (pointer:fine){header nav a:hover,header nav button:hover{text-decoration:underline}.filters button:hover{color:#222}.gallery button:hover img{opacity:.85}.contact a:hover{text-decoration:underline}.icon-btn:hover{color:#222}.to-top:hover{border-color:#222}}@media (min-width:600px){:root{--pad-l:max(32px, env(safe-area-inset-left));--pad-r:max(32px, env(safe-area-inset-right))}header{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px}header nav{width:auto}.nav-end{margin-left:0}section{scroll-margin-top:calc(59px + env(safe-area-inset-top,0px))}.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;grid-auto-flow:dense;gap:24px;margin-inline:0}.gallery button{--frame:6cqw;aspect-ratio:3/4;height:auto}.gallery .wide{aspect-ratio:auto;grid-column:span 2}.contact{grid-template-columns:1fr 1fr}}@media (min-width:1000px){:root{--pad-l:max(48px, 50vw - 652px);--pad-r:max(48px, 50vw - 652px)}.gallery{grid-template-columns:repeat(3,1fr)}section{padding-block:40px}}
