.home-intro{position:relative;isolation:isolate;min-height:65vh;align-items:center;overflow:hidden;padding-top:80px;padding-bottom:90px}
.home-intro>div:not(.ambient-motion){position:relative;z-index:1}
.home-intro h1{font-size:clamp(42px,4.7vw,76px)}
.home-intro .intro-aside{align-self:flex-end;margin-bottom:35px}
.ambient-motion{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-motion:before,.ambient-motion:after{content:'';position:absolute;width:48vw;height:48vw;max-width:720px;max-height:720px;border-radius:50%;filter:blur(65px);opacity:.3;animation:ambient-drift 18s ease-in-out infinite alternate}
.ambient-motion:before{right:-12%;top:-45%;background:radial-gradient(circle,rgba(169,198,238,.5),transparent 65%)}
.ambient-motion:after{right:5%;bottom:-80%;background:radial-gradient(circle,rgba(176,170,218,.4),transparent 65%);animation-delay:-9s}
[data-theme=dark] .ambient-motion:before{background:radial-gradient(circle,rgba(72,102,159,.55),transparent 65%);opacity:.35}
[data-theme=dark] .ambient-motion:after{background:radial-gradient(circle,rgba(102,77,146,.45),transparent 65%);opacity:.35}
@keyframes ambient-drift{from{transform:translate(-25px,0) scale(.9)}to{transform:translate(40px,60px) scale(1.1)}}
.projects-heading{padding:50px 5% 40px}.projects-heading h1{font-size:clamp(36px,4vw,60px)}.projects-heading>p:last-child{font-size:18px;line-height:1.5;color:#777;margin:22px 0 0}
.projects .project-copy{margin-top:190px;min-height:180px}.projects{gap:24px}
@media(min-width:1350px){.projects{grid-template-columns:repeat(3,minmax(0,1fr))}.projects .project-copy{padding:23px}.projects .project h2{font-size:27px}}
@media(max-width:700px){header{flex-wrap:wrap}header nav{gap:16px}.home-intro{min-height:66vh;padding-top:55px;padding-bottom:50px}.home-intro .intro-aside{margin-bottom:0;margin-top:35px}.ambient-motion:before,.ambient-motion:after{width:100vw;height:100vw}.projects-heading{padding:40px 6% 30px}.projects .project-copy{margin-top:190px;min-height:0}}
@media(prefers-reduced-motion:reduce){.ambient-motion:before,.ambient-motion:after{animation:none}}
.is-home{isolation:isolate;min-height:100vh}
.is-home .home-intro{isolation:auto;overflow:visible}
.is-home .ambient-motion{position:fixed;inset:0;z-index:-1}
.is-home .ambient-motion:before,.is-home .ambient-motion:after{width:90vmax;height:90vmax;max-width:none;max-height:none;filter:blur(75px)}
.is-home .ambient-motion:before{right:-25vmax;top:-38vmax}
.is-home .ambient-motion:after{left:-30vmax;right:auto;bottom:-45vmax}
.hero-designer{display:flex;align-items:center;gap:13px}
.hero-pen{width:32px;height:32px;flex:none;transform:rotate(-35deg);color:#555;transition:transform .35s ease,color .35s ease}
[data-theme=dark] .hero-pen{color:#b5b5be}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.hero-designer:hover .hero-pen{transform:rotate(-20deg) translateY(-2px);color:var(--link-hover)}}
@media(prefers-reduced-motion:reduce){.hero-pen{transition:none}}
.hero-pen.pen-enter{animation:pen-arrive 2.8s cubic-bezier(.16,1,.3,1) both;transform-origin:center}
@keyframes pen-arrive{0%{opacity:0;transform:translate(180px,100px) rotate(-55deg) scale(18);filter:blur(10px)}18%{opacity:.65;transform:translate(180px,100px) rotate(-35deg) scale(18);filter:blur(0)}52%{opacity:.8;transform:translate(180px,100px) rotate(-35deg) scale(18);filter:blur(0)}100%{opacity:1;transform:translate(0,0) rotate(-35deg) scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.hero-pen.pen-enter{animation:none}}


.hero-pen{overflow:visible}
.pen-anchors{opacity:0;color:var(--link-hover);pointer-events:none}
.pen-enter .pen-anchors{animation:anchor-appear 2.8s ease both}
.pen-enter .pen-handles{transform-origin:16px 24px;animation:handle-adjust 2.8s ease-in-out both}
.pen-enter .pen-curve{stroke-dasharray:55;stroke-dashoffset:55;animation:curve-draw 2.8s ease both}
@keyframes anchor-appear{0%,12%{opacity:0}24%,48%{opacity:.8}65%,100%{opacity:0}}
@keyframes handle-adjust{0%,20%{transform:translateY(3px) scaleX(.75)}42%,100%{transform:translateY(0) scaleX(1)}}
@keyframes curve-draw{0%,18%{stroke-dashoffset:55;transform:translateY(3px) scaleX(.85);transform-origin:center}43%,100%{stroke-dashoffset:0;transform:translateY(0) scaleX(1);transform-origin:center}}
@media(prefers-reduced-motion:reduce){.pen-enter .pen-anchors,.pen-enter .pen-handles,.pen-enter .pen-curve{animation:none}}
.hero-pen.pen-enter{animation-name:pen-arrive-clear}
@keyframes pen-arrive-clear{
 0%{opacity:0;transform:translate(180px,100px) rotate(-55deg) scale(18);filter:blur(10px)}
 18%{opacity:.65;transform:translate(180px,100px) rotate(-35deg) scale(18);filter:blur(0)}
 48%{opacity:.8;transform:translate(180px,100px) rotate(-35deg) scale(18);filter:blur(0)}
 64%{opacity:0;transform:translate(80px,40px) rotate(-35deg) scale(8);filter:blur(3px)}
 70%{opacity:0;transform:translate(0,0) rotate(-35deg) scale(1);filter:blur(0)}
 100%{opacity:1;transform:translate(0,0) rotate(-35deg) scale(1);filter:blur(0)}
}
.hero-label-enter{animation:hero-label-arrive .65s ease 1.75s both}
@keyframes hero-label-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-label-enter{animation:none}}
@media(hover:hover) and (pointer:fine){
 .projects .project{height:370px;min-height:0}
 .projects .project-copy{position:absolute;left:0;right:0;bottom:0;margin-top:0;min-height:180px;padding:23px 26px;transform:translateY(calc(100% - 80px));transition:transform .45s cubic-bezier(.2,.7,.2,1),background .4s,backdrop-filter .4s}
 .projects .project:hover .project-copy,.projects .project:focus-visible .project-copy{transform:translateY(0);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
 .projects .project:focus-visible .project-copy{background:rgba(250,250,252,.85)}
 [data-theme=dark] .projects .project:focus-visible .project-copy{background:rgba(24,24,29,.85)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.projects .project-copy{transition:none}}