/* Zo Pike — a small collection of playable worlds. */
:root{--display:'Manrope',sans-serif;--sans:'DM Sans',sans-serif}
html:has(.portfolio-studio){scroll-padding-top:76px;scroll-snap-type:y proximity}
.portfolio-studio{--accent:#ffe6bb;--ink:#fff8ed;--muted:#f5d2bd;--line:#ffffff30;background:#b64e29;color:var(--ink)}
.portfolio-studio button,.portfolio-studio a{touch-action:manipulation}
.studio-header{position:fixed;inset:0 0 auto;z-index:40;height:76px;padding:0 4.3vw;display:flex;justify-content:space-between;align-items:center;color:#fff8ed;background:#a2452696;border-bottom:1px solid #ffffff24;backdrop-filter:blur(20px);transition:background .6s}
.studio-header .brand{gap:12px;font-size:14px}.studio-header .brand-mark{width:35px;height:35px;border-radius:5px;border:1px solid #ffffff60;background:#fff4e8;color:#a34425;box-shadow:3px 3px 0 #5925104a;font-size:21px}.studio-header .brand-role{color:inherit;font-size:10px;opacity:.72}
.studio-header nav{font-size:12px;gap:28px}.studio-header nav a{padding-block:12px}.studio-header .nav-contact{background:#fff5e8;color:#793619;border:0;border-radius:4px;padding:8px 14px}.studio-header .nav-contact span{color:inherit;margin-left:17px}.studio-header nav a:hover{color:#ffe3b0}.studio-header .nav-contact:hover{background:#ffdbb4;color:#77331a}
.motion-toggle{width:35px;height:35px;border:1px solid #fff6;background:transparent;border-radius:4px;font-size:13px}.motion-toggle:hover{background:#fff2}
.scene{--scene-dark:#b64e29;--scene-light:#fae9d4;--scene-ink:#863b24;--scene-muted:#f5d2bd;--scene-accent:#ffdbac;position:relative;display:grid;grid-template-columns:60% 40%;min-height:100svh;scroll-snap-align:start;background:var(--scene-dark);isolation:isolate;overflow:clip}
.scene-home{grid-template-columns:63% 37%}.scene-lsfr{--scene-dark:#2b513d;--scene-light:#e3ebd4;--scene-ink:#2b513d;--scene-muted:#d1e0ca;--scene-accent:#d5e8a8}.scene-chess{--scene-dark:#8c343a;--scene-light:#f0dad6;--scene-ink:#8c343a;--scene-muted:#efd0cd;--scene-accent:#ffd1bc}.scene-pi{--scene-dark:#a7552f;--scene-light:#f9e6cd;--scene-ink:#914627;--scene-muted:#f4d4bb;--scene-accent:#ffe1af}
.scene-copy{position:relative;padding:145px 9vw 95px 6.7vw;display:flex;flex-direction:column;justify-content:center;z-index:2;background:radial-gradient(ellipse at 5% 0%,#ffffff09,transparent 65%)}
.scene-copy::before{content:'';position:absolute;right:25px;top:113px;width:17px;height:17px;border-top:1px solid #fff6;border-right:1px solid #fff6;pointer-events:none}.scene-copy::after{content:'';position:absolute;left:32px;bottom:40px;width:17px;height:17px;border-left:1px solid #fff6;border-bottom:1px solid #fff6;pointer-events:none}
.scene-index{display:flex;gap:12px;align-items:center;font:11px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--scene-accent);margin:0 0 27px}.scene-index::before{content:'';width:6px;height:6px;box-shadow:6px 0 0 #ffffff30;background:currentColor;margin-right:4px}.scene-index .index-line{height:1px;background:#ffffff30;width:35px}
.hero-name{font:800 clamp(72px,7.9vw,132px)/.96 var(--display);letter-spacing:-.073em;margin:0 0 23px}.hero-name>span{display:block}.hero-name .name-outline{color:#ffe0bd}
.hero-role{font:500 clamp(18px,1.55vw,25px)/1.4 var(--display);letter-spacing:-.6px;max-width:560px;margin:0 0 23px}.hero-role span{color:#ffe0bd}.hero-intro{color:var(--scene-muted);font-size:15px;line-height:1.85;max-width:490px;margin:0 0 22px}.hero-intro a{text-decoration:underline;text-underline-offset:4px;color:#fff9ed}
.skill-line{font-size:10px;letter-spacing:.55px;color:#ffe8d4;max-width:520px;line-height:1.9;margin:0 0 27px}.hero-actions,.scene-actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap}.menu-button{display:inline-flex;min-height:48px;padding:12px 19px;align-items:center;justify-content:space-between;gap:32px;border:1px solid #fff6;border-radius:4px;background:var(--scene-accent);color:var(--scene-ink);font-size:13px;font-weight:650;box-shadow:0 3px 0 #0002,inset 0 1px 0 #fff8;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}.menu-button::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff5 50%,transparent 65%);transform:translateX(-140%);transition:transform .8s}.menu-button:hover{transform:translateY(-3px);box-shadow:0 6px 0 #0002}.menu-button:hover::after{transform:translateX(140%)}.menu-button span{font-size:20px}.quiet-link{font-size:12px;display:inline-flex;gap:20px;align-items:center;border-bottom:1px solid #ffffff60;padding:10px 0}.quiet-link:hover{color:var(--scene-accent)}
.hero-meta{display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:.6px;color:var(--scene-muted);margin-top:35px}.availability{display:flex;align-items:center;gap:8px}.availability::before{content:'';width:5px;height:5px;background:#ffe6b3;box-shadow:0 0 0 4px #ffe6b318}
.scene-stage{position:relative;min-width:0;background:var(--scene-light);color:var(--scene-ink);display:flex;align-items:center;justify-content:center;perspective:1200px;overflow:hidden}
.scene-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--scene-ink) 1px,transparent 1px),linear-gradient(90deg,var(--scene-ink) 1px,transparent 1px);background-size:44px 44px;opacity:.035;mask-image:linear-gradient(transparent,black 65%)}
.stage-heading{position:absolute;top:118px;left:38px;right:38px;display:flex;align-items:end;justify-content:space-between;gap:12px;z-index:5}.stage-heading h2{font:700 24px/1.15 var(--display);letter-spacing:-.9px;margin:0}.stage-heading span{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--scene-ink);opacity:.7}.stage-heading p{font-size:11px;line-height:1.6;max-width:190px;margin:9px 0 0;opacity:.7}.stage-footnote{position:absolute;bottom:56px;left:38px;right:38px;font:10px/1.7 var(--sans);letter-spacing:.25px;display:flex;justify-content:space-between;gap:16px;z-index:3}.stage-footnote span:last-child{opacity:.65}
.scene-watermark{position:absolute;font:800 270px/.8 var(--display);letter-spacing:-20px;right:-15px;bottom:40px;color:var(--scene-ink);opacity:.055;user-select:none;pointer-events:none}
.device-composition{position:relative;width:min(100%,560px);height:560px;margin-top:100px;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease-out;z-index:2}.device-composition::before{content:'';position:absolute;width:76%;height:130px;left:12%;bottom:65px;border-radius:50%;background:radial-gradient(ellipse,#6e3d2330,transparent 68%);transform:rotate(-12deg)}
.device-link{position:absolute;display:block;color:var(--scene-ink);border:0;padding:0;background:none;outline-offset:14px!important;z-index:3;transition:filter .3s;--device-scale:1;--device-rotate:0deg}.device-link:hover,.device-link:focus-visible{z-index:9;filter:drop-shadow(0 12px 17px #7e4a2930)}
.device-float{position:relative;animation:device-float 6s ease-in-out infinite;animation-play-state:paused;transition:transform .45s cubic-bezier(.2,.7,.2,1);transform:translateY(0)}.scene.is-active .device-float{animation-play-state:running}.device-link:hover .device-float,.device-link:focus-visible .device-float{animation-play-state:paused;transform:translateY(-14px) rotate(-2deg)}
.device-label{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--scene-ink) 30%,transparent);background:color-mix(in srgb,var(--scene-light) 90%,white);border-radius:3px;padding:7px 10px;box-shadow:2px 2px 0 color-mix(in srgb,var(--scene-ink) 15%,transparent);transition:background .3s,transform .3s}.device-label span{font-size:13px}.device-link:hover .device-label{background:#fff7e9;transform:translate(-50%,-4px)}
.device-frame{display:block;position:relative;transform:rotate(var(--device-rotate));filter:drop-shadow(4px 7px 0 #292b2930);transform-style:preserve-3d}.device-screen{display:block;position:relative;overflow:hidden;background:#192520}.device-screen img,.device-screen video{display:block;width:100%;height:100%;object-fit:cover}.device-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#ffffff38,transparent 36%,transparent 75%,#ffffff12);pointer-events:none;z-index:2}
.portfolio-studio .device-link.main-shot{aspect-ratio:auto;overflow:visible;border-radius:0;background:transparent}.portfolio-studio .device-link.main-shot:hover img{transform:none}.laptop-base,.tv-stand{display:block}
.device-composition{pointer-events:none}.device-link{pointer-events:auto}.scene-chess .film-toolbar{z-index:10}.scene-chess .film-toolbar button{scroll-margin-block:120px}.chapter-dock a{white-space:nowrap}.chapter-dock .dock-short{display:none}
.chapter-dock a[aria-current]:hover{background:var(--dock-accent,#a64b29);color:#fff5e8}
.phone-frame{width:100%;aspect-ratio:.49;border-radius:23px;background:linear-gradient(135deg,#f6ebce,#bda98c 3%,#4a4a40 5%,#282f2b 90%,#baa88a);padding:7px;border:2px solid #383d34;box-shadow:inset 2px 2px 0 #fff9,inset -3px -3px 0 #0a1308,4px 3px 0 #6b6957}.phone-frame::before{content:'';position:absolute;left:-4px;top:58px;width:3px;height:26px;background:#5a6650;border-radius:2px;box-shadow:0 34px 0 #5a6650}.phone-frame .device-screen{border-radius:16px;height:100%;border:1px solid #141f16}.phone-island{position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%);width:33%;height:11px;background:#18201b;border-radius:8px;box-shadow:inset -2px -1px 0 #454c43}.phone-island::after{content:'';position:absolute;right:5px;top:3px;width:4px;height:4px;background:#405a5e;border-radius:50%}.phone-frame img{object-position:top;image-rendering:auto}.phone-homebar{position:absolute;z-index:3;bottom:7px;left:35%;right:35%;height:3px;background:#202821a6;border-radius:3px}
.laptop-frame{width:100%;padding:8px 8px 10px;border:2px solid #313c33;border-radius:10px 10px 4px 4px;background:linear-gradient(130deg,#d8d0b9,#858d78 3%,#26352f 5%,#273c33 94%,#15281e);box-shadow:inset 2px 2px 0 #f4edce80,4px 4px 0 #a2a98c}.laptop-frame .device-screen{aspect-ratio:1.6;border:1px solid #151e17;border-radius:3px}.laptop-base{height:41px;margin:0 -23px;position:relative;background:linear-gradient(180deg,#dddac9,#899780 42%,#9faa95 45%,#d7dbbf 76%,#74866a 77%);clip-path:polygon(6% 0,94% 0,100% 78%,99% 91%,96% 100%,4% 100%,1% 91%,0 78%);transform:perspective(400px) rotateX(28deg);transform-origin:top;box-shadow:0 3px 0 #364b33}.laptop-base::before{content:'';position:absolute;inset:5px 27px 17px;background:repeating-linear-gradient(90deg,transparent 0 7px,#567058 7px 8px),repeating-linear-gradient(0deg,#344e3b 0 3px,#90a389 3px 4px);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);opacity:.72}.laptop-base::after{content:'';position:absolute;left:39%;right:39%;height:9px;bottom:5px;background:#a6b79a;border:1px solid #627d60;border-radius:2px}
.tv-frame{width:100%;padding:8px 8px 13px;border:2px solid #33372f;border-radius:5px;background:linear-gradient(130deg,#f0dfc2,#77786a 3%,#2a312c 4%,#17271f 95%,#465343);box-shadow:inset 2px 2px 0 #fff6,5px 5px 0 #8f9477}.tv-frame .device-screen{aspect-ratio:1.79;border:1px solid #111;border-radius:2px}.tv-frame::after{content:'ZP';position:absolute;left:46%;bottom:0;font-size:6px;letter-spacing:3px;color:#bac8b6}.tv-stand{position:relative;height:34px}.tv-stand::before{content:'';position:absolute;width:16px;height:29px;left:calc(50% - 8px);background:linear-gradient(90deg,#b0b298,#465b45);transform:skew(-8deg)}.tv-stand::after{content:'';position:absolute;width:47%;height:7px;left:26.5%;bottom:0;background:#435d44;transform:skew(-32deg);box-shadow:2px 2px 0 #a2b496}
.controller{position:absolute;width:100px;height:66px;bottom:-32px;right:-12px;filter:drop-shadow(3px 5px 0 #49302330);transform:rotate(-12deg);z-index:4}.controller svg{width:100%;height:100%;overflow:visible}.wireless-signal{position:absolute;right:24px;top:-10px;font-size:16px;color:#fff6e4;transform:rotate(90deg);opacity:.7}
.home-tv{width:62%;left:28%;top:70px;--device-rotate:5deg}.home-phone{width:25%;left:8%;top:193px;--device-rotate:-9deg;z-index:5}.home-laptop{width:57%;left:37%;top:332px;--device-rotate:-5deg}.home-laptop .device-label{bottom:-30px}.home-phone .device-label{bottom:-34px}.home-tv .device-label{bottom:-38px;left:35%}.home-phone .device-float{animation-delay:-2s}.home-laptop .device-float{animation-delay:-4s}
.project-composition{height:550px;margin-top:20px}.project-composition .featured-laptop{width:81%;left:8%;top:138px;--device-rotate:-6deg;z-index:2}.project-composition .featured-phone{width:27%;left:63%;top:280px;--device-rotate:8deg;z-index:4}.project-composition .featured-phone .device-float{animation-delay:-3s}.project-composition .featured-tv{width:85%;left:6%;top:155px;--device-rotate:-5deg}.project-composition .featured-tv .controller{width:155px;height:95px;bottom:-55px;right:-8px}.project-composition .featured-tv .device-label{bottom:-76px}.project-composition .featured-laptop .device-label{bottom:-48px}
.stage-orbit{position:absolute;width:360px;height:360px;left:50%;top:50%;transform:translate(-50%,-36%) rotateX(60deg);border:1px solid color-mix(in srgb,var(--scene-ink) 17%,transparent);border-radius:50%;pointer-events:none}.stage-orbit::after{content:'';position:absolute;inset:27px;border:1px dashed color-mix(in srgb,var(--scene-ink) 18%,transparent);border-radius:50%}.pixel-star{position:absolute;width:7px;height:7px;background:var(--scene-ink);opacity:.25;box-shadow:7px 0 0 var(--scene-ink),-7px 0 0 var(--scene-ink),0 7px 0 var(--scene-ink),0 -7px 0 var(--scene-ink);animation:star-turn 10s ease-in-out infinite}.pixel-star.one{top:31%;left:16%}.pixel-star.two{bottom:23%;right:13%;transform:scale(.5);animation-delay:-5s}
.scene-title{font:800 clamp(45px,4.25vw,73px)/1.04 var(--display);letter-spacing:-.06em;margin:0 0 22px;max-width:660px}.scene-title .soft-title{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.05em;color:var(--scene-accent)}.scene-tagline{font:500 19px/1.45 var(--display);letter-spacing:-.4px;margin:0 0 14px;max-width:550px}.scene-description{font-size:14px;line-height:1.85;color:var(--scene-muted);max-width:535px;margin:0 0 21px}.scene-byline{font-size:10px;letter-spacing:.2px;color:var(--scene-muted);margin:0 0 25px}.project-stats{margin:0 0 23px;padding:18px 0;border-color:#ffffff30;max-width:540px;gap:12px}.project-stats strong{font-size:27px;font-weight:650}.project-stats span{font-size:10px;color:var(--scene-muted);display:block}.play-modes strong{font-size:15px!important;margin:2px 0 6px}.play-modes span{line-height:1.6}.feature-tags{min-height:0;margin:0 0 24px;gap:6px;max-width:540px}.feature-tags li{font-size:10px;padding:3px 8px;background:#ffffff08;border:1px solid #ffffff29;color:var(--scene-muted);border-radius:3px;white-space:normal}.feature-tags .wip-tag{background:#fff1;border-color:#fff3;color:var(--scene-accent)}
.gallery-details{max-width:540px;margin:22px 0 0;border-top:1px solid #fff3;padding-top:12px}.gallery-details summary{cursor:pointer;list-style:none;font-size:11px;display:flex;justify-content:space-between;align-items:center;min-height:32px;color:var(--scene-muted)}.gallery-details summary::-webkit-details-marker{display:none}.gallery-details summary::after{content:'+';font-size:21px;color:var(--scene-accent)}.gallery-details[open] summary::after{content:'−'}.thumbnail-strip{margin-top:10px;gap:9px}.thumbnail{width:76px;min-width:76px;height:50px;border-color:#fff5;flex-shrink:0}.thumbnail:hover{border-color:var(--scene-accent)}
.scene-chess .clip-switcher{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:540px}.scene-chess .clip-choice{display:flex;gap:10px;padding:9px 10px;min-height:48px;border:1px solid #ffffff35;background:#ffffff09;border-radius:3px;text-align:left}.scene-chess .clip-choice strong{font-size:10px}.scene-chess .clip-choice small{font-size:9px;opacity:.7}.scene-chess .clip-choice[aria-pressed=true]{background:#ffe1cd;color:#85333a;border-color:#ffe1cd}.clip-number{font-size:10px;opacity:.7}.clip-progress{position:absolute;left:10px;bottom:4px;right:10px;height:2px;background:#ffe4cc2b;z-index:3}.clip-progress::after{content:'';display:block;height:100%;width:100%;background:#ffe1b7;transform:scaleX(var(--clip-progress,0));transform-origin:left}.scene-chess .film-toolbar{position:absolute;bottom:91px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:var(--scene-ink);padding:0}.scene-chess .film-toolbar button{border:1px solid #8c343a40;background:#fff4e7;color:#8c343a;border-radius:3px;padding:8px 10px;font-size:10px}.story-note{border:0;display:block;padding:0;margin:19px 0 0}.story-note a{font-size:11px;color:var(--scene-accent)}
.scene-bottom{position:absolute;z-index:6;bottom:30px;left:6.7vw;font-size:9px;letter-spacing:1px;color:var(--scene-muted);display:flex;align-items:center;gap:14px}.scene-bottom::before{content:'';width:20px;height:1px;background:currentColor}
.chapter-dock{position:fixed;z-index:35;left:50%;bottom:18px;transform:translateX(-50%);background:#fff9eceb;box-shadow:0 6px 28px #332a2026,0 1px 0 #fff inset;border:1px solid #fff9;border-radius:5px;padding:5px;display:flex;gap:3px;backdrop-filter:blur(20px);color:#795c42}.chapter-dock a{padding:8px 14px;min-height:38px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.3px;border-radius:3px}.chapter-dock a span:first-child{font-size:8px;opacity:.6}.chapter-dock a[aria-current]{background:var(--dock-accent,#a64b29);color:#fff5e8}.chapter-dock a:hover{background:#e7d6c3;color:#773c23}.journey-progress{position:fixed;bottom:0;left:0;right:0;height:3px;background:#ffffff15;z-index:41}.journey-progress span{display:block;height:100%;background:#ffdcb0;transform:scaleX(var(--journey,0));transform-origin:left}
.studio-contact{background:#252e27;color:#fff3df;padding:90px 6.7vw 120px;display:grid;grid-template-columns:1.3fr 1fr;gap:50px;position:relative;scroll-snap-align:start;--scene-accent:#ffe1b7;--scene-ink:#704329}.studio-contact h2{font:700 clamp(35px,4vw,65px)/1.15 var(--display);letter-spacing:-2px;margin:16px 0 25px}.studio-contact .eyebrow{color:#d7c5ab}.studio-contact p{font-size:14px;color:#c7d0c4;max-width:440px}.studio-contact .contact-actions{align-self:center}.studio-contact .email-address{color:#d7c5ab;margin:20px 0;font-size:13px}.studio-footer{background:#252e27;color:#b9c3b5;padding:25px 6.7vw 100px!important;border-top:1px solid #ffffff20;font-size:10px}.studio-footer .footer-name{color:#fff0d7}
.portfolio-studio dialog{background:#26372e;border-color:#a3b394;--accent:#dcdfb1;--muted:#d0d4c2}
.js-motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.js-motion .scene.has-entered .reveal{opacity:1;transform:translateY(0)}.js-motion .scene-stage .device-composition{opacity:0;translate:0 28px;transition:opacity 1s,translate 1.1s,transform .45s}.js-motion .scene.has-entered .device-composition{opacity:1;translate:0 0}
@keyframes device-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes star-turn{0%,100%{opacity:.15}50%{opacity:.4;rotate:90deg}}
.motion-paused *{animation-play-state:paused!important}.motion-paused .reveal{opacity:1;transform:none;transition:none}.motion-paused .device-composition{opacity:1!important;translate:none!important;transform:none!important}
.js-motion .scene-stage .device-link{opacity:0;translate:0 25px;scale:.94;transition:opacity .8s,translate 1s,scale 1s,filter .3s;transition-delay:var(--build-delay,100ms)}.js-motion .scene.has-entered .device-link{opacity:1;translate:0 0;scale:1}.home-phone{--build-delay:250ms}.home-laptop{--build-delay:400ms}.featured-phone{--build-delay:300ms}.motion-paused .device-link{opacity:1!important;translate:none!important;scale:1!important;transition:none!important}
@media(min-width:1800px){.scene-copy{padding-left:max(100px,calc((100vw - 1540px)/2));padding-right:130px}.device-composition{scale:1.15}.scene-title{font-size:80px}.hero-name{font-size:150px}}
@media(max-width:1200px){.scene-copy{padding-left:5vw;padding-right:5vw}.scene-home{grid-template-columns:60% 40%}.hero-name{font-size:clamp(72px,8.8vw,106px)}.stage-heading{left:27px;right:27px}.stage-heading h2{font-size:22px}.scene-title{font-size:48px}.device-composition{height:510px}.home-tv{top:80px}.home-phone{top:200px}.home-laptop{top:340px}.scene-description{font-size:13px}.hero-intro{font-size:14px}.scene-bottom{left:5vw}.project-composition .featured-phone{top:250px}.scene-stage .stage-footnote{left:27px;right:27px}.scene-chess .film-toolbar{bottom:110px}.hero-meta{font-size:9px;gap:15px}.scene-copy{padding-top:135px}}
@media(max-width:900px){html:has(.portfolio-studio){scroll-snap-type:none}.scene,.scene-home{grid-template-columns:55% 45%}.scene-copy{padding:125px 4vw 98px}.studio-header{padding-inline:4vw}.studio-header nav{gap:17px}.hero-name{font-size:76px}.hero-role{font-size:19px}.hero-meta{flex-wrap:wrap;gap:10px}.scene-title{font-size:40px}.scene-tagline{font-size:17px}.scene-description{font-size:12px}.project-stats strong{font-size:24px}.scene-actions{gap:14px}.menu-button{font-size:11px;padding:11px 13px;gap:20px}.quiet-link{font-size:10px}.device-composition{height:460px;margin-top:80px}.project-composition{margin-top:0}.home-phone{top:175px}.home-laptop{top:305px}.home-tv{top:77px}.project-composition .featured-laptop{top:130px}.project-composition .featured-phone{top:230px}.project-composition .featured-tv{top:150px}.stage-heading span{font-size:8px}.scene-bottom{left:4vw}.stage-footnote{font-size:9px;bottom:83px}.stage-orbit{width:250px;height:250px}.scene-watermark{font-size:220px}.scene-chess .film-toolbar{flex-wrap:wrap;bottom:143px}.feature-tags li{font-size:9px}.hero-actions{gap:17px}.hero-intro{font-size:13px}.skill-line{font-size:9px}}
@media(max-width:700px){html:has(.portfolio-studio){scroll-padding-top:66px}.studio-header{height:66px;padding-inline:20px}.studio-header .brand{font-size:12px}.studio-header .brand-role{display:none}.studio-header .brand-mark{width:30px;height:30px;font-size:18px}.studio-header nav{gap:14px;font-size:10px}.studio-header nav>a[href='#about'],.studio-header nav>a[href='#work']{display:none}.studio-header .nav-contact{font-size:10px;padding:7px 10px}.studio-header .nav-contact span{margin-left:8px}.motion-toggle{width:30px;height:30px}.scene,.scene-home{grid-template-columns:1fr;min-height:auto;overflow:hidden}.scene-copy{padding:108px 25px 62px}.scene-home .scene-copy{padding-top:113px;padding-bottom:62px}.scene-copy::before{right:23px;top:94px}.scene-copy::after{left:22px;bottom:23px;width:12px;height:12px}.hero-name{font-size:clamp(78px,20vw,125px);margin-bottom:22px}.hero-role{font-size:21px}.hero-intro{font-size:14px;max-width:480px}.skill-line{font-size:10px;max-width:480px}.hero-meta{margin-top:28px;font-size:10px;gap:18px}.scene-index{font-size:10px;margin-bottom:24px;letter-spacing:1.5px}.scene-title{font-size:clamp(43px,11.5vw,64px);max-width:550px;margin-bottom:20px}.scene-tagline{font-size:18px}.scene-description{font-size:14px;line-height:1.85}.scene-byline{font-size:10px}.feature-tags li{font-size:10px}.project-stats strong{font-size:27px}.menu-button{min-height:48px;font-size:12px;padding:11px 17px}.quiet-link{font-size:11px}.scene-actions{gap:22px}.scene-stage{height:590px;min-height:0}.scene-home .scene-stage{height:620px}.stage-heading{top:31px;left:25px;right:25px}.stage-heading h2{font-size:24px}.stage-heading span{font-size:9px}.stage-heading p{max-width:220px;font-size:11px}.device-composition{max-width:420px;height:470px;margin-top:59px}.project-composition{margin-top:0;max-width:450px;height:450px}.home-tv{top:47px}.home-phone{top:160px}.home-laptop{top:289px}.project-composition .featured-laptop{top:88px}.project-composition .featured-phone{top:201px}.project-composition .featured-tv{top:110px}.stage-footnote{bottom:32px!important;left:25px!important;right:25px!important;font-size:10px}.scene-bottom{display:none}.scene-watermark{bottom:16px;font-size:220px}.scene-chess .film-toolbar{bottom:75px;font-size:10px}.scene-chess .film-toolbar button{font-size:11px;min-height:42px;padding-inline:12px}.stage-orbit{width:340px;height:340px}.chapter-dock{bottom:13px;max-width:calc(100% - 24px);gap:1px;padding:4px}.chapter-dock a{font-size:9px;padding:8px 11px;gap:5px;min-height:40px}.chapter-dock a span:first-child{font-size:7px}.studio-contact{grid-template-columns:1fr;gap:15px;padding:65px 25px 65px}.studio-contact h2{font-size:39px;letter-spacing:-1.6px}.studio-footer{padding:22px 25px 95px!important}.device-label{font-size:10px}.scene .scene-copy{scroll-margin-top:66px}.scene:not(.scene-home) .scene-copy{padding-top:72px}.hero-actions{gap:23px}.gallery-details{margin-top:23px}.gallery-details summary{min-height:40px}.thumbnail{min-width:75px;height:52px}}
@media(max-width:380px){.studio-header{padding-inline:16px}.studio-header .brand>span:last-child{display:none}.studio-header nav{gap:12px}.scene-copy{padding-inline:21px}.hero-name{font-size:78px}.hero-role{font-size:19px}.hero-meta{gap:14px;font-size:9px}.chapter-dock a{padding-inline:8px;font-size:8px}.scene-title{font-size:42px}.scene-stage{height:525px}.scene-home .scene-stage{height:550px}.device-composition{height:420px;margin-top:60px}.home-tv{top:40px}.home-phone{top:150px}.home-laptop{top:260px}.project-composition{margin-top:0}.project-composition .featured-laptop{top:115px}.project-composition .featured-phone{top:210px}.project-composition .featured-tv{top:143px}.device-label{font-size:9px;padding:6px 8px}.scene-chess .film-toolbar{left:21px;right:21px;bottom:75px}.stage-footnote{font-size:9px}.scene-actions{gap:17px}}
@media(max-width:700px){.chapter-dock .dock-full{display:none}.chapter-dock .dock-short{display:inline}.chapter-dock a{font-size:11px;padding-inline:13px;gap:6px}.chapter-dock a span:first-child{font-size:8px}}
@media(max-width:380px){.chapter-dock a{padding-inline:11px;font-size:10px}.chapter-dock a>span:first-child{display:none}}
@media(prefers-reduced-motion:reduce){html:has(.portfolio-studio){scroll-behavior:auto;scroll-snap-type:none}.portfolio-studio *, .portfolio-studio *::before,.portfolio-studio *::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.js-motion .scene-stage .device-composition{opacity:1;translate:none;transform:none}.js-motion .scene-stage .device-link{opacity:1;translate:none;scale:1}}