:root{--portfolio-yellow:#ffec52}html{scroll-snap-type:y proximity}.yellow-target,.header .yellow-bar{display:none}.header-visual{isolation:isolate}.header-visual:before{display:none}.yellow-portrait{--yellow-angle:-39;background:var(--portfolio-yellow);z-index:-1;width:65%;height:115%;display:block;position:absolute;top:-7.5%;left:17.5%;rotate:-39deg}#portfolio .project figcaption,#portfolio .project figcaption:before,#portfolio .project figcaption:after{translate:none}#portfolio .project{overflow:clip}#portfolio .project,#portfolio #hobbys,#portfolio #life,#portfolio #worked-for,#portfolio #contact,#portfolio .projects-recap{scroll-snap-stop:normal;min-height:100svh}.header{scroll-snap-stop:normal}.header:after{pointer-events:none}.scroll-cue{display:none}.references .reference{font-size:clamp(.75rem,1.7svh,1rem)}.project figcaption{line-height:1.25}.project figcaption:before,.project figcaption:after{top:0;bottom:0}.project figcaption a{color:inherit;text-decoration:none}.project figcaption a:hover{text-underline-offset:.2em;text-decoration:underline}.peakpals-details{justify-content:center;gap:20px;margin:0;padding:20px 0;list-style:none;display:flex}.peakpals-details li{width:min(24vw,180px)}.peakpals-details img{width:100%;height:auto;display:block}.peakpals .peakpals-details .mobile{width:100%;position:static}html:not(.story-enabled) .peakpals{grid-template-rows:auto 1fr auto;row-gap:32px;padding-block:32px}.hobby-item{offset-distance:var(--offset-distance)}#hobbys .visual{z-index:0;isolation:isolate}#hobbys .visual>picture{z-index:2;position:relative}#hobbys .visual ul{z-index:auto}.gallery li:nth-child(odd){z-index:0}.gallery li:nth-child(2){z-index:1;position:relative}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}*,:before,:after{transition:none!important;animation:none!important}}.story-controls{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));z-index:50;align-items:center;gap:12px;font-size:11px;display:flex;position:fixed}.story-controls button,.story-controls a{color:#303036;font:inherit;cursor:pointer;background:#ffffffeb;border:1px solid #30303618;border-radius:30px;padding:9px 13px;text-decoration:none}.story-controls :focus-visible{outline-offset:4px;outline:3px solid #303036}.story{height:calc((var(--story-beats) + 1) * var(--story-height));position:relative}.story-stop{top:calc(var(--beat) * var(--story-height));pointer-events:none;scroll-snap-align:start;scroll-snap-stop:normal;width:1px;height:1px;position:absolute}.story-stage{height:var(--story-height);isolation:isolate;background:#fff;position:sticky;top:0;overflow:clip}.story-yellow{background:var(--portfolio-yellow);pointer-events:none;transform-origin:50%;z-index:0;position:fixed;top:0;left:0}.story-pink{pointer-events:none;z-index:7;background:#ff638b;display:none;position:absolute;inset:0}.story-visuals{z-index:4;pointer-events:none;position:absolute;inset:0}.story-frame{transform-origin:50%;background:#f5f5f5;border-radius:12px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 12px 40px #20202b24,0 2px 5px #20202b12}.story-frame img{object-fit:cover;object-position:top center;width:100%;max-width:none;height:100%;display:block;position:absolute;inset:0}.story-frame.phone{background:#161619;border:5px solid #242427;border-radius:28px}.story-frame.phone img{object-fit:cover}.story-frame.phone .landscape-texture{transform-origin:50%;inset:50% auto auto 50%}.story-frame.website-phone{border-width:2px}.story-frame.icon{box-shadow:none;background:0 0;border-radius:0;overflow:visible}.story-frame.icon img{object-fit:contain}.story-pip-caption{z-index:8;color:#303036;text-wrap:balance;pointer-events:none;opacity:0;margin:0;font-size:clamp(.72rem,1.05vw,.9rem);line-height:1.35;position:absolute}.story-enabled{scroll-snap-type:y mandatory;scroll-behavior:auto}.story-enabled .story-stage .header,.story-enabled .story-stage #portfolio,.story-enabled .story-stage .projects{display:block}.story-enabled .story-stage .header,.story-enabled .story-stage .project,.story-enabled .story-stage .projects-recap,.story-enabled .story-stage #hobbys,.story-enabled .story-stage #life,.story-enabled .story-stage #worked-for,.story-enabled .story-stage #contact{scroll-snap-align:none;opacity:0;pointer-events:none;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;position:absolute;inset:0;overflow:visible}:is(.story-enabled .story-stage .header,.story-enabled .story-stage .project,.story-enabled .story-stage .projects-recap,.story-enabled .story-stage #hobbys,.story-enabled .story-stage #life,.story-enabled .story-stage #worked-for,.story-enabled .story-stage #contact).scene-active{pointer-events:auto}.story-enabled .story-stage .header{z-index:2}.story-enabled .story-stage .header:after,.story-enabled .story-stage .header-visual:before{display:none}.story-enabled .story-stage .scroll-cue{color:#30303680;place-items:center;width:44px;height:44px;font-size:26px;text-decoration:none;display:grid;position:absolute;bottom:3%;left:50%;translate:-50%}.story-enabled .story-stage .scroll-cue span{border-bottom:2px solid;border-right:2px solid;width:12px;height:12px;rotate:45deg}.story-enabled .story-stage #portfolio{position:static}.story-enabled .story-stage .yellow-target{visibility:hidden;display:block}.story-enabled .story-stage .yellow-portrait{z-index:0}.story-enabled .story-stage .header-visual{width:min(66.3vw,300px,35svh);position:absolute;top:11%;left:50%;translate:-50%}.story-enabled .story-stage .header-visual figure{display:block}.story-enabled .story-stage .header-visual .chris{width:100%;max-width:none}.story-enabled .story-stage .text-and-references{display:contents}.story-enabled .story-stage .header-text{width:88%;max-width:none;margin:0;padding:0;position:absolute;top:64%;left:6%}.story-enabled .story-stage .header-text h1{margin:0 0 12px;font-size:clamp(1.4rem,6vw,2rem)}.story-enabled .story-stage .header-text p{max-width:350px;margin:0 auto 20px;font-size:clamp(.8rem,2.5vw,1rem)}.story-enabled .story-stage .header-text .btn{padding:13px 20px;font-size:.85rem}.story-enabled .story-stage .references{justify-content:center;gap:16px;min-height:0;padding:0;position:absolute;inset:12% 9% 9%}.story-enabled .story-stage .references .reference{width:100%;max-width:330px;margin-inline:auto;padding:20px 24px;font-size:clamp(.65rem,1.5svh,.9rem);translate:none}.story-enabled .story-stage .references .reference blockquote{gap:16px}.story-enabled .story-stage .references .reference footer{gap:12px}.story-enabled .story-stage .project{z-index:5}.story-enabled .story-stage .project>ul,.story-enabled .story-stage .project>picture{visibility:hidden}.story-enabled .story-stage .project figcaption{text-align:left;gap:6px;width:85%;margin:0;padding:6px 18px;font-size:clamp(1.15rem,4vw,1.6rem);line-height:1.25;position:absolute;bottom:9%;left:7%}.story-enabled .story-stage .project figcaption strong,.story-enabled .story-stage .project figcaption small{line-height:1.25;display:block}.story-enabled .story-stage .project figcaption{translate:none}.story-enabled .story-stage .project figcaption:before,.story-enabled .story-stage .project figcaption:after{display:none}.story-enabled .story-stage .project figcaption small{font-size:.75em}.story-enabled .story-stage .yellow-caption{background:var(--portfolio-yellow);width:6px;height:100%;position:absolute;top:0;left:0}.story-enabled .story-stage .projects-recap{z-index:3;justify-content:center;align-items:center;display:flex}.story-enabled .story-stage .projects-recap .text{text-align:center;width:85%;padding:32px 24px}.story-enabled .story-stage .projects-recap .text h2{font-size:clamp(1.4rem,4.7vw,2.2rem)}.story-enabled .story-stage .projects-recap .text small{font-size:.7rem}.story-enabled .story-stage .projects-recap .text:before{display:none}.story-enabled .story-stage .projects-recap>picture{visibility:hidden}.story-enabled .story-stage .yellow-recap{--yellow-angle:-18;background:var(--portfolio-yellow);z-index:-1;position:absolute;inset:-12% -20%;rotate:-18deg}.story-enabled .story-stage #hobbys,.story-enabled .story-stage #life{z-index:3}.story-enabled .story-stage #hobbys .visual,.story-enabled .story-stage #life .visual{visibility:hidden}.story-enabled .story-stage #hobbys p,.story-enabled .story-stage #life p{text-align:left;width:86%;max-width:none;margin:0;padding:0;font-size:clamp(.8125rem,2.8vw,.95rem);line-height:1.85;position:absolute;bottom:10%;left:7%}:is(.story-enabled .story-stage #hobbys p,.story-enabled .story-stage #life p):before,:is(.story-enabled .story-stage #hobbys p,.story-enabled .story-stage #life p):after{display:none}.story-enabled .story-stage #life p{bottom:18%}.story-enabled .story-stage #life .btn{margin:0;padding:12px 18px;font-size:.75rem;position:absolute;bottom:7%;left:7%}.story-enabled .story-stage #worked-for{z-index:8}.story-enabled .story-stage #worked-for h2{width:84%;margin:0;font-size:clamp(1.2rem,4vw,2rem);position:absolute;top:54.5%;left:8%;translate:0 -50%}.story-enabled .story-stage #worked-for ul{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:64px;align-content:center;gap:80px 16px;width:auto;max-width:none;margin:0;display:grid;position:absolute;inset:34% 6% 25%;overflow:visible}.story-enabled .story-stage #worked-for img{width:auto;max-width:100%;max-height:38px}.story-enabled .story-stage #worked-for .logo-want img,.story-enabled .story-stage #worked-for .logo-sunzinet img{max-height:30px}.story-enabled .story-stage .yellow-strip{background:var(--portfolio-yellow);width:100%;height:15%;position:absolute;top:0;left:0}.story-enabled .story-stage #contact{z-index:3;flex-direction:column;justify-content:center;align-items:center;display:flex}.story-enabled .story-stage #contact h2{width:auto;margin:0 0 20px;font-size:1.5rem;position:static}.story-enabled .story-stage #contact ul{gap:24px;margin:0;padding:16px 0}.story-enabled .story-stage #contact .copy{font-size:clamp(1rem,4.3vw,1.3rem)}.story-enabled .story-stage #contact .mailbox{visibility:hidden;clip-path:none;width:min(70vw,45svh);height:auto;top:50%;left:0;translate:-50% -50%}@media (width<=599px){html:not(.story-enabled) .websites ul.scattered-screenshots{height:72svh;margin:0;top:0}html:not(.story-enabled) .websites li{width:min(68%,29svh)}html:not(.story-enabled) .websites .site-1{top:2%;left:6%;right:auto;transform:rotate(-4deg)}html:not(.story-enabled) .websites .site-2{top:35%;left:20%;transform:none}html:not(.story-enabled) .websites .site-3{top:68%;right:7%;transform:rotate(4deg)}html:not(.story-enabled) .websites img.mobile{width:23%;bottom:-8%;right:-3%}}@media (width>=600px) and (aspect-ratio<=1){.story-enabled .story-stage .project figcaption{text-align:left;inset:auto auto 8% 7%}.story-enabled .story-stage .header-visual{width:min(36vw,32svh)}.story-enabled .story-stage .header-text{top:64%}html:not(.story-enabled) .websites ul.scattered-screenshots{height:76svh;margin:0;position:relative;top:0}html:not(.story-enabled) .websites li{width:58%;max-width:none}html:not(.story-enabled) .websites .site-1{top:0;left:-4%;right:auto;transform:rotate(-5deg)scale(.8)}html:not(.story-enabled) .websites .site-2{top:34%;left:20%;transform:none}html:not(.story-enabled) .websites .site-3{top:auto;bottom:0;right:-4%;transform:rotate(4deg)scale(.8)}html:not(.story-enabled) .websites figcaption{bottom:0;left:0}}@media (width>=768px) and (aspect-ratio>=1){.story-controls{font-size:12px;top:22px;right:28px}.story-enabled .story-stage .header-visual{width:min(351px,56svh);top:50%;left:29%;translate:-50% -50%}.story-enabled .story-stage .header-text{width:34%;top:50%;left:54%;translate:0 -50%}.story-enabled .story-stage .header-text h1{font-size:clamp(2rem,3.125vw,2.5rem)}.story-enabled .story-stage .header-text p{max-width:440px;font-size:clamp(1rem,1.5625vw,1.25rem)}.story-enabled .story-stage .header-text .btn{padding:16px 24px;font-size:1.125rem}.story-enabled .story-stage .references{align-items:flex-start;gap:20px;inset:13% 10% 13% 54%}.story-enabled .story-stage .references .reference{width:70%;max-width:285px;margin:0;padding:24px;font-size:clamp(.65rem,1.4svh,.95rem)}.story-enabled .story-stage .references .reference:nth-child(2){align-self:flex-end}.story-enabled .story-stage .project figcaption{width:auto;padding:8px 28px;font-size:clamp(1.4rem,2.4vw,2.4rem);bottom:8%;left:6%}.story-enabled .story-stage .peakpals figcaption,.story-enabled .story-stage .timi figcaption{text-align:right;inset:12% 6% auto auto}:is(.story-enabled .story-stage .peakpals figcaption,.story-enabled .story-stage .timi figcaption) .yellow-caption{left:auto;right:0}.story-enabled .story-stage .projects-recap .text{text-align:left;width:max-content;max-width:50%;padding:36px 40px;position:absolute;top:50%;left:42%;translate:0 -50%}.story-enabled .story-stage .projects-recap .text h2{text-align:left;font-size:clamp(1.6rem,2.4vw,2.5rem)}.story-enabled .story-stage .projects-recap .text small{font-size:.85rem}.story-enabled .story-stage .yellow-recap{--yellow-angle:0;inset:0;rotate:0deg}.story-enabled .story-stage #hobbys p{width:32%;font-size:.95rem;bottom:9%;left:61%}.story-enabled .story-stage #life p{width:64%;font-size:.95rem;bottom:10%;left:7%}.story-enabled .story-stage #life .btn{font-size:.85rem;bottom:10%;left:auto;right:7%}.story-enabled .story-stage #worked-for h2{top:54.5%;translate:0 -50%}.story-enabled .story-stage #worked-for ul{flex-flow:wrap;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:70px;place-content:center;gap:80px 32px;display:grid;inset:34% 18% 25%}.story-enabled .story-stage #worked-for ul li{grid-column:span 2;width:100%;min-width:0}.story-enabled .story-stage #worked-for ul li:nth-child(4){grid-column:2/span 2}.story-enabled .story-stage #worked-for ul li:nth-child(5){grid-column:4/span 2}.story-enabled .story-stage #worked-for img{max-width:100%;max-height:70px}.story-enabled .story-stage #worked-for .logo-want img{max-height:55px}.story-enabled .story-stage #worked-for .logo-sunzinet img{max-height:42px}.story-enabled .story-stage #contact h2{font-size:1.8rem}.story-enabled .story-stage #contact .copy{font-size:clamp(1.3rem,2.2vw,2rem)}.story-enabled .story-stage #contact .mailbox{width:min(40vw,65svh);top:0;translate:-50% -50%}}@media (height<=540px){.story-controls{top:8px;right:8px}}