*,*:before,*:after{box-sizing:border-box}*,html,body{margin:0;padding:0;border:0}html,body{height:100%}body{line-height:1.25;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block}input,button,textarea,select{font:inherit;color:inherit}button{background:none;cursor:pointer}a{text-decoration:none;color:inherit}ul,ol{list-style:none}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin-bottom:1rem}table{width:100%;border-collapse:collapse}th,td{padding:.5rem;text-align:left}#root,#__next{isolation:isolate}@media(prefers-reduced-motion:reduce){*{animation:none;transition:none;scroll-behavior:auto}}@function --fluid-size(--pixel-size <number>,--viewport-width <number>: 1920){ --as-px: calc(var(--pixel-size) * 1px); --as-vw: calc((var(--pixel-size) / var(--viewport-width)) * 100vw); result: max(var(--as-px), var(--as-vw)); }:root{--font-family: "Space Grotesk"}h1,h2,h3,h4,h5,h6,p,a,.footer-tagline,.footer-location{font-size:--fluid-size(20);font-weight:400;margin:0}a:focus-visible,.projects-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}body{font-family:var(--font-family);font-size:--fluid-size(20);text-transform:uppercase;font-weight:400;display:flex;flex-direction:column;justify-content:space-between;width:100vw;min-height:100vh;gap:--fluid-size(40)}nav,footer{display:flex;padding:--fluid-size(20);justify-content:space-between}@media screen and (max-width:920px){nav,footer{flex-direction:column;gap:--fluid-size(10);align-items:center}}@media(hover:hover){nav a{position:relative}nav a:after{content:"";position:absolute;width:100%;height:--fluid-size(.8);bottom:--fluid-size(-1);left:0;transform-origin:center right;transition:transform .8s cubic-bezier(.22,1,.36,1);background:currentColor;transform:scaleX(0)}nav a:hover:after{transform:scale(1);transform-origin:center left}}.projects{position:relative;display:flex;justify-content:center}.projects-list{position:relative;display:flex;flex-direction:column;overflow:hidden;width:100%}.projects-list:after{content:"";position:absolute;width:100vw;height:--fluid-size(35);top:0;background-color:#000;z-index:-1;clip-path:inset(0 0 100% 0);transition:background-color .2s ease,clip-path .4s ease,transform .4s ease .4s}@media(hover:hover){.projects-list:after{transform:translateY(calc(var(--hovered-link) * 100%))}}.projects-list[data-disabled=true]:after{background-color:silver}@media(hover:hover){.projects-list:hover:after{clip-path:inset(0 0 0 0);transition:clip-path .4s ease,transform .4s ease-out}}.projects-link{display:grid;grid-template-columns:--fluid-size(30) 1fr 1fr --fluid-size(70);align-items:center;gap:--fluid-size(10);padding-inline:--fluid-size(20);height:--fluid-size(35);font-weight:500;color:#2b2b2b;transition:color .4s ease}@media screen and (max-width:920px){.projects-link{grid-template-columns:--fluid-size(30) 1fr --fluid-size(70);height:auto;align-items:start;padding-block:--fluid-size(5)}}.projects-link[data-disabled=true]{color:#767676}@media(hover:hover){.projects-link:hover{color:#fff}}.projects-link[data-disabled=true]{opacity:.75;cursor:not-allowed}.projects-link[data-disabled=true]:hover{opacity:1}.projects-tech{text-align:right;padding-right:15px}@media screen and (max-width:920px){.projects-tech{display:none}}.projects-images{clip-path:inset(0 0 100% 0);position:absolute;top:calc(-50% - (--fluid-size(35)/2));transform:translateY(calc(var(--hovered-link) * --fluid-size(35)));overflow:hidden;transition:clip-path .7s ease,transform .4s ease;width:26.6666666667vw;aspect-ratio:16 / 9;pointer-events:none}@media(hover:hover){.projects:hover .projects-images{clip-path:inset(0 0 0 0);transition:clip-path .8s ease,transform .4s ease}}.projects:has(.projects-link:focus-visible) .projects-images{clip-path:inset(0 0 0 0)}.projects:has(.projects-link:focus-visible) .projects-list:after{clip-path:inset(0 0 0 0)}@media(hover:hover){.projects:has(.projects-link:focus-visible) .projects-list:after{transform:translateY(calc(var(--hovered-link) * 100%))}.projects:has(.projects-link:focus-visible) .projects-link:focus-visible{color:#fff}}.projects-images-wrapper{transform:translateY(calc(var(--hovered-link) * -15vw));transition:transform .7s ease}.projects-images img{position:relative;width:100%;height:auto;aspect-ratio:16 / 9}