:root{--base: #fbfbfd;--raised: #f0f0f3;--text: #1d1d1f;--muted: #6e6e73;--line: #d2d2d7;--accent: #06c;--on-accent: #fff;--mark: #f5b800;--shadow: 0 2px 6px #0000000f, 0 18px 40px #0000001f;--dim: color-mix(in srgb, var(--text) 22%, var(--base));--ease: cubic-bezier(.22, 1, .36, 1);--tile-dark: #141416;--paper: #fff;--hello-bg: var(--text);--hello-text: var(--base);--capsule-bg: color-mix(in srgb, var(--text) 9%, transparent);--capsule-shadow: inset 0 1px #ffffffe6, inset 0 -1px #0000000f, 0 2px 10px #0000001a;--sans: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", system-ui, sans-serif;--hand: "Caveat", "Bradley Hand", cursive;color-scheme:light}@media(prefers-color-scheme:dark){:root{--base: #000;--raised: #1c1c1e;--text: #f5f5f7;--muted: #a1a1a6;--line: #38383a;--accent: #2997ff;--mark: #ffd60a;--shadow: 0 2px 6px #0006, 0 18px 40px #00000080;--paper: #262624;--hello-bg: #1c1c1e;--hello-text: #f5f5f7;--capsule-bg: #ffffff24;--capsule-shadow: inset 0 1px #ffffff40, inset 0 -1px #ffffff0d, 0 2px 10px #0006;color-scheme:dark}.tile--job{background:var(--tile-dark)}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}html{background:var(--base)}html[data-hello]{overflow:hidden}body{background:var(--base);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}main{overflow-x:clip}a{color:inherit;text-decoration:none}img{display:block}.gutter{padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}.ph{display:grid;place-items:center;width:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--text) 18%,var(--base)),color-mix(in srgb,var(--text) 6%,var(--base)));color:var(--muted);font-size:13px;font-weight:500}.hello{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;background:var(--hello-bg);color:var(--hello-text);transition:transform 1s cubic-bezier(.37,0,.63,1)}.hello:after{content:"";position:absolute;top:100%;left:-10%;right:-10%;height:18vh;background:inherit;border-radius:0 0 50% 50%;transition:height 1s cubic-bezier(.37,0,.63,1)}.hello[data-phase=up]{transform:translateY(calc(-100% - 18vh))}.hello[data-phase=up]:after{height:0}.hello-word{font-size:clamp(36px,6vw,60px);font-weight:600;letter-spacing:-.03em;animation:hello-swap .16s var(--ease) both}.hello-word[data-first]{animation:hello-in .6s var(--ease) .1s both}@keyframes hello-in{0%{opacity:0;transform:translateY(10px)}}@keyframes hello-swap{0%{opacity:.25;filter:blur(3px);transform:translateY(4px)}}.about{position:relative;font-size:clamp(28px,1.6vw + 20px,60px)}.stage{position:sticky;top:0;height:100vh;margin-bottom:-100vh;pointer-events:none}.set{position:absolute;top:0;right:0;bottom:0;left:0}.prop{--pw: min(var(--w), calc(50vw - 4em) );position:absolute;top:var(--y);right:calc(50% + 7.4em + var(--x));width:var(--pw);margin:0;padding:calc(var(--pw) * .05) calc(var(--pw) * .05) calc(var(--pw) * var(--pb));background:var(--paper);box-shadow:var(--shadow);border-radius:3px;opacity:0;translate:0 -50%;rotate:calc(var(--r) * 2);transform:translate(var(--from, -80px),var(--from-y, 0px)) scale(.94);transition:opacity .45s ease,rotate .6s var(--ease),transform .6s var(--ease)}.prop[data-right]{right:auto;left:calc(50% + 7.4em + var(--x))}.prop img,.prop .ph,.snap img,.snap .ph{width:100%;aspect-ratio:var(--ar);object-fit:cover;filter:saturate(.9) contrast(.95)}.prop:after{content:"";position:absolute;inset:calc(var(--pw) * .05) calc(var(--pw) * .05) calc(var(--pw) * var(--pb));box-shadow:inset 0 0 0 1px #0000001a,inset 0 1px 4px #00000040;pointer-events:none}.set[data-in] .prop{opacity:1;rotate:var(--r);transform:none;pointer-events:auto;transition:opacity .7s ease var(--delay),rotate 1.1s var(--ease) var(--delay),transform 1.1s var(--ease) var(--delay),scale .45s var(--ease),box-shadow .45s var(--ease)}@media(hover:hover){.set[data-in] .prop:hover{z-index:2;rotate:0deg;scale:1.04;box-shadow:0 4px 10px #00000014,0 28px 60px #0000002e;transition:rotate .45s var(--ease),scale .45s var(--ease),box-shadow .45s var(--ease)}}.copy{position:relative;max-width:12em;margin-inline:auto;padding-block:50vh;text-align:center}.copy p{margin:0 0 .9em;font-weight:600;line-height:1.1;letter-spacing:-.028em;text-wrap:balance;color:var(--dim);scroll-snap-align:center;scroll-snap-stop:always;transition:color .5s}.copy p[data-on]{color:var(--text)}.keep{white-space:nowrap}.blur{filter:blur(.14em);cursor:help;outline:none;transition:filter .45s var(--ease)}.blur:hover,.blur:focus{filter:blur(0)}.mark{position:relative;display:inline-block;white-space:nowrap}.stroke{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.3em;overflow:visible;pointer-events:none;opacity:0;transition:opacity .5s}.stroke[data-kind=double]{height:.46em;bottom:-.34em}.stroke[data-kind=circle]{width:calc(100% + .84em);height:calc(100% + .24em);top:-.1em;bottom:auto;left:-.42em}.stroke path{fill:none;stroke:var(--mark);stroke-width:2.6px;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:-1px;animation:erase .45s both}.copy p[data-on] .stroke{opacity:1;transition:opacity .3s .25s}.copy p[data-on] .stroke path{animation:draw .8s cubic-bezier(.5,0,.3,1) .25s both}.copy p[data-on] .stroke[data-kind=circle] path{animation-duration:1.1s}.copy p[data-on] .stroke path:nth-child(2){animation-delay:.85s}@keyframes draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes erase{0%{stroke-dashoffset:0}to{stroke-dashoffset:-1px}}.note{position:absolute;display:flex;align-items:center;gap:4px;font-family:var(--hand);font-size:.45em;font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;color:var(--mark);opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .25s,clip-path 0s linear .25s}.copy p[data-on] .mark--noted:hover .note:not([data-cramped]){opacity:1;clip-path:inset(-.2em);transition:opacity .1s,clip-path .9s cubic-bezier(.4,0,.3,1)}.mark--noted[data-written] .note{clip-path:inset(-.2em);transition:opacity .3s}.note[data-place=right]{top:50%;left:calc(100% + .7em);translate:0 -50%;rotate:-3deg}.note[data-place=left]{top:50%;right:calc(100% + .7em);translate:0 -50%;rotate:3deg}.note svg{flex:none;width:1.3em;height:1em;overflow:visible}.note path,.aside path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.note[data-place=right] svg{scale:-1 1}.note[data-place=top]{bottom:calc(100% + .2em);left:50%;translate:-50% 0;rotate:-3deg;flex-direction:column;gap:0}.note[data-place=top] svg{rotate:90deg;width:1em}.snaps{display:none}.work{display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:3vh}.heading{margin:0;font-size:clamp(34px,3vw + 18px,60px);font-weight:600;letter-spacing:-.035em;text-align:center}.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;width:min(1120px,100%)}.tile{position:relative;grid-column:span 6;min-width:0;overflow:hidden;border-radius:28px;box-shadow:0 0 #0000;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}.tile--media{grid-column:span 5;display:flex;flex-direction:column;background:var(--tile-dark);color:#f5f5f7}.tile--media[data-wide]{grid-column:span 7}.tile-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:34px 34px 0}.tile-text h3{margin:0;font-size:clamp(36px,2.4vw + 18px,56px);font-weight:700;line-height:1;letter-spacing:-.04em}.tile-text p{margin:0;max-width:34ch;font-size:17px;line-height:1.45;color:#f5f5f7b3}.go{margin-top:4px;font-size:17px;font-weight:500;color:#2997ff}.go span{display:inline-block;transition:transform .4s var(--ease)}.tile-img{position:relative;z-index:1;margin-top:auto;padding:28px 0 0 34px}.tile-img>*{width:100%;height:clamp(200px,27vh,300px);object-fit:cover;object-position:left top;transform-origin:0 0;transition:transform .9s var(--ease);-webkit-mask-image:linear-gradient(90deg,#0000,#000 14%),linear-gradient(#0000,#000 18%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000,#000 14%),linear-gradient(#0000,#000 18%);mask-composite:intersect}.tile-img .ph{background:linear-gradient(135deg,#2a3a55,#16161a);color:#8a8f99}.tile-img--full{padding:28px 0 0}.tile-img--full>*{height:auto;-webkit-mask-image:none;mask-image:none}.tile--full{grid-column:1 / -1}.tile--media .tile-text:last-child{padding-bottom:34px}@media(hover:hover){.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000014}.tile--media:hover .tile-img>*{transform:translateY(-4px) scale(1.01)}.tile--media:hover .go span{transform:translate(3px)}}.tile--media:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.tile--job{display:flex;flex-direction:column;gap:18px;padding:28px;background:var(--raised)}.tile--job[data-photo]{padding-right:calc(34% + 12px)}.tile--job[data-photo]>*{position:relative;z-index:1}.tile--job[data-photo]>.job-photo{position:absolute;inset:0 0 0 auto;z-index:0;width:40%}.job-photo>*{width:100%;height:100%;object-fit:cover;object-position:45% 45%;-webkit-mask:linear-gradient(90deg,#0000,#000 35%);mask:linear-gradient(90deg,#0000,#000 35%)}.tile--job[data-photo]>.job-photo--logo{inset:24px 24px 24px auto;width:calc(34% - 24px);display:grid;place-items:center;padding:20px 28px;border-radius:18px;background:#fff}.job-photo--logo>*{height:auto;max-height:100%;object-fit:contain;-webkit-mask:none;mask:none}.job-head{display:flex;align-items:center;gap:14px}.job-head>img,.job-head>.ph{flex:none;width:64px;height:64px;border-radius:16px;object-fit:cover}.job-head .ph{font-size:22px;font-weight:700}.job-name{font-size:24px;font-weight:600;letter-spacing:-.02em}.job-role{margin-top:2px;font-size:16px;color:var(--muted)}.job-detail{margin:0;font-size:17px;line-height:1.45}.job-when{display:flex;align-items:center;gap:12px}.when{flex:none;font-size:13px;color:var(--muted)}.aside{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--hand);font-size:22px;font-weight:500;line-height:1;color:var(--mark);transform:rotate(-2deg)}.aside svg{flex:none;width:34px;height:20px;overflow:visible}.contact{display:flex;flex-direction:column;justify-content:center;min-height:100vh;text-align:center;scroll-snap-align:center}.contact h2{margin:0 0 28px;font-size:clamp(36px,4vw + 14px,72px);font-weight:600;letter-spacing:-.035em}.script{display:inline-block;width:auto;height:1.5em;margin:0 .06em;vertical-align:-.5em;overflow:visible}.script path{fill:none;stroke:var(--text);stroke-width:15px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1px;transition:stroke-dashoffset 2.8s cubic-bezier(.45,.05,.35,1) .3s}.script[data-written] path{stroke-dashoffset:0}.script[data-word=en]{height:1.16em;vertical-align:-.2em}.links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px}.links a{padding:12px 14px;border-radius:999px;font-size:17px;font-weight:500;color:var(--muted);transition:color .2s}.links a:hover{color:var(--text)}.links a:first-child{margin-right:10px;padding:12px 22px;background:var(--accent);color:var(--on-accent);transition:background .2s}.links a:first-child:hover{background:var(--text);color:var(--base)}footer{display:flex;justify-content:center;align-items:center;gap:12px;padding-bottom:120px;font-size:13px;color:var(--muted);scroll-snap-align:end}footer .logo img{width:28px;height:28px;image-rendering:pixelated}html[data-lang=en] [data-pl],html[data-lang=pl] [data-en]{display:none!important}.lang{position:fixed;z-index:30;top:calc(16px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--base) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.lang button{display:flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 13px var(--sans);cursor:pointer;transition:color .25s,background .25s}.lang button:hover{color:var(--text)}.lang button[aria-pressed=true]{color:var(--text);background:var(--capsule-bg);box-shadow:var(--capsule-shadow)}.lang svg{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px #0000001f}.lang button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dock{position:fixed;z-index:30;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%);display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--base) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);font-size:14px;font-weight:500}.dock a{position:relative;z-index:1;padding:7px 14px;border-radius:999px;color:var(--muted);white-space:nowrap;transition:color .3s}.dock a[aria-current]{color:var(--text)}.capsule{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--capsule-bg);-webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%);box-shadow:var(--capsule-shadow);pointer-events:none}.capsule[data-dir=right]{transition:right .35s cubic-bezier(.3,1.4,.5,1),left .55s cubic-bezier(.3,1.25,.5,1) 60ms}.capsule[data-dir=left]{transition:left .35s cubic-bezier(.3,1.4,.5,1),right .55s cubic-bezier(.3,1.25,.5,1) 60ms}a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:900px){html{scroll-snap-type:y proximity}.stage{display:none}.copy{padding-block:18vh 12vh}.snaps{display:flex;justify-content:center;align-items:center;margin:1.6em 0 .7em}.snap{--pw: 34vw;width:var(--pw);margin:0 -2.5vw;padding:calc(var(--pw) * .05) calc(var(--pw) * .05) calc(var(--pw) * var(--pb));background:var(--paper);box-shadow:var(--shadow);border-radius:3px;rotate:var(--r);opacity:.35;scale:.95;transition:opacity .5s ease,scale .6s var(--ease)}.snaps[data-on] .snap{opacity:1;scale:1}}@media(max-width:860px){.tile,.tile--media,.tile--media[data-wide]{grid-column:1 / -1}.tile--job[data-photo]{padding-top:188px;padding-right:28px}.tile--job[data-photo]>.job-photo{inset:0 0 auto;width:auto;height:170px}.job-photo>*{-webkit-mask:linear-gradient(#000 55%,#0000);mask:linear-gradient(#000 55%,#0000)}.tile--job[data-photo]{padding-top:148px}.tile--job[data-photo]>.job-photo--logo{inset:20px 20px auto;width:auto;height:108px}.job-photo--logo>*{-webkit-mask:none;mask:none}.job-when{flex-direction:column;align-items:flex-start;gap:6px}.aside svg{rotate:50deg}}@media(hover:none){.note{display:none}}@media(prefers-reduced-motion:reduce){.hello{display:none}.copy p,.prop,.stroke,.note,.tile,.tile-img>*,.go span,.capsule{transition:none!important}.stroke path{animation:none!important}.copy p[data-on] .stroke path{stroke-dashoffset:0}.script path{stroke-dashoffset:0;transition:none}}
