@font-face{font-family:Portfolio Narrow;src:url('assets/fonts/arial-narrow-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:block}
:root{--page-color:#828282;--scene-height:100svh;--runway:240px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--page-color);scrollbar-width:none;overscroll-behavior-y:none}html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--page-color);font-family:Portfolio Narrow,'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-stretch:condensed;font-size:15px;font-weight:700;line-height:16px;color:#000;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,h1,button{margin:0;font:inherit}img{display:block}button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid #04f;outline-offset:-12px}
.scroll-track{height:calc(var(--scene-height) + var(--runway))}.scene{height:var(--scene-height);position:sticky;top:0;overflow:hidden;isolation:isolate;background:#929292}
.home{position:absolute;inset:0;background:#828282 url('assets/texture.png') repeat;background-size:264px 264px}
.home-header{position:absolute;inset:var(--safe-top) 24px auto;display:grid;grid-template-columns:calc((100vw - 224px)/4 - 57.5px) calc((100vw - 224px)/4 + 57.5px) 176px 1fr;align-items:start;padding-top:8px;z-index:1}
.home-header{opacity:.8}
.home-header h1,.intro{white-space:nowrap}.founder{display:flex;align-items:center;gap:3px;height:16px}.feral{width:33px;height:14px}.arrow{margin-left:-3px}.home-header nav{grid-column:4;display:flex;justify-content:flex-end;gap:70px}.mobile-menu{display:none}
.sticker{position:absolute;left:4.68%;top:70.73%;width:12.963%;height:auto;transform:rotate(1deg);filter:drop-shadow(1px 1px 1px #0002)}
.dark-curtain{position:absolute;z-index:2;top:0;left:-5%;width:110%;height:calc(var(--scene-height) + 100px);background:none;transform:translate3d(0,calc(var(--scene-height) - 30px),0);will-change:transform;pointer-events:none}
.project{position:absolute;inset:0;z-index:3;color:#949286;pointer-events:none}.first-project{visibility:hidden}.floor{height:var(--scene-height);position:relative;overflow:hidden;background:#000;color:#949286;isolation:isolate}.floor.project{inset:auto;pointer-events:auto}
.project-visual,.slide{position:absolute;inset:0;overflow:hidden}.first-project .project-visual{will-change:transform}.slide[hidden]{display:none}.composition{position:absolute;left:50%;top:50%;width:1728px;height:1117px;transform-origin:0 0}.art-layer{position:absolute;object-fit:cover;pointer-events:none;user-select:none}.slide-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.project-meta{position:absolute;top:calc(var(--safe-top) + 8px);left:24px;width:calc((100% - 224px)/4 - 8px);display:flex;justify-content:center;gap:24px;white-space:nowrap;z-index:4;pointer-events:none;mix-blend-mode:difference}
.info{display:none}.counter{position:absolute;right:24px;top:calc(var(--safe-top) + 8px);width:calc((100% - 224px)/4);text-align:center;z-index:4;mix-blend-mode:difference;pointer-events:none}
.eyes{position:fixed;z-index:20;top:var(--safe-top);left:50%;transform:translateX(-50%);width:176px;height:40px;object-fit:fill;pointer-events:none}.selected{position:fixed;z-index:20;top:0;left:50%;transform:translate3d(-50%,calc(var(--scene-height) - 62px - var(--safe-bottom)),0);white-space:nowrap;text-align:center;will-change:transform,color;pointer-events:none}
.gallery-hit{position:absolute;z-index:3;top:0;bottom:0;width:50%;border:0;padding:0;background:transparent;color:transparent;cursor:none}.gallery-hit.prev{left:0}.gallery-hit.next{right:0}.gallery-cursor{position:fixed;left:0;top:0;z-index:30;color:#e3e3e3;mix-blend-mode:difference;pointer-events:none;visibility:hidden;transform:translate(14px,12px)}
.client-list{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:266px;text-align:center}.client-list ul{display:flex;flex-direction:column;gap:24px;padding:0;margin:48px 0 0;list-style:none}.copyright{position:absolute;left:0;right:0;bottom:calc(var(--safe-bottom) + 16px);text-align:center}
.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}
@media(max-width:1100px) and (min-width:901px){.home-header{grid-template-columns:1fr 1.4fr 144px 1.7fr;inset-inline:16px}.home-header nav{gap:24px}.eyes{width:144px;height:32.727px}.project-meta{left:16px;gap:14px;width:auto}.counter{right:16px;width:100px}}
@media(max-width:900px){body{font-size:14px}.home-header{inset:0;display:block;padding:0}.home-header h1{position:absolute;top:calc(var(--safe-top) + 8px);left:8px}.intro{position:absolute;top:calc(var(--safe-top) + var(--scene-height)*.204106);left:16px}.home-header nav{display:none}.arrow{display:none}.mobile-menu{position:absolute;display:flex;gap:3px;align-items:center;right:11px;top:calc(var(--safe-top) + 8px)}.sticker{left:42.66%;top:73.183%;width:43.173%;height:auto}.eyes{width:min(144px,36vw);height:auto;aspect-ratio:4.5}.selected{transform:translate3d(-50%,calc(var(--scene-height) - 62px - var(--safe-bottom)),0)}.dark-curtain{transform:translate3d(0,calc(var(--scene-height) - 30px),0)}.project-meta{left:0;right:0;top:auto;bottom:calc(var(--safe-bottom) + 16px);width:100%;padding:8px 8px 0;gap:clamp(12px,4vw,24px)}.counter{display:none;top:auto;bottom:calc(var(--safe-bottom) + 10px);right:0;width:100%;font-size:12px;line-height:14px}.gallery-cursor{display:none}.gallery-hit{cursor:pointer}}
@media(prefers-reduced-motion:reduce){.dark-curtain,.project-visual,.selected{will-change:auto}}
/* Shared page navigation and the two editorial pages. */
a{color:inherit;text-decoration:none}a:focus-visible,.mobile-menu:focus-visible,.menu-close:focus-visible{outline:1px solid currentColor;outline-offset:4px}a:hover{text-decoration:none}.mobile-menu{border:0;padding:0;background:none;color:inherit;cursor:pointer}
.inner-page{position:relative;min-height:100svh}.inner-page .home-header{opacity:1}.home-eyes .eyes{pointer-events:auto}.about-photo{position:absolute;inset:0;overflow:hidden;z-index:0}.about-photo img{position:absolute;top:-.537vw;left:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:50% 0}.about-content{position:relative;padding-top:calc(var(--safe-top) + 136px);margin-left:24px;width:267px;padding-bottom:32px}.socials{display:flex;gap:16px;margin-top:218px}.page-services{color:#949286;padding-bottom:80px}.services-content{display:grid;grid-template-columns:repeat(3,267px);gap:16px;padding-top:calc(var(--safe-top) + 136px);margin-left:24px}.services-content h2{font:inherit;margin:0 0 58px;text-align:center}.page-services .feral,.page-services .arrow,.page-services .mobile-menu img{filter:invert(59%) sepia(7%) saturate(489%) hue-rotate(12deg) brightness(94%) contrast(88%)}
.menu-open{overflow:hidden}.site-menu{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;padding:72px 24px;background:#000;color:#949286;font:inherit}.site-menu::backdrop{background:#000}.site-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:32px}.site-menu a[aria-current]{text-decoration:underline;text-underline-offset:4px}.menu-close{position:absolute;top:calc(var(--safe-top) + 8px);right:11px;background:none;border:0;padding:0;color:inherit;cursor:pointer}
@media(max-width:900px){.inner-page .intro{display:none}.about-content{padding-top:calc(var(--safe-top) + 72px);margin-left:8px;max-width:calc(100% - 16px)}.socials{margin-top:32px}.about-photo img{width:1128px;max-width:none;height:1026px;min-height:100%;top:-99px;left:50%;transform:translateX(-50%);object-fit:cover}.services-content{display:flex;flex-direction:column;gap:64px;margin-left:8px;padding-top:calc(var(--safe-top) + 72px);width:267px;max-width:calc(100% - 16px)}.services-content h2{margin-bottom:32px}.page-services{min-height:max(100svh,1132px)}.page-services .copyright{font-size:15px}}
.home-eyes{position:fixed;z-index:20;top:var(--safe-top);left:50%;transform:translateX(-50%);width:176px;height:40px}.home-eyes .eyes{position:static;transform:none;width:100%;height:100%}@media(max-width:1100px){.home-eyes{width:144px;height:32.727px}}@media(max-width:900px){.home-eyes{width:min(144px,36vw);height:auto;aspect-ratio:4.5}}

video.art-layer{object-fit:contain}.eyes-video{display:block;overflow:hidden;isolation:isolate}.eyes-video video{display:block;width:100%;height:100%;object-fit:cover}.eyes-tint{position:absolute;inset:0;background:#04f;mix-blend-mode:hard-light;pointer-events:none}

.eyes-home{position:fixed;z-index:21;top:var(--safe-top);left:50%;transform:translateX(-50%);width:176px;height:40px;padding:0;border:0;background:none;cursor:pointer}.eyes-home .eyes{position:relative;top:0;left:0;transform:none;width:100%;height:100%}.eyes-home:focus-visible{outline:1px solid #04f;outline-offset:3px}@media(max-width:1100px){.eyes-home{width:144px;height:32.727px}}@media(max-width:900px){.eyes-home{width:min(144px,36vw);height:auto;aspect-ratio:4.5}}

.dark-curtain::before{content:"";position:absolute;inset:0;background:#000;filter:blur(var(--curtain-blur,10px));transform:rotate(-.21deg) skewX(-.03deg);transform-origin:50% 0}

/* Preserve the fine raster grain instead of smoothing it when zoomed. */
.home{image-rendering:pixelated}.home>*{image-rendering:auto}
.about-photo img{top:0;height:100%;object-fit:cover;object-position:center}
@media(max-width:900px){.about-photo img{width:auto;height:1026px;min-width:100%;min-height:100%;top:-99px;object-fit:cover}}

.feral-link{position:relative;display:block;flex-shrink:0;width:33px;height:16px;overflow:hidden}.feral-link .feral{position:absolute;left:.5px;top:1.5px;width:32.8393px;height:11.8558px}

.feral-link,.feral-link *,a[href="mailto:vlad.luknk@gmail.com"]{cursor:alias}

/* Project captions stay anchored while the artwork moves between floors. */
.fixed-project-meta,.fixed-project-counter{position:fixed;z-index:22;color:#949285;opacity:0;filter:blur(3px);transition:opacity 180ms ease,filter 240ms ease;pointer-events:none}
.fixed-project-meta.is-current,.fixed-project-counter.is-current{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.fixed-project-meta,.fixed-project-counter{transition:none;filter:none}}
/* Mobile navigation from the updated Figma frames. */
.mobile-masthead{display:none}
@media(max-width:900px){
 .home-header{opacity:1}.home-header h1{display:none}
 .mobile-masthead{display:block;position:fixed;inset:var(--safe-top) 0 auto;height:70px;z-index:25;color:#000;pointer-events:none}
 .mobile-masthead a,.mobile-masthead button{pointer-events:auto}
 .mobile-first-name,.mobile-last-name{position:absolute;top:8px;font-size:14px;line-height:16px}.mobile-first-name{left:16px}.mobile-last-name{right:12px}
 .mobile-menu{left:50%;right:auto;top:32px;transform:translateX(-50%);width:48px;height:34px;justify-content:center;padding:10px 5px}
 .mobile-menu img{width:38px;height:14px}
 .eyes-home,.home-eyes{width:144px;height:32px;aspect-ratio:auto}
 .intro{top:calc(var(--safe-top) + var(--scene-height)*.204106);left:16px}
 .intro .feral-link{width:30.07px;height:16px}.intro .feral-link .feral{content:url('assets/feral-mobile.svg');width:30.07px;height:10.856px;left:0;top:2.572px}
 html[data-floor]:not([data-floor="0"]) .mobile-masthead{color:#949285;mix-blend-mode:difference}
 html[data-floor]:not([data-floor="0"]) .mobile-menu img,.inner-page .mobile-menu img{filter:invert(59%) sepia(7%) saturate(489%) hue-rotate(12deg) brightness(94%) contrast(88%)}
 .inner-page .mobile-masthead{color:#949285;mix-blend-mode:difference}
 .fixed-project-meta{bottom:calc(var(--safe-bottom) + 16px)}
 .selected{transform:translate3d(-50%,calc(var(--scene-height) - 90px - var(--safe-bottom)),0)}
 .dark-curtain{transform:translate3d(0,calc(var(--scene-height) - 62px),0)}
}
.site-menu{padding:0;color:#949285;background:#000;overflow:auto;animation:menu-reveal 220ms ease both}
.site-menu::backdrop{background:transparent}
.site-menu nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center;gap:32px;font-size:15px;line-height:16px;white-space:nowrap;animation:menu-links 260ms ease both}
.site-menu a[aria-current]{text-decoration:none}
.dialog-masthead{position:absolute;inset:var(--safe-top) 0 auto;height:70px}
.menu-close{left:50%;right:auto;top:34px;transform:translateX(-50%);width:48px;height:34px;display:flex;align-items:center;justify-content:center;padding:10px 5px}
.site-menu.is-closing{animation:menu-hide 180ms ease both}
.site-menu.is-closing nav{animation:none}
@keyframes menu-reveal{from{opacity:0}to{opacity:1}}
@keyframes menu-links{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes menu-hide{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.site-menu,.site-menu nav,.site-menu.is-closing{animation:none}}

@media(max-width:900px){.page-about .about-photo img{width:1128px;height:1026px;min-width:0;min-height:0;max-width:none;left:50%;top:-99px;transform:translateX(-50%);object-fit:fill}}

@media(max-width:900px){
 .dark-curtain{transform:translate3d(0,calc(var(--scene-height) + 40px),0)}
 .intro{top:calc(var(--safe-top) + var(--scene-height)*.35744);font-size:15px}
 .sticker{left:51.25%;top:76.77%;width:43.173%}
 .selected{transform:translate3d(-50%,calc(var(--scene-height) - 39px - var(--safe-bottom)),0)}
}

@media(max-width:900px){.scene{background-color:var(--page-color)}}

/* Mobile browser edges follow the page canvas, not a cached full-screen sticky layer. */
@media(max-width:900px){
 .scene{position:relative;top:auto;transform:translateY(min(var(--page-scroll,0px),var(--runway)))}
 .mobile-masthead{position:fixed;top:var(--safe-top)}
 .fixed-project-meta{position:fixed;top:auto;bottom:calc(var(--safe-bottom) + 16px)}
 .site-menu{position:fixed;top:0;bottom:0;height:100%}
}

/* Gesture ownership must be declared before iOS starts a native pan. Pinch zoom remains available. */
@media(max-width:900px){
 body:not(.inner-page){touch-action:pinch-zoom}
 .site-menu{touch-action:pan-y pinch-zoom}
}
/* Safari may show :focus-visible after dialog autofocus even for a finger tap. */
html:not(.keyboard-input) :is(a,button):focus{outline:none}

@media(max-width:900px){.dark-curtain{display:none}.first-project{background:#000}}
