/* Independent playful hero direction */
.curious-hero{position:relative;height:100svh;min-height:720px;overflow:hidden;background:#181818;color:#eeede7;isolation:isolate}
.curious-copy{position:absolute;top:17%;left:0;width:100%;padding:0 24px;text-align:center;z-index:3}
.curious-kicker{font-size:10px;letter-spacing:.2em;color:#aaa89f;margin:0 0 25px}
.curious-copy h1{font-size:clamp(48px,6.6vw,100px);font-weight:500;letter-spacing:-.065em;line-height:.98;margin:0}
.curious-copy h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}.curious-dot{color:#dfb7ce}
.curious-description{font-size:13px;color:#a9a69f;margin:22px 0 0}
.curious-portrait{position:absolute;top:49%;left:50%;width:clamp(460px,43vw,640px);transform:translateX(-50%);mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}
.curious-portrait>img{display:block;width:100%;height:auto;filter:grayscale(1)}
.curious-portrait:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#181818,transparent 10%,transparent 88%)}
.curious-eyes{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1);pointer-events:none}.eye-iris{will-change:transform}
.curious-scroll{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:4;font-size:11px;color:#e3dfd5;letter-spacing:.04em;white-space:nowrap}.curious-scroll span{display:inline-block;margin-left:16px}
.curious-side{position:absolute;left:28px;bottom:40px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.18em;color:#77766f}
@media(max-width:760px){.curious-hero{min-height:650px}.curious-copy{top:20%}.curious-copy h1{font-size:clamp(43px,11vw,70px)}.curious-kicker{font-size:8px;letter-spacing:.14em}.curious-description{font-size:11px}.curious-portrait{top:48%;width:440px}.curious-side{left:14px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.eye-iris{will-change:auto}}

/* Real photographic eyes; crop ends halfway down the nose */
.curious-portrait{top:auto;bottom:0;height:auto;aspect-ratio:941 / 666;overflow:hidden}
.curious-portrait>img{width:100%;height:auto;max-width:none}
.curious-scroll{left:auto;right:var(--gutter);transform:none;bottom:28px}
@media(max-width:760px){.curious-portrait{top:auto;bottom:0;width:min(440px,112vw)}.curious-scroll{right:18px;bottom:18px;font-size:9px}.curious-copy{top:20%}}

/* Portfolio typography paired with the original drawn signature */
.curious-copy{top:17%}
.curious-copy h1{font-family:'ABC Normal','ABC Nord',sans-serif;font-weight:900;font-size:clamp(48px,6.1vw,94px);letter-spacing:-.055em;line-height:1.13}
.curious-title-line{display:block}
.curious-copy h1 em.pen-design{position:relative;display:inline-block;width:3.05em;height:1em;margin-right:.08em;vertical-align:middle;color:#ff278b;transform:rotate(-5deg)}
.curious-copy h1 em .signature-drawing{position:absolute;top:-.25em;left:0;width:100%;height:auto}
.curious-description{margin-top:26px}
.hair-ribbons{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
@media(max-width:760px){
 .curious-copy{top:21%;padding:0 12px}
 .curious-copy h1{font-size:clamp(29px,7.65vw,58px);line-height:1.25}
 .curious-description{margin-top:22px}
}

/* Compact opening with the signature threading across both title lines */
.curious-hero{height:86svh;min-height:680px;max-height:820px}
.curious-copy{top:14%}
.curious-copy h1{position:relative;width:max-content;max-width:100%;margin:0 auto;font-size:clamp(48px,6.1vw,88px);line-height:1.1}
.curious-copy h1 em.pen-design{position:absolute;left:50%;top:.25em;width:4.6em;height:1.35em;margin:0;transform:translateX(-50%) rotate(-17deg);z-index:2;pointer-events:none}
.curious-copy h1 em .signature-drawing{top:-.25em}
.curious-description{margin-top:28px}
.curious-portrait{width:clamp(500px,48vw,690px)}
.curious-portrait>img{filter:none}
@media(max-width:760px){
 .curious-hero{height:82svh;min-height:600px;max-height:760px}
 .curious-copy{top:17%}
 .curious-copy h1{font-size:clamp(34px,9.5vw,62px)}
 .curious-copy h1 em.pen-design{width:4.25em;top:.3em}
 .curious-portrait{width:min(480px,120vw)}
 .curious-description{margin-top:26px;font-size:10px}
}
.curious-portrait:before{background:linear-gradient(#181818 0%,rgba(24,24,24,.96) 9%,transparent 24%,transparent 100%)}
/* Retro print collage: fragments stay outside the central reading column */
.curious-hero{background:#1b1a18}
.collage-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.collage-backdrop:after{content:'';position:absolute;inset:-8%;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h190v190H0z' filter='url(%23grain)' opacity='.8'/%3E%3C/svg%3E");animation:print-jitter 1.2s steps(2,end) infinite}
.paper-scrap{position:absolute;display:block;box-shadow:3px 5px 0 #0003;background-image:repeating-linear-gradient(0deg,transparent 0 5px,#29221715 5px 6px);clip-path:polygon(2% 1%,94% 0,100% 12%,97% 25%,100% 44%,96% 62%,100% 79%,97% 98%,5% 100%,0 86%,3% 72%,0 51%,4% 35%,0 17%)}
.scrap-ochre{width:clamp(90px,16vw,225px);height:45%;left:-8%;top:18%;background-color:#b59d59;transform:rotate(-14deg);animation:scrap-drift 11s ease-in-out infinite alternate}
.scrap-blue{width:clamp(80px,13vw,190px);height:36%;right:-6%;top:42%;background-color:#638a8d;transform:rotate(19deg);animation:scrap-drift 14s -5s ease-in-out infinite alternate-reverse}
.scrap-pink{width:11%;height:15%;right:9%;bottom:-7%;background-color:#b77580;transform:rotate(-17deg);animation:scrap-drift 13s -3s ease-in-out infinite alternate}
.print-orbit{position:absolute;width:320px;aspect-ratio:1;right:-130px;top:10%;border:1px solid #dbcfac45;border-radius:50%;box-shadow:0 0 0 15px #dbcfac08,0 0 0 31px #dbcfac0b;animation:orbit-drift 16s ease-in-out infinite alternate}
.print-registration{position:absolute;left:12%;bottom:20%;font:300 48px/1 var(--sans);color:#bfa984;transform:rotate(-9deg);animation:register-turn 18s ease-in-out infinite alternate}
.collage-edition{position:absolute;right:28px;top:27%;writing-mode:vertical-rl;font:400 9px/1.5 var(--sans);letter-spacing:.16em;color:#c9bea0}
.curious-portrait{z-index:1}
.hair-ribbons{z-index:3;overflow:visible}
.ribbon{transform-box:fill-box;transform-origin:center;animation:ribbon-bob 6s ease-in-out infinite alternate}
.ribbon-pink{animation-delay:-2s}.ribbon-blue{animation-delay:-4s}.ribbon-orange{animation-delay:-1s}
.curious-copy h1 em.pen-design{width:5.25em;top:.16em;animation:signature-fling 1.7s cubic-bezier(.16,.8,.24,1) both}
.curious-copy .pen-design .ink-reveal{animation-timing-function:cubic-bezier(.15,.02,.18,1)}
.curious-title-line{animation:title-print-in .75s cubic-bezier(.2,.8,.2,1) both}
.curious-title-line:nth-child(2){animation-delay:.12s}
@keyframes signature-fling{0%{opacity:0;transform:translateX(-57%) rotate(-29deg) scale(.72)}12%{opacity:1}65%{transform:translateX(-49%) rotate(-13deg) scale(1.09)}100%{transform:translateX(-50%) rotate(-17deg) scale(1)}}
@keyframes title-print-in{from{opacity:0;transform:translateY(18px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes ribbon-bob{from{transform:rotate(-3deg) translateY(-2px)}to{transform:rotate(3deg) translateY(3px)}}
@keyframes scrap-drift{from{translate:0 -12px;rotate:-3deg}to{translate:8px 14px;rotate:4deg}}
@keyframes orbit-drift{from{transform:translate(0,-18px)}to{transform:translate(-24px,28px)}}
@keyframes register-turn{from{transform:rotate(-9deg)}to{transform:rotate(81deg)}}
@keyframes print-jitter{0%,100%{transform:translate(0,0)}50%{transform:translate(-1%,1%)}}
@media(max-width:760px){
 .curious-copy h1 em.pen-design{width:4.6em}
 .scrap-ochre{left:-15%;width:25%;top:28%}.scrap-blue{right:-18%;width:27%;top:52%}
 .print-orbit{width:210px;right:-150px}.collage-edition{right:10px;font-size:7px}.print-registration{left:8%;font-size:28px;bottom:35%}
}
@media(prefers-reduced-motion:reduce){.curious-hero *,.curious-hero :after{animation:none!important}.curious-copy .ink-reveal{stroke-dashoffset:0;opacity:1}}
/* Feather the photo into the printed backdrop without a rectangular top edge */
.curious-portrait{mask-image:linear-gradient(to bottom,transparent,black 24%),linear-gradient(to right,transparent,black 12%,black 88%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,black 24%),linear-gradient(to right,transparent,black 12%,black 88%,transparent);-webkit-mask-composite:source-in}
.curious-portrait:before{background:none}
/* Restrained dark direction, continuous with the following experience section */
.curious-hero{background:radial-gradient(ellipse at 65% 57%,#242423 0%,#181818 50%,#101010 100%)}
.paper-scrap,.print-registration,.collage-edition{display:none}
.collage-backdrop:after{opacity:.045;animation:none}
.print-orbit{width:min(72vw,900px);right:-22%;top:13%;border-color:#bdbdb51c;box-shadow:0 0 0 55px #bdbdb506,0 0 0 112px #bdbdb506;animation:orbit-drift 20s ease-in-out infinite alternate}
.curious-hero:after{content:'';position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#101010);z-index:2;pointer-events:none}
.curious-copy h1 em.pen-design{width:4.85em;animation:signature-fling 1.7s cubic-bezier(.16,.8,.24,1) both}
.hair-ribbons{opacity:.82}
@media(max-width:760px){.curious-copy h1 em.pen-design{width:4.4em}.print-orbit{width:580px;right:-115%;top:22%}}
/* Computer persona: real photographic face appears through an ink aperture */
.computer-interaction{position:absolute;bottom:0;left:50%;width:clamp(460px,48vw,690px);aspect-ratio:941 / 666;transform:translateX(-50%);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;z-index:1;perspective:1100px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.computer-stage{position:absolute;inset:0;display:block;transform:translateX(var(--head-shift,0px)) rotateX(var(--head-x,0deg)) rotateY(var(--head-y,0deg));transform-style:preserve-3d;transform-origin:50% 68%;will-change:transform}
.computer-shell{position:absolute;inset:0;display:block;transition:filter .45s,opacity .4s}
.computer-shell>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 24px #0005)}
.computer-interaction .curious-portrait{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;display:block;clip-path:url(#portrait-ink-window);mask-image:linear-gradient(to bottom,transparent,black 15%),linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,black 15%),linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-composite:source-in}
.computer-interaction .curious-portrait>img{width:100%;height:auto;display:block}
.computer-interaction.is-revealed .computer-shell{opacity:0;filter:blur(5px)}
.reveal-defs{position:absolute;pointer-events:none}
.computer-interaction:focus-visible{outline:1px dashed #dbd1b5;outline-offset:-12px;border-radius:30px}
.curious-hero:after{z-index:0}
@media(max-width:760px){.computer-interaction{width:min(480px,120vw)}.computer-shell>img{width:88%;margin:0 auto}.computer-interaction .curious-portrait{width:100%}}
@media(prefers-reduced-motion:reduce){.computer-stage{transform:none;will-change:auto}.computer-shell{transition:none}}
.computer-shell>img{position:absolute;bottom:0;left:0;height:87%;object-position:center bottom}
@media(max-width:760px){.computer-shell>img{left:6%}}
/* Both layers use complementary goo masks: only the local brush is erased */
.computer-interaction .curious-portrait{clip-path:none;mask-image:url(#portrait-fluid-mask);-webkit-mask-image:url(#portrait-fluid-mask);mask-composite:add;-webkit-mask-composite:source-over}
.computer-shell,.computer-interaction.is-revealed .computer-shell{opacity:1;filter:none;transition:none;mask-image:url(#computer-fluid-mask);-webkit-mask-image:url(#computer-fluid-mask)}
.computer-interaction{touch-action:none}
/* Align the photographic eyes behind the CRT screen rather than its disk drive */
.computer-interaction .curious-portrait>img{width:78%;margin-left:11%;transform:translateY(-12%)}
.computer-interaction .hair-ribbons{width:78%;height:78%;left:11%;top:-23.5%}
/* Soft wet mask, with no straight portrait edge inside the brush */
.computer-interaction .curious-portrait>img{width:100%;margin:0;transform:translateY(-17%)}
.computer-interaction .hair-ribbons{width:100%;height:100%;left:0;top:-42.7%}
.computer-interaction .curious-portrait{mask-image:url(#portrait-fluid-mask),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:url(#portrait-fluid-mask),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in}
.computer-image-wrap{position:absolute;bottom:0;left:50%;height:87%;aspect-ratio:1;transform:translateX(-50%);display:block}
.computer-shell .computer-image-wrap>img{position:static;display:block;width:100%;height:100%;margin:0;object-fit:contain;filter:drop-shadow(0 12px 20px #0005)}
.crt-eyes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.retro-fission{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.print-orbit{display:none}
.collage-backdrop:after{opacity:.11;animation:print-jitter 1.8s steps(2,end) infinite}
@media(max-width:760px){.computer-image-wrap{height:82%}}
@media(prefers-reduced-motion:reduce){.collage-backdrop:after{animation:none}}
/* React card morph layer and the letter roll inherit the original typography */
#morph-card-mount{position:absolute;inset:0}
.portfolio-roll{white-space:nowrap}
.portfolio-roll>span[aria-hidden]{letter-spacing:inherit}
.react-morph-field img{filter:saturate(.7)}
.curious-copy{pointer-events:none}
.curious-scroll{pointer-events:auto}