/* Reference-led portrait composition. The user's requested frosted material,
   dimensional title and orbital cards are intentional exceptions to the
   otherwise flat visual language of the portfolio. */
.hero{height:100svh;min-height:760px;padding:112px var(--gutter) 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden;isolation:auto}
.hero-center{flex:none;z-index:6;transform:none;width:100%;position:relative}
.hero h1.matte-title{position:relative;display:inline-block;width:auto;font-size:clamp(86px,10.2vw,174px);letter-spacing:-.065em;line-height:1.04;padding:0 .12em .04em 0;transform:perspective(1000px) rotateX(9deg) rotateY(-5deg);color:rgba(36,37,33,.76);-webkit-text-stroke:.65px rgba(255,255,255,.45);text-shadow:1px 1px 0 #a6a59f,2px 2px 0 #85857e,3px 3px 0 #74756e,4px 4px 0 #62645b,5px 5px 0 #55584f,6px 6px 0 rgba(73,76,66,.6),8px 9px 0 rgba(47,49,43,.13),12px 15px 18px rgba(35,39,31,.14)}
.matte-title::after{content:attr(data-title);position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-stroke:.4px rgba(250,249,244,.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23818178' filter='url(%23n)' opacity='.26' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-clip:text;-webkit-background-clip:text;opacity:.34;text-shadow:none}
.hero .hero-role{font-size:clamp(14px,1.25vw,20px);letter-spacing:-.02em;margin-top:15px;font-weight:600;font-style:normal}
.hero .hero-description{font-size:15px;font-weight:400;font-style:normal;color:#66685d;line-height:1.5;max-width:480px;margin-top:7px}
.portrait-orbit{position:relative;flex:1;width:min(1100px,100%);min-height:430px;margin:12px auto 0;--orbit-x:0deg;--orbit-y:0deg}
.hero-portrait{position:absolute;bottom:-34px;left:50%;width:clamp(300px,36vw,560px);height:100%;transform:translateX(-50%);z-index:3;mix-blend-mode:multiply;pointer-events:none}
.hero-portrait img{height:100%;width:100%;object-fit:contain;object-position:bottom center;filter:grayscale(1) contrast(1.02);mask-image:linear-gradient(to bottom,#000 89%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 89%,transparent 100%)}
.orbit-space{position:absolute;inset:8% 12% 9%;perspective:900px;pointer-events:none;z-index:0}.orbit-plane{position:absolute;inset:5% 0 15%;border:1px solid rgba(86,91,77,.13);border-radius:50%;transform:rotateX(55deg) rotateZ(-9deg);transform-origin:center}
.orbit-card{position:absolute;z-index:4;width:clamp(192px,20vw,250px);min-height:112px;border-radius:15px;background:rgba(255,255,252,.77);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:23px 20px;display:flex;gap:13px;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(77,80,67,.07),0 14px 35px -22px rgba(56,61,47,.3);transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--angle,0deg)) rotateY(var(--turn,0deg));transition:transform .55s var(--ease),background .25s ease,box-shadow .25s ease;will-change:transform}
.skill-symbol{width:32px;height:35px;flex:none;border-radius:10px;background:#e5e8dd;display:grid;place-items:center;font-size:21px;font-family:Arial,sans-serif;color:#475344}.orbit-card-content{display:flex;flex-direction:column;gap:5px}.orbit-card strong{font-size:16px;line-height:1.25;letter-spacing:-.4px;font-weight:500}.orbit-card-content>span{font-size:12px;line-height:1.45;color:#75786d}
.orbit-research{left:3%;top:7%;--angle:-9deg;--turn:12deg;z-index:2;background:rgba(255,255,252,.65)}
.orbit-mechanics{right:3%;top:8%;--angle:8deg;--turn:-12deg;z-index:2;background:rgba(255,255,252,.65)}
.orbit-form{left:0;top:40%;--angle:-7deg;--turn:16deg}
.orbit-digital{right:0;top:41%;--angle:8deg;--turn:-16deg}
.orbit-making{left:14%;top:71%;--angle:-6deg;--turn:7deg;background:rgba(49,53,45,.87);color:#fbfaf5;z-index:5}
.orbit-making .orbit-card-content>span{color:#d0d3c7}.orbit-making .skill-symbol{background:rgba(255,255,255,.12);color:#eff3e7}
.orbit-expression{right:12%;top:72%;--angle:7deg;--turn:-7deg;z-index:5}
.hero-bottom{z-index:8;bottom:22px;align-items:center;font-size:13px;pointer-events:none}.hero-bottom>a{pointer-events:auto}.hero-bottom>p{max-width:180px}.hero-bottom .scroll-link{padding:9px 13px;background:rgba(244,242,236,.82);border-radius:24px;font-size:13px}.hero-bottom .scroll-link span:last-child{font-size:20px}
@media(hover:hover) and (pointer:fine){.orbit-card:hover{transform:translate3d(var(--dx,0px),calc(var(--dy,0px) - 9px),10px) rotate(0deg) rotateY(0deg);background:rgba(255,255,252,.95);box-shadow:inset 0 1px 0 white,0 22px 35px -20px rgba(56,61,47,.3)}.orbit-making:hover{background:#343a2d}}
@media(min-width:1650px){.portrait-orbit{width:min(1300px,88vw)}.hero{padding-top:130px}.hero-portrait{width:560px}.orbit-card{width:285px;min-height:130px}.orbit-card strong{font-size:18px}.orbit-card-content>span{font-size:14px}}
@media(max-width:1000px){.hero{padding-top:120px;min-height:800px}.hero h1.matte-title{font-size:12vw}.portrait-orbit{width:100%;min-height:440px}.hero-portrait{width:400px;max-height:none}.hero-portrait img{object-position:center center}.orbit-card{width:200px;padding:19px 15px;gap:10px;min-height:102px}.orbit-card strong{font-size:15px}.orbit-research{left:0;top:6%}.orbit-mechanics{right:0;top:7%}.orbit-form{left:0;top:38%}.orbit-digital{right:0;top:40%}.orbit-making{left:4%;top:70%}.orbit-expression{right:3%;top:72%}.skill-symbol{width:28px;height:32px;font-size:18px}}
@media(max-width:700px){.hero{min-height:820px;padding:114px 16px 0;height:100svh}.hero h1.matte-title{font-size:13.6vw;letter-spacing:-.065em;padding-right:.13em;text-shadow:1px 1px 0 #92938b,2px 2px 0 #7a7d72,3px 3px 0 #63685b,4px 4px 0 rgba(63,69,57,.6),7px 9px 12px rgba(35,39,31,.16)}.hero .hero-role{font-size:13px;max-width:290px;margin:17px auto 0}.hero .hero-description{font-size:13px;max-width:270px;margin-top:9px}.portrait-orbit{min-height:480px;margin-top:21px;width:100%}.hero-portrait{width:245px;height:100%;max-height:400px;bottom:36px}.hero-portrait img{object-position:bottom center}.orbit-card{width:132px;padding:14px 11px;min-height:94px;border-radius:12px;gap:0;display:block}.skill-symbol{display:none}.orbit-card strong{font-size:13px;font-weight:600;letter-spacing:-.3px;line-height:1.25}.orbit-card-content{gap:7px}.orbit-card-content>span{font-size:11px;line-height:1.35}.orbit-research{left:1%;top:5%;--angle:-9deg;--turn:0deg}.orbit-mechanics{right:1%;top:6%;--angle:8deg;--turn:0deg}.orbit-form{left:0;top:37%;--angle:-7deg;--turn:6deg}.orbit-digital{right:0;top:39%;--angle:7deg;--turn:-6deg}.orbit-making{left:4%;top:70%;--angle:-6deg;--turn:0deg}.orbit-expression{right:2%;top:73%;--angle:7deg;--turn:0deg}.orbit-space{inset:12% 2% 16%}.hero-bottom{left:22px;right:22px;bottom:20px;gap:8px;font-size:11px}.hero-bottom>p:first-child{max-width:135px}.hero-bottom .scroll-link{font-size:12px;gap:10px;background:var(--paper);padding:6px 8px}.hero-bottom .scroll-link span:last-child{font-size:18px}}
@media(max-width:360px){.orbit-card{width:119px}.orbit-card strong{font-size:12px}.orbit-card-content>span{font-size:10px}.hero-portrait{width:220px}}
@media(prefers-reduced-motion:reduce){.orbit-card{will-change:auto}.hero-center{animation:none}}
/* The glass orbit and sculptural material layer. */
.hero-portrait{mix-blend-mode:normal}
.hero-portrait img{filter:contrast(1.15) brightness(.97) drop-shadow(18px 16px 14px rgba(55,47,31,.23));mask-image:none;-webkit-mask-image:none}
.hero-portrait::after{content:"";position:absolute;bottom:1%;left:21%;width:61%;height:17px;border-radius:50%;background:rgba(58,51,37,.19);filter:blur(13px);z-index:-1}
.orbit-card,.orbit-research,.orbit-mechanics,.orbit-making{background:rgba(255,255,253,.34);border:1px solid rgba(255,255,255,.77);backdrop-filter:blur(24px) saturate(.85);-webkit-backdrop-filter:blur(24px) saturate(.85);box-shadow:inset 0 1px 1px rgba(255,255,255,.92),inset 0 -1px 0 rgba(99,105,91,.12),0 12px 30px -16px rgba(61,65,49,.26);color:var(--ink);isolation:isolate}
.orbit-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.5;background-image:linear-gradient(135deg,rgba(255,255,255,.43),rgba(255,255,255,.04) 52%,rgba(203,209,194,.18)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23g)' opacity='.12' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}
.orbit-card .orbit-card-content>span,.orbit-making .orbit-card-content>span{color:#4f5749}
.orbit-card .skill-symbol,.orbit-making .skill-symbol{background:rgba(224,230,215,.62);color:#475344}
.portrait-orbit.is-orbiting .orbit-card{left:50%;top:50%;right:auto;bottom:auto;opacity:var(--orbit-opacity,1);transform:translate(-50%,-50%) translate3d(var(--orbit-px,0px),var(--orbit-py,0px),0) rotate(var(--orbit-angle,0deg)) rotateY(var(--orbit-turn,0deg)) scale(var(--orbit-scale,1));transition:background .2s ease,box-shadow .2s ease;will-change:transform}
.orbit-control{position:absolute;right:var(--gutter);bottom:66px;z-index:9;background:rgba(244,242,236,.85);border:0;border-radius:16px;padding:7px 11px;font-size:12px;color:#535b4b}
.orbit-control:hover{text-decoration:underline;text-underline-offset:4px}
.orbit-control:disabled{cursor:default;opacity:.6;text-decoration:none}
@media(hover:hover) and (pointer:fine){.portrait-orbit.is-orbiting .orbit-card:hover,.portrait-orbit.is-orbiting .orbit-making:hover{background:rgba(255,255,253,.58);box-shadow:inset 0 1px 1px white,inset 0 -1px 0 rgba(99,105,91,.12),0 17px 32px -14px rgba(61,65,49,.27)}}
@media(max-width:700px){.portrait-orbit.is-orbiting .orbit-card{width:112px;min-height:102px;padding:13px 10px}.orbit-control{bottom:57px;right:20px;font-size:11px}.hero-portrait img{filter:contrast(1.15) brightness(.97) drop-shadow(10px 9px 9px rgba(55,47,31,.24))}}
@media(prefers-reduced-motion:reduce){.portrait-orbit.is-orbiting .orbit-card{will-change:auto}}
/* Neutral grey skill symbols and cartoon portrait treatment. */
.orbit-card .skill-symbol,.orbit-making .skill-symbol{color:#777;background:rgba(225,225,222,.68)}
.skill-symbol svg{display:block;width:23px;height:23px}
.hero-portrait img{filter:contrast(1.03) drop-shadow(16px 17px 16px rgba(40,40,37,.22))}
.hero-portrait::after{background:rgba(45,45,42,.16)}
.orbit-plane{border-color:rgba(105,105,100,.09)}
@media(max-width:700px){.hero-portrait img{filter:contrast(1.03) drop-shadow(8px 10px 10px rgba(40,40,37,.22))}}