/* One pinned stage: the machine evolves into the person behind the work. */
.hero-journey{height:270svh;position:relative;background:#181818;--evolution:0;--hero-alpha:1;--experience-alpha:0}
.journey-stage{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;background:#181818}
.hero-journey .curious-hero{position:absolute;inset:0;height:100%;min-height:0;max-height:none;opacity:var(--hero-alpha);transform:translateY(calc(var(--evolution)*-100px));overflow:hidden}
.hero-journey .curious-copy{top:18%;width:94%;transform:translateX(-50%)}
.hero-journey .curious-copy h1{font-size:clamp(64px,12.8vw,188px);line-height:1;letter-spacing:-.075em;position:relative}
.hero-journey .curious-title-line{animation:none;white-space:nowrap}
.hero-journey .curious-copy em.pen-design{position:absolute;left:50%;top:-.63em;width:5.25em;transform:translateX(-50%) rotate(-4deg);font-size:.72em;animation:none;z-index:5}
.hero-journey .curious-description{font-size:clamp(12px,1.4vw,20px);margin:38px auto 0;line-height:1.45}
.hero-journey .computer-interaction{width:clamp(390px,43vw,610px);height:57%;aspect-ratio:auto;bottom:-2%;border:0;background:none;cursor:default;touch-action:pan-y}
.hero-journey .computer-shell{mask:none!important;-webkit-mask:none!important}
.hero-journey .computer-image-wrap{height:100%;aspect-ratio:1;width:auto}
.hero-journey .computer-stage{mask-image:linear-gradient(#000 88%,transparent 100%)}
.hero-journey .retro-fission{position:absolute;inset:0;width:100%;height:100%;opacity:.68;pointer-events:none}
.hero-journey .hero-story{position:absolute;inset:0;height:100%;opacity:var(--experience-alpha);background:transparent;pointer-events:none}
.hero-journey .hero-story .hero-stage{position:absolute;inset:0;height:100%;min-height:0;background:transparent;overflow:hidden}
.hero-journey .hero-person{position:absolute;top:5%;left:50%;width:min(49vw,calc(96svh * .563));height:96%;transform:translateX(-50%) translateY(calc((1 - var(--evolution))*190px)) scale(calc(.72 + var(--evolution)*.28));opacity:1;z-index:3;pointer-events:auto;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 9%,#000 84%,transparent);mask-composite:intersect;isolation:isolate}
.hero-journey .hero-person>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;transform:none;filter:none;opacity:1}
.portrait-collage{position:absolute;inset:0;mask:url(#collage-wet-mask);-webkit-mask:url(#collage-wet-mask);pointer-events:none}
.collage-piece{position:absolute;inset:0;opacity:0;transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--turn)) scale(.7);transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .5s;transition-delay:var(--delay);background-position:center top;background-size:contain;background-repeat:no-repeat;mix-blend-mode:normal;filter:var(--tint)}
.is-collaged .collage-piece{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
.paper-collage{font:700 11px/1.5 monospace;color:#232321;background:#d7c8a4;filter:none;display:grid;place-items:center;letter-spacing:.08em}
.hero-journey .hero-about{z-index:4;pointer-events:none}
.hero-journey .about-identity{top:20%;left:5.5%;width:23%}
.hero-journey .about-copy{top:23%;right:5.5%;width:26%}
.hero-journey .career-scene{top:52%;z-index:2;pointer-events:auto}
.hero-journey .career-entry{width:39vw}
.hero-journey .career-signature{top:72%;z-index:5;width:min(51vw,720px);pointer-events:none}
.hero-journey .hero-contours{opacity:.28}
.hero-journey .hero-story:after{content:'';position:absolute;inset:auto 0 0;height:80px;background:linear-gradient(transparent,#181818);pointer-events:none}
.experience-portrait:focus-visible{outline:1px dashed #fa2b91;outline-offset:-35px}
@media(max-width:760px){.journey-stage{min-height:620px}.hero-journey{height:260svh}.hero-journey .curious-copy{top:24%}.hero-journey .curious-copy h1{font-size:13.1vw}.hero-journey .curious-copy em.pen-design{top:-.8em;font-size:.79em}.hero-journey .curious-description{font-size:12px;margin-top:25px}.hero-journey .computer-interaction{width:100%;height:49%;bottom:0}.hero-journey .hero-person{top:14%;width:84vw;height:85%}.hero-journey .about-identity{top:13%;left:6%;width:32%}.hero-journey .about-copy{top:14%;right:6%;width:42%}.hero-journey .about-copy .about-lead{font-size:11px}.hero-journey .about-copy .about-detail{font-size:9px}.hero-journey .career-scene{top:57%}.hero-journey .career-entry{width:78vw}.hero-journey .career-signature{top:79%;width:92vw}.hero-journey .curious-side{font-size:7px}.hero-journey .curious-scroll{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-journey{height:auto}.journey-stage{position:relative;height:auto;overflow:visible}.hero-journey .curious-hero{position:relative;height:100svh;opacity:1;transform:none}.hero-journey .hero-story{position:relative;height:100svh;opacity:1;--about-alpha:1;--career-alpha:1;--signature-alpha:1;--evolution:1}.collage-piece{opacity:1;transform:none;transition:none}.ink-reveal{opacity:1!important;stroke-dashoffset:0!important}}
.hero-journey .curious-copy{left:50%}
.hero-journey .hero-story{--career-alpha:inherit;--signature-alpha:inherit;--rail-x:inherit;--progress:inherit}
.hero-journey .hero-person>img{mask-image:none;-webkit-mask-image:none}
.journey-stage>.retro-fission{position:absolute;inset:0;width:100%;height:100%;opacity:.52;pointer-events:none;z-index:0}
.hero-journey .curious-hero{background:transparent}
.hero-journey .portrait-collage{mask-image:url(#collage-wet-mask);-webkit-mask-image:url(#collage-wet-mask)}
@media(max-width:760px){.hero-journey .hero-person{width:min(84vw,calc(85svh * .563))}.hero-journey .curious-copy h1{font-size:12.8vw;letter-spacing:-.075em}.hero-journey .paper-collage{font-size:8px}}
.hero-journey .curious-copy em.pen-design{top:-.17em}
.hero-journey .curious-description{margin-top:26px}
.hero-journey .career-signature{top:65%;width:min(42vw,620px)}
.hero-journey .computer-interaction{filter:blur(calc(var(--evolution)*5px))}
.hero-journey .hero-person{filter:blur(calc((1 - var(--evolution))*9px))}
@media(max-width:760px){.hero-journey .curious-copy em.pen-design{top:-.3em}.hero-journey .hero-person{width:84vw;height:min(85svh,149.25vw)}.hero-journey .career-scene{top:66%;z-index:4;padding:10px 0;background:linear-gradient(transparent,#181818b3 25%,#181818bb 80%,transparent)}.hero-journey .career-entry{padding:10px 22px;width:78vw}.hero-journey .career-entry h2{font-size:25px;margin:10px 0}.hero-journey .career-entry h2 span{font-size:13px}.hero-journey .career-entry p{font-size:10px}.hero-journey .career-entry small{font-size:8px}.hero-journey .career-signature{top:83%;width:74vw}.hero-journey .career-pause{top:-20px;right:22px}}
/* Hide fallback text entirely; the sole loading character blinks in the dark. */
html.is-loading{overflow:hidden}
.is-loading .topbar,.is-loading .curious-copy,.is-loading .collage-backdrop,.is-loading .curious-scroll,.is-loading .curious-side,.is-loading .hero-story{visibility:hidden!important}
.is-loading .computer-interaction{bottom:50%;transform:translate(-50%,50%);height:50%;transition:none}
.is-loading .crt-eye-pair{transform-box:fill-box;transform-origin:center;animation:loader-blink 1.3s infinite}
@keyframes loader-blink{0%,35%,46%,100%{scale:1 1}40%,43%{scale:1 .07}}
html:not(.is-ready) .curious-copy .ink-reveal{animation-play-state:paused}
.curiosity-ready .ink-reveal{animation-play-state:running}
.curious-copy em:not(.pen-design){visibility:hidden}
.hero-journey .curious-description{position:absolute;top:40%;left:50%;width:min(680px,80vw);min-height:3em;transform:translateX(-50%);margin:0;opacity:.72;text-align:center;pointer-events:none;z-index:0;transition:top 1.8s cubic-bezier(.16,1,.3,1),width 1.8s,font-size 1.8s;line-height:1.5}
.orbit-active .curious-description{top:57%;width:280px;font-size:11px;transform:translate(-50%,-50%) rotate(var(--orbit-turn,0rad)) translateY(-330px);transform-origin:center;opacity:.5}
.hero-journey .portfolio-roll{display:inline-block;line-height:1.06;overflow:hidden;vertical-align:top}
.hero-journey .hero-person{width:min(65vw,840px);height:83%;top:8%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(transparent,#000 8%,#000 86%,transparent);mask-composite:intersect}
.hero-journey .hero-person>img{object-fit:cover;object-position:center top;height:auto;width:100%;aspect-ratio:941/1672}
.hero-journey .portrait-collage{height:100%;background:none}
.hero-journey .career-signature{z-index:5;top:72%;width:min(40vw,560px)}
.hero-journey .career-entry{opacity:0;translate:70vw -26vh;rotate:12deg;transition:translate 1.1s cubic-bezier(.16,1,.3,1),rotate 1.1s,opacity .7s;transition-delay:calc(var(--entry-i,0)*.12s)}
.hero-journey .experience-active .career-entry{opacity:1;translate:0 0;rotate:0deg}
@media(max-width:760px){.hero-journey .curious-description{top:35%;font-size:11px}.orbit-active .curious-description{top:57%;width:160px;font-size:8px;transform:translate(-50%,-50%) rotate(var(--orbit-turn,0rad)) translateY(-150px)}.hero-journey .hero-person{top:19%;width:112vw;height:57%}.hero-journey .career-scene{top:65%}.hero-journey .career-signature{top:83%;width:74vw}}
@media(prefers-reduced-motion:reduce){.is-loading .crt-eye-pair{animation:none}.hero-journey .career-entry{opacity:1;translate:none;rotate:none;transition:none}.hero-journey .curious-description{transform:translateX(-50%)}.hero-journey .hero-person{filter:none}}
.is-loading .retro-fission{visibility:hidden}
.hero-journey .hero-person{width:min(58vw,calc(83svh * .771))}
.hero-journey .collage-piece{background-size:100% auto;background-repeat:no-repeat;background-position:center top}
@media(max-width:760px){.hero-journey .hero-person{width:112vw;height:57%}}