#strings{position:fixed;inset:0;pointer-events:none;z-index:4} .motion-note{position:fixed;bottom:18px;left:22px;z-index:50;font:10px Inter,Arial,sans-serif;letter-spacing:.12em;color:#777;background:#fffffff0;padding:9px 12px;border:1px solid #ddd}.motion-note button{cursor:pointer;background:none;border:0;font:inherit;color:#111;margin-left:16px}.puppet-eye{position:absolute;width:7%;height:7%;border:1px solid #333;border-radius:50%;background:#eee;pointer-events:none}.puppet-eye:after{content:'';position:absolute;width:30%;height:30%;border-radius:50%;background:#222;left:var(--eye-x,40%);top:var(--eye-y,40%)}
.project-media{transform:none!important;filter:none!important;}
@media(prefers-reduced-motion:reduce){.project-media{transition:none!important;}}
/* Lightbox images switch immediately, without blur or zoom. */
img[alt="fullscreen"], .fixed.inset-0.bg-opacity-90 > video {
 transition: none !important;
 animation: none !important;
 filter: none !important;
 transform: none !important;
 will-change: auto !important;
}
/* Keep the custom cursor on the project divider. */
.cursor-col-resize, .cursor-col-resize * { cursor: none !important; }

#root a, #root button, #root .cursor-hover-target {cursor:none !important;}
.motion-note[hidden]{display:none;}

.motion-note {display:none !important;} html,body{overscroll-behavior-x:none;} .preview-project h1{cursor:none;} body[data-expanded="true"] .preview-project > div:first-child{min-width:48px;} body[data-expanded="true"] .preview-project h1{font-size:clamp(22px,2vw,36px);line-height:1.2;}
/* Rotation keeps the exact same type size in both project states. */
.preview-project .project-title{font-size:36px!important;line-height:1.12;transform-origin:0 0;transition:transform .65s cubic-bezier(.22,1,.36,1)!important;writing-mode:horizontal-tb!important;}
.preview-project .project-title.is-rotated{white-space:nowrap;transform:translateX(1.12em) rotate(90deg);}
.preview-project h1:focus:not(:focus-visible){outline:none}
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}
@media (hover:none),(pointer:coarse){
 #mirror-cursor,[class~="z-[9999]"]{display:none!important}
 html,body,#root *,#root a,#root button{cursor:auto!important}
}
@media(max-width:767px){
 html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
 #mirror-cursor,[class~="z-[9999]"]{display:none!important}
 .mobile-home{min-height:100svh!important;height:100dvh;overflow:hidden;touch-action:pan-x pinch-zoom}
 .home-art{height:100dvh!important;transform:scale(1.9);transform-origin:50% 48%;pointer-events:none}
 .home-name{left:20px!important;bottom:28px!important;font-size:28px!important;line-height:1.1;transform:none!important;transition:bottom .65s cubic-bezier(.22,1,.36,1);z-index:12}
 .home-bio{left:0!important;bottom:0!important;width:100%!important;max-height:72dvh;padding:24px 20px 30px;background:rgba(255,255,255,.96)!important;overflow-y:auto;font-size:13px!important;line-height:1.6;transform:translateY(105%)!important;opacity:0!important;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s!important;pointer-events:none;touch-action:pan-y pinch-zoom}
 .intro-open .home-bio{transform:translateY(0)!important;opacity:1!important;pointer-events:auto}
 .intro-open .home-name{bottom:calc(72dvh + 16px)!important}
 .home-bio .flex{gap:16px;flex-wrap:wrap;margin-top:24px}
 .preview-project{height:auto!important;min-height:100dvh;display:block;padding-top:48px}
 .preview-project>div:first-child{height:auto!important;width:100%;overflow:visible!important}
 .preview-project>div:first-child .h-full,.preview-project>div:first-child .flex-1{height:auto!important;overflow:visible!important}
 .preview-project>div:first-child .pt-6{padding:20px!important}
 .preview-project .project-title{font-size:23px!important;line-height:1.15}
 .preview-project p.font-bold{font-size:13px;line-height:1.4;margin:8px 0 24px}
 .preview-project .text-sm{font-size:13px;line-height:1.55}
 .preview-project .h-24{height:auto!important;padding:0 16px 24px}
 .preview-project .h-24>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;height:auto}
 .preview-project>div:last-child{height:auto!important;overflow:visible!important;width:100%}
 .preview-project>div:last-child .h-full{height:auto!important;overflow:visible!important}
 .preview-project>div:last-child .gap-8{gap:12px}
 .preview-project>div:last-child .px-4{padding:0 16px 24px}
 body[data-expanded="true"] .preview-project{display:flex;height:100dvh!important}
 body[data-expanded="true"] .preview-project>div:first-child{width:44px;min-width:44px;flex-basis:44px!important;height:100%!important;overflow:visible!important}
 body[data-expanded="true"] .preview-project>div:first-child .pt-6{padding:16px 8px!important}
 body[data-expanded="true"] .preview-project>div:last-child{width:calc(100% - 44px);height:100%!important;overflow:auto!important}
 body[data-expanded="true"] .preview-project .project-title{font-size:23px!important}
}
@media(prefers-reduced-motion:reduce){.project-title,.home-bio,.home-name{transition:none!important}}

/* Let the document scroll on phones; avoid a second 100vh scroll container. */
@media(max-width:767px){
 .project-index{height:auto!important;min-height:100svh;overflow:visible!important;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));}
 .project-index>.cursor-hover-target{transform:none!important;}
}

/* Mobile projects read as an image sequence followed by the project notes. */
@media(max-width:767px){
 body:not([data-expanded="true"]) .preview-project{display:flex;flex-direction:column;}
 body:not([data-expanded="true"]) .preview-project>div:last-child{order:0;flex:0 0 auto;}
 body:not([data-expanded="true"]) .preview-project>div:first-child{order:1;flex:0 0 auto!important;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));}
}

#mobile-project-title{display:none}
@media(max-width:767px){
 .preview-project .project-title{visibility:hidden;transform:rotate(-90deg);transform-origin:0 0;transition:transform .6s cubic-bezier(.22,1,.36,1)!important;}
 body.mobile-project-reading .preview-project .project-title{visibility:visible;transform:rotate(0deg)!important;}
 body:not([data-expanded="true"]) .preview-project>div:last-child{margin-left:44px;width:calc(100% - 44px)}
 #mobile-project-title:not([hidden]){display:block;position:fixed;left:0;top:0;margin:0;padding:0;border:0;background:none;color:#000;text-align:left;font-family:inherit;font-weight:700;line-height:1.15;text-transform:uppercase;transform-origin:0 0;z-index:20;transition:transform .6s cubic-bezier(.22,1,.36,1);}
}
@media(prefers-reduced-motion:reduce){#mobile-project-title{transition:none!important}}

/* The mobile gallery uses the same images and drawings in a single reading column. */
@media(max-width:767px){
 .gallery-page{height:auto!important;min-height:100svh;padding:88px 0 96px;}
 .gallery-page>.h-14,.gallery-page>.h-24{display:none}
 .gallery-artboard{width:100%!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;gap:72px;padding:0 26px;}
 .gallery-artboard>a{display:block;position:relative;width:100%;z-index:1;}
 .gallery-artboard>a>div{position:relative!important;top:auto!important;left:auto!important;}
 .gallery-artboard>a img{display:block;width:100%!important;height:auto!important;max-width:100%;}
 .gallery-puppets{inset:0;pointer-events:none;z-index:3;}
 .gallery-puppets>div:nth-child(1){left:-20px!important;top:8px!important;transform:scale(.8);transform-origin:0 0;}
 .gallery-puppets>div:nth-child(2){left:calc(100% - 155px)!important;top:20%!important;transform:scale(.8);transform-origin:0 0;}
 .gallery-puppets>div:nth-child(3){left:calc(100% - 80px)!important;top:42%!important;transform:scale(.18);transform-origin:0 0;}
 .gallery-puppets>div:nth-child(4){left:-30px!important;top:65%!important;transform:scale(.95);transform-origin:0 0;}
 .gallery-puppets>div:nth-child(5){left:-25px!important;top:86%!important;transform:scale(.32);transform-origin:0 0;}
}

/* Attach each puppet's actual rotation pivot to the screen edge. */
@media(max-width:767px){
 .gallery-puppets>div:nth-child(1){left:-38.4px!important;}
 .gallery-puppets>div:nth-child(2){left:calc(100% - 209.6px)!important;}
 .gallery-puppets>div:nth-child(3){left:calc(100% - 24.48px)!important;}
 .gallery-puppets>div:nth-child(4){left:-29.45px!important;}
 .gallery-puppets>div:nth-child(5){left:-209.28px!important;}
 .preview-project .h-24>.project-credits{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;padding:18px 0 24px;margin:0 4px;align-items:start;}
 .project-credits>div{text-align:left!important;min-width:0;overflow-wrap:anywhere;}
 .project-credits>div>div:first-child{font-size:10px;line-height:1.4;letter-spacing:.04em;padding:0 0 8px;}
 .project-credits>div>div:not(:first-child){font-size:12px;line-height:1.55;white-space:pre-line;}
}