@font-face{font-family:ABC Nord;src:url('assets/fonts/abc-nord-regular.otf') format('opentype');font-weight:400 800;font-display:swap}
@font-face{font-family:ABC Nord;src:url('assets/fonts/abc-nord-thin.otf') format('opentype');font-weight:100 300;font-display:swap}
@font-face{font-family:ABC Normal;src:url('assets/fonts/abc-normal-black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:Meryl Script;src:local('SignPainter-HouseScript'),local('SignPainter');font-weight:400;font-display:swap}
:root{--sans:'ABC Nord','PingFang SC',sans-serif;--mono:'ABC Nord','PingFang SC',sans-serif}
.topbar{grid-template-columns:1fr auto;background:transparent;backdrop-filter:none;border:0;mix-blend-mode:difference;color:#eee}
.topbar .nav{color:#eee}.topbar .nav sup{display:none}
.hero-story{height:460svh;position:relative;background:#202020;--portrait-scale:1;--portrait-x:19;--portrait-alpha:1;--opening-alpha:1;--opening-y:0;--career-alpha:0;--rail-x:100;--signature-alpha:0;--progress:0}
.hero-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 76% 42%,#252525 0%,#181818 35%,#101010 70%,#0b0b0b 100%)}
.hero-stage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' opacity='.35' d='M0 0h170v170H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.hero-opening{position:absolute;inset:23% var(--gutter) auto;z-index:3;opacity:var(--opening-alpha);transform:translate3d(0,calc(var(--opening-y)*1px),0);pointer-events:none}
.hero-opening .eyebrow{margin:0 0 32px;font:400 9px/1.8 var(--sans);letter-spacing:.055em;color:#bdbdb8}
.hero-opening h1{font-family:'ABC Normal','PingFang SC',sans-serif;font-size:clamp(74px,9vw,150px);line-height:.97;font-weight:900;letter-spacing:-.065em;margin:0;width:65%}
.hero-opening h1 span{font-family:var(--sans);color:#bcbcb7;font-weight:100;letter-spacing:-.075em}
.hero-description{font:300 11px/1.9 var(--sans);color:#b6b6b1;margin-top:30px}
.hero-person{position:absolute;inset:0 auto auto 50%;width:min(74vw,1040px);height:105%;z-index:2;transform:translate3d(calc(-50% + var(--portrait-x)*1vw),0,0) scale(var(--portrait-scale));transform-origin:50% 47%;opacity:var(--portrait-alpha);will-change:transform,opacity;mix-blend-mode:normal;pointer-events:none}
.hero-person img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.08);mask-image:radial-gradient(ellipse 52% 61% at 50% 44%,#000 20%,rgba(0,0,0,.96) 43%,rgba(0,0,0,.65) 63%,transparent 89%);-webkit-mask-image:radial-gradient(ellipse 52% 61% at 50% 44%,#000 20%,rgba(0,0,0,.96) 43%,rgba(0,0,0,.65) 63%,transparent 89%)}
.career-scene{position:absolute;inset:44% 0 auto;z-index:3;opacity:var(--career-alpha);pointer-events:none}
.career-rail{display:flex;width:max-content;gap:0;transform:translate3d(calc(var(--rail-x)*1px),0,0);will-change:transform}
.career-entry{width:43vw;max-width:760px;min-width:360px;flex:none;padding:26px 7vw 32px 4vw;position:relative;border-top:1px solid #b7b7ad66}
.career-entry .mono{font-size:9px;letter-spacing:.015em;color:#b6b6ad}
.career-entry h2{font:400 clamp(30px,3.1vw,58px)/1.1 var(--sans);letter-spacing:-.05em;margin:18px 0}
.career-entry h2 span{display:block;font:300 clamp(16px,1.4vw,25px)/1.6 'PingFang SC',sans-serif;letter-spacing:.09em;color:#b3b3a9;margin-bottom:8px}
.career-entry p{font-size:11px;color:#deded6;line-height:1.8;margin:0}.career-entry small{font-size:9px;color:#b0b0a5;line-height:1.8;display:block;margin-top:5px}
.career-signature{position:absolute;z-index:4;top:64%;left:50%;width:max-content;max-width:95vw;text-align:center;transform:translate(-50%,-15%) rotate(-9deg);margin:0;opacity:var(--signature-alpha);font:400 clamp(62px,8.3vw,140px)/.85 'Meryl Script','Snell Roundhand',cursive;color:#e6e2d6;letter-spacing:-.035em;pointer-events:none}
.career-signature span{display:block;margin-left:8vw}
.project-directory{position:relative;z-index:6;background:#e9e9e5;color:#191919;padding:55px 3vw 110px;min-height:100svh}
.directory-heading{display:grid;grid-template-columns:1fr .5fr auto;align-items:start;gap:28px;margin-bottom:140px}
.directory-heading h2,.directory-current,.directory-total{font:300 clamp(45px,6.7vw,112px)/1.03 var(--sans);letter-spacing:-.075em;margin:0}
.directory-total{justify-self:end}.directory-current{font-variant-numeric:tabular-nums}
.directory-layout{display:grid;grid-template-columns:46% 1fr;gap:3vw;align-items:start}
.project-index{position:sticky;top:130px;display:grid;grid-template-columns:1fr 1fr;gap:18px 25px;padding-right:20px}
.project-index a{font-size:clamp(10px,1.05vw,16px);line-height:1.6;letter-spacing:-.035em;text-decoration:none;text-underline-offset:5px;transition:opacity .25s}
.project-index a:hover,.project-index a[aria-current=true]{text-decoration:underline}.project-index a span{font-variant-numeric:tabular-nums}
.directory-gallery{min-width:0}.directory-project{margin-bottom:75px;scroll-margin-top:95px}
.directory-art{aspect-ratio:16/9;overflow:hidden;background:#d4d4d0;position:relative;display:grid;place-items:center}
.directory-art>img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.directory-project:hover .directory-art>img{transform:scale(1.035)}
.directory-art--phone{aspect-ratio:1.2;background:radial-gradient(ellipse at 55% 35%,#f0f0ec,#cacac6)}
.gallery-phone{height:87%;aspect-ratio:9/19.5;padding:7px;overflow:hidden;border:2px solid #858580;border-radius:36px;background:#151515;box-shadow:12px 25px 40px #2223,inset 0 0 0 2px #454542;position:relative;transform:rotate(-6deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.directory-project:hover .gallery-phone{transform:rotate(0deg) translateY(-5px)}
.gallery-phone img{height:100%;width:100%;object-fit:cover;object-position:50% 20%;border-radius:27px}.gallery-island{position:absolute;z-index:2;left:34%;top:12px;width:32%;height:14px;background:#151515;border-radius:30px}
.directory-caption{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:16px}.directory-caption h3{font:400 13px/1.5 var(--sans);margin:0 0 6px}.directory-caption span{font-size:8px;color:#77776f}.directory-play{font:400 10px var(--sans);background:none;padding:10px 0;cursor:pointer}.directory-caption .case-link{margin:0}
.section-label,.footer,.hero-scroll,.hero-meta,.career-caption{display:none}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:760px){
 .hero-story{height:480svh}.hero-stage{min-height:600px}
 .hero-opening{top:35%}.hero-opening .eyebrow{font-size:7px;max-width:270px;margin-bottom:26px}
 .hero-opening h1{font-size:clamp(59px,13.8vw,102px);width:100%}.hero-description{font-size:9px;max-width:240px}
 .hero-person{top:3%;height:91%;width:135vw}
 .career-scene{top:39%}.career-entry{width:86vw;min-width:0;padding:23px 8vw 24px}.career-entry h2{font-size:31px}.career-entry h2 span{font-size:18px}
 .career-entry .mono{font-size:8px}.career-entry p{font-size:10px}.career-entry small{font-size:8px}
 .career-signature{top:68%;font-size:66px}.career-signature span{margin-left:8vw}
 .project-directory{padding:65px 21px 60px}.directory-heading{grid-template-columns:1fr auto;gap:10px;margin-bottom:65px}.directory-heading h2{font-size:43px}.directory-current{display:none}.directory-total{font-size:30px;align-self:end}
 .directory-layout{grid-template-columns:1fr;gap:45px}.project-index{position:relative;top:auto;padding:0;gap:13px 20px}.project-index a{font-size:10px}.directory-project{margin-bottom:45px}
 .gallery-phone{border-radius:27px;padding:5px}.gallery-phone img{border-radius:21px}
}
@media(prefers-reduced-motion:reduce){.hero-person,.career-rail{will-change:auto}.gallery-phone{transform:none}.hero-story{height:auto}.hero-stage{height:auto;min-height:0;padding:170px var(--gutter) 80px}.hero-opening{position:relative;inset:auto;opacity:1!important;transform:none!important}.hero-person{display:none}.career-scene{position:relative;inset:auto;margin-top:90px;opacity:1!important}.career-rail{transform:none!important;width:auto;display:grid;grid-template-columns:1fr 1fr}.career-entry{width:auto;min-width:0;padding:25px 20px 25px 0}.career-signature{position:relative;left:auto;top:auto;transform:rotate(-6deg);opacity:1!important;margin:30px auto 0;font-size:60px}}

@media(prefers-reduced-motion:reduce) and (max-width:760px){.career-rail{grid-template-columns:1fr}.career-signature{font-size:48px}}

/* A single electric-rose accent and a loose, ink-like signature. */
@font-face{font-family:'Meryl Autograph';src:local('SnellRoundhand'),local('Snell Roundhand');font-weight:400;font-display:swap}
:root{--accent:#ff278b;--accent-on-light:#bb0058}
::selection{background:var(--accent);color:#101010}
.topbar{mix-blend-mode:normal;text-shadow:0 1px 12px #0007}
.topbar .nav a:hover,.topbar .nav a:focus-visible,.wordmark span,.nav-arrow{color:var(--accent)}
.career-signature{top:62%;width:min(650px,62vw);max-width:90vw;font-family:'Meryl Autograph','Snell Roundhand',cursive;font-weight:400;font-size:clamp(100px,12vw,180px);line-height:.78;letter-spacing:-.065em;color:var(--accent);transform:translate(-50%,-15%) rotate(-12deg);text-align:left;isolation:isolate}
.career-signature .signature-name{display:block;margin:0;transform:skewX(-7deg);position:relative;z-index:1}
.career-signature .signature-subtitle{display:block;font-size:.60em;line-height:1.02;letter-spacing:-.05em;margin:6px 0 0 22%;transform:rotate(3deg) skewX(-7deg);position:relative;z-index:1}
.signature-stroke{position:absolute;left:-10%;top:12%;width:120%;height:125%;overflow:visible;z-index:-1;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.signature-stroke path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--signature-alpha))}
.signature-tail{stroke-width:4}
.project-index a[aria-current=true]{color:var(--accent-on-light);text-decoration-color:var(--accent);text-decoration-thickness:2px}
.project-index a:hover,.directory-play:hover,.directory-caption .case-link:hover{color:var(--accent-on-light)}
.directory-current{color:var(--accent-on-light)}
.contact__title>span,.contact__mail span,.text-link span{color:var(--accent)}
.contact__mail:hover{border-bottom-color:var(--accent)}
:focus-visible{outline-color:var(--accent)}
@media(max-width:760px){.career-signature{top:65%;width:76vw;font-size:clamp(76px,17vw,126px)}.career-signature .signature-subtitle{margin-left:15%;font-size:.61em}.signature-stroke{stroke-width:3}}
@media(prefers-reduced-motion:reduce){.career-signature{top:auto;left:auto;margin:45px auto 20px;transform:rotate(-9deg);font-size:clamp(76px,12vw,150px)}.signature-stroke path{stroke-dashoffset:0}}

/* Supplied PNG, subtle edge blending, slow autonomous career marquee. */
.hero-person img{filter:grayscale(1);mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 77%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 77%,transparent 100%)}
.hero-person{mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 82%,transparent 100%)}
.career-entry{border-top:0}
.career-pause{position:absolute;right:var(--gutter);top:-42px;pointer-events:auto;background:none;color:#b6b6ad;font:400 9px var(--sans);padding:10px;cursor:pointer;z-index:6}
.career-pause:hover{color:var(--accent)}
@font-face{font-family:'Meryl Fine Script';src:url('assets/fonts/oooh-baby-regular.ttf') format('truetype');font-weight:400;font-display:swap}
.career-signature{font-family:'Meryl Fine Script',cursive;font-size:clamp(84px,10.5vw,156px);letter-spacing:-.045em;line-height:.9;width:min(700px,65vw);transform:translate(-50%,-15%) rotate(-7deg)}
.career-signature .signature-name{transform:none;margin:0;font-size:1em}
.career-signature .signature-subtitle{font-size:.73em;line-height:1.1;margin:-3px 0 0 16%;transform:rotate(-2deg);letter-spacing:-.045em}
@media(max-width:760px){.career-signature{width:83vw;font-size:clamp(70px,16vw,110px);top:67%}.career-pause{top:-35px}.career-signature .signature-subtitle{font-size:.7em;margin-left:10%}}
@media(prefers-reduced-motion:reduce){.career-pause{display:none}.career-signature{transform:rotate(-7deg);top:auto}.career-rail{transform:none!important}}

/* Hero composition: two editorial lines, foreground portrait, quiet geometry. */
.wordmark{display:flex;align-items:flex-end;gap:7px;line-height:1}
.monogram{width:31px;height:25px;display:block}.brand-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-bottom:1px}
.hero-contours{position:absolute;inset:0;width:100%;height:100%;stroke:#bdb7bd;stroke-width:1;opacity:.09;pointer-events:none;z-index:0}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.hero-opening{inset:29% var(--gutter) auto;z-index:4}
.hero-opening .eyebrow{font-size:clamp(11px,1vw,15px);line-height:1.65;letter-spacing:.025em;margin-bottom:28px;max-width:80vw}
.hero-opening h1{width:100%;font-size:clamp(70px,9.6vw,162px);line-height:1.02;letter-spacing:-.065em}
.hero-opening h1 .hero-title-line{display:block;white-space:nowrap;color:#f0f0ee;font-family:'ABC Normal',sans-serif;font-weight:900;letter-spacing:inherit}
.hero-opening h1 em{font:100 1em 'ABC Nord',sans-serif;letter-spacing:-.075em;color:#deded9;font-style:normal}
.hero-opening h1 .title-dot{font-family:inherit;font-weight:900;color:var(--accent);letter-spacing:inherit}
.hero-description{font-size:clamp(13px,1.1vw,16px);line-height:1.8;margin-top:32px;color:#c3c3bd}
.hero-person{z-index:3;opacity:1;transform:translate3d(calc(-50% + var(--portrait-x)*1vw),calc(var(--portrait-y,0)*1vh),0) rotate(calc(var(--portrait-rotate,0)*1deg)) scale(var(--portrait-scale));transform-origin:50% 50%}
.hero-person img{transform:perspective(1200px) rotateY(calc(var(--pointer-x,0)*2deg)) rotateX(calc(var(--pointer-y,0)*-1deg)) translate3d(calc(var(--pointer-x,0)*7px),calc(var(--pointer-y,0)*5px),0);filter:grayscale(1) brightness(var(--portrait-light,1));will-change:transform}
.career-scene{z-index:2;top:43%}
.career-entry{width:31vw;min-width:330px;max-width:500px;padding:22px 3vw 28px 2vw;border:0}
.career-entry h2{font-size:clamp(28px,2.65vw,46px);margin:13px 0}
.career-signature{z-index:6;top:54%;left:50%;width:max-content;max-width:88vw;text-align:center;transform:translate(-50%,-50%) rotate(-7deg);font-size:clamp(86px,10.5vw,156px)}
.career-signature .signature-name,.career-signature .signature-subtitle{margin:0;text-align:center;transform:none}.career-signature .signature-subtitle{font-size:.73em}
@media(max-width:760px){.hero-opening{top:34%;inset-inline:22px}.hero-opening h1{font-size:9.5vw}.hero-opening .eyebrow{font-size:10px;max-width:85vw;margin-bottom:22px}.hero-description{font-size:12px;max-width:320px;margin-top:25px}.career-entry{width:78vw;min-width:0;padding:20px 22px}.career-entry h2{font-size:30px}.career-signature{top:53%;width:86vw;font-size:18vw}.hero-person{transform:translate3d(calc(-50% + var(--portrait-x)*1vw),calc(var(--portrait-y,0)*1vh),0) rotate(calc(var(--portrait-rotate,0)*1deg)) scale(var(--portrait-scale))}}
@media(prefers-reduced-motion:reduce){.hero-opening{inset:auto}.hero-dust{display:none}.career-signature{position:relative;inset:auto;transform:rotate(-7deg)}.career-entry{width:auto;min-width:0}.hero-person img{will-change:auto;transform:none}}

/* Continuous atmospheric motion, unified handwriting, and Lyra's screen gallery. */
.monogram{width:42px;height:33px}.brand-dot{width:10px;height:10px}
.hero-opening h1 .title-dot{font-size:.56em;vertical-align:baseline;display:inline-block;margin-left:.025em}
.hero-opening h1 em{font-family:'Meryl Fine Script',cursive;font-weight:400;display:inline-block;transform:rotate(-5deg) scaleX(1.05);letter-spacing:-.04em;margin-left:.08em}
.hero-title-line{animation:title-arrive 1.35s cubic-bezier(.16,1,.3,1) both}.hero-title-line:nth-child(2){animation-delay:.14s}
@keyframes title-arrive{from{clip-path:inset(100% 0 0);transform:translateY(65px) rotate(2deg);opacity:0}to{clip-path:inset(-20% -5% -25%);transform:translateY(0) rotate(0);opacity:1}}
.hero-contours{opacity:.16;overflow:visible;animation:contour-drift 19s ease-in-out infinite alternate;transform-origin:50% 50%}
.hero-contours path{stroke-dasharray:1200 120;animation:contour-stream 32s linear infinite}.hero-contours ellipse{animation:contour-orbit 26s ease-in-out infinite alternate;transform-origin:75% 36%}
@keyframes contour-stream{to{stroke-dashoffset:-2640}}@keyframes contour-drift{to{transform:translate3d(-3%,3%,0) rotate(5deg) scale(1.08)}}@keyframes contour-orbit{to{transform:rotate(8deg) scale(.94)}}
.career-entry .mono{font-size:clamp(12px,1.05vw,16px);color:#d1d1ca}
.career-signature{top:69%;font-size:clamp(80px,9vw,135px);line-height:.82;transform:translate(-50%,0) rotate(-7deg)}
.career-signature .signature-name{transform:scaleX(1.12) skewX(-7deg)}.career-signature .signature-subtitle{transform:scaleX(1.13) skewX(-7deg);line-height:.95}
.topbar.on-light,.topbar.on-light .nav{color:#171717;text-shadow:none}.topbar.on-light{background:#e9e9e5e8;backdrop-filter:blur(12px)}
.project-index{grid-template-columns:1fr;gap:38px}.project-group h3{font-size:clamp(18px,2vw,29px);font-weight:400;letter-spacing:-.045em;margin:0 0 8px}.project-group p{font-size:8px;letter-spacing:.06em;color:#797972;margin:0 0 20px}.project-group a{display:block;margin:11px 0;font-size:13px}
.directory-layout{grid-template-columns:30% minmax(0,1fr);gap:5vw}
.lyra-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.lyra-heading h3{font:400 clamp(28px,3vw,46px)/1.1 var(--sans);letter-spacing:-.05em;margin:14px 0}.lyra-heading p{font-size:12px;color:#6c6c64;margin:0}.lyra-heading .mono{font-size:8px}
.lyra-showcase{overflow:hidden;background:radial-gradient(ellipse at 30% 40%,#e3edf0,transparent 65%),#e7dfd5;padding:52px 0 32px;position:relative;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.lyra-track{display:flex;width:max-content;animation:lyra-drift 80s linear infinite;animation-play-state:paused;will-change:transform}.lyra-case.is-visible:not(.is-paused) .lyra-track{animation-play-state:running}
.lyra-device{flex:0 0 auto;width:220px;margin:0 20px;align-self:start}.lyra-device:nth-child(even){padding-top:30px}.lyra-device-body{height:460px;filter:drop-shadow(7px 19px 15px #403c3427)}
.lyra-device img{width:100%;height:100%;object-fit:contain;display:block}.lyra-device.raw .lyra-device-body{background:linear-gradient(120deg,#aaa,#111 24%,#777 90%);padding:7px;border:1px solid #999;border-radius:34px}.lyra-device.raw img{object-fit:cover;border-radius:27px}.lyra-device figcaption{font-size:9px;color:#68685e;text-align:center;margin-top:22px;letter-spacing:.02em}
@keyframes lyra-drift{to{transform:translateX(-50%)}}
.lyra-controls{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:9px;color:#737369}.lyra-toggle{background:none;font-size:10px;cursor:pointer;padding:8px}.lyra-toggle:hover{color:var(--accent-on-light)}
@media(max-width:760px){.career-signature{top:69%;font-size:16vw}.career-entry .mono{font-size:12px}.directory-layout{grid-template-columns:1fr}.project-index{grid-template-columns:1fr 1fr;gap:24px}.project-group h3{font-size:18px}.lyra-device{width:185px;margin-inline:15px}.lyra-device-body{height:388px}.hero-opening h1 em{margin-left:0}.monogram{width:36px;height:29px}}
@media(prefers-reduced-motion:reduce){.hero-contours,.hero-contours path,.hero-contours ellipse,.hero-title-line,.lyra-track{animation:none!important}.career-signature{top:auto;transform:rotate(-7deg)}.lyra-showcase{overflow-x:auto;mask-image:none}.lyra-toggle{display:none}}

.hero-person>img:first-child{opacity:calc(1 - var(--helmet-alpha,0))}
.hero-person .portrait-helmet{position:absolute;inset:0;opacity:var(--helmet-alpha,0);object-fit:contain;filter:brightness(var(--portrait-light,1));mask-image:radial-gradient(ellipse 52% 63% at 50% 43%,#000 38%,#000b 62%,transparent 89%);-webkit-mask-image:radial-gradient(ellipse 52% 63% at 50% 43%,#000 38%,#000b 62%,transparent 89%)}

/* Frontal portrait, timed scan assembly, and direct manipulation of the career rail. */
.hero-person>img:first-child{opacity:calc(1 - var(--front-alpha,0))}
.hero-person .portrait-front{position:absolute;inset:0;opacity:var(--front-alpha,0);object-fit:contain}
.hero-person .portrait-helmet{opacity:var(--helmet-alpha,0);clip-path:inset(0 0 var(--scan-cut,100%) 0);mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 77%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 77%,transparent 100%)}
.helmet-wire{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:100%;transform:translateX(-50%);stroke:#ff78b8;stroke-width:1;opacity:var(--wire-alpha,0);filter:drop-shadow(0 0 3px #ff278b);pointer-events:none}
.helmet-scan{position:absolute;top:var(--scan-y,0%);left:15%;width:70%;height:2px;background:linear-gradient(90deg,transparent,#ff278b,#fff,#ff278b,transparent);box-shadow:0 0 15px #ff278b,0 -10px 40px #ff278b66;opacity:var(--scan-glow,0);pointer-events:none}
.career-scene{pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;outline-offset:-5px;min-height:210px}.career-scene.is-dragging{cursor:grabbing}.career-pause{cursor:pointer}
@media(prefers-reduced-motion:reduce){.helmet-wire,.helmet-scan{display:none}.career-scene{cursor:auto;user-select:auto}}
/* Integrated introduction and full-width project chapters. */
.hero-opening h1 em{color:var(--accent)}
.typed-character{opacity:0;animation:type-character .01s steps(1,end) forwards}@keyframes type-character{to{opacity:1}}
.hero-cross{position:absolute;left:var(--gutter);bottom:9%;width:28px;height:28px;z-index:1;opacity:.45;animation:cross-turn 1.65s infinite cubic-bezier(.65,0,.25,1)}
.hero-cross:before,.hero-cross:after{content:'';position:absolute;background:#a8a8a0}.hero-cross:before{width:100%;height:1px;top:50%}.hero-cross:after{height:100%;width:1px;left:50%}
@keyframes cross-turn{0%{transform:rotate(0)}39%,100%{transform:rotate(90deg)}}
.hero-contours{animation:contour-drift 24s ease-in-out infinite alternate}.hero-contours path,.hero-contours ellipse{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.hero-person img{mask-image:radial-gradient(ellipse 52% 60% at 50% 43%,#000 40%,#000e 60%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 52% 60% at 50% 43%,#000 40%,#000e 60%,transparent 92%)}
.hero-about{position:absolute;z-index:4;left:var(--gutter);top:15%;width:32%;max-width:450px;opacity:var(--about-alpha,0);transform:translateY(calc((1 - var(--about-alpha,0))*25px));pointer-events:none}
.about-kicker{font-size:10px;letter-spacing:.12em;color:var(--accent);margin:0 0 20px}.hero-about h2{font:400 clamp(24px,2.8vw,42px)/1.3 var(--sans);margin:0 0 12px}.hero-about h2 span{font-size:.55em;margin-left:10px}.about-school{font-size:12px;color:#99998f;margin:0 0 27px}.about-lead{font:400 clamp(15px,1.35vw,20px)/1.85 'PingFang SC',sans-serif;margin:0 0 18px}.about-detail{font:300 13px/1.9 'PingFang SC',sans-serif;color:#aaa9a3}.about-skills{font-size:9px;line-height:1.9;color:#9d9d96;margin-top:22px}
.career-scene{top:65%;min-height:180px}.career-entry{padding-top:14px;padding-bottom:15px}.career-signature{top:84%;font-size:clamp(48px,5vw,80px);display:flex;align-items:baseline;gap:.25em;width:max-content;max-width:92vw}.career-signature .signature-subtitle{font-size:.82em;line-height:1}.career-pause{top:-30px}
.project-directory{padding:60px 0 0}.directory-heading{padding:0 var(--gutter);margin-bottom:60px}.directory-layout{display:block}.directory-gallery{width:100%}
.project-index{position:sticky;top:78px;z-index:12;display:flex;justify-content:space-between;gap:30px;padding:23px var(--gutter);background:#e9e9e5f5;backdrop-filter:blur(16px);border-bottom:1px solid #1a1a1a20}
.project-index .category-tab{display:flex;flex-direction:column;gap:9px;font-size:clamp(16px,1.7vw,26px);line-height:1.3;margin:0;letter-spacing:-.04em;text-decoration:none}.category-tab small{font-size:8px;color:#727269;letter-spacing:.08em}.category-tab[aria-current=true]{color:var(--accent-on-light)}
.directory-project{min-height:calc(100svh - 190px);width:100%;margin:0;padding:45px var(--gutter) 60px;scroll-margin-top:190px}.directory-art{height:calc(100svh - 295px);min-height:360px;aspect-ratio:auto}.directory-art>img{object-fit:contain}.directory-art--phone{aspect-ratio:auto}.directory-caption{padding-top:23px}.directory-caption h3{font-size:20px}
.lyra-heading{margin-bottom:25px}.lyra-showcase{margin-inline:calc(-1 * var(--gutter));padding:40px 0 28px}.lyra-device{width:clamp(200px,19vw,300px);margin:0 30px}.lyra-device-body{height:auto;aspect-ratio:220/460}.lyra-controls{font-size:11px}
.contact__mail{margin-bottom:28px}.contact-extra{display:flex;flex-wrap:wrap;gap:45px;margin:0 0 80px 8.6vw;font-size:15px}.contact-extra small{display:block;font-size:9px;letter-spacing:.1em;color:#888;margin-bottom:12px}.contact-extra a:hover{color:var(--accent)}
@media(max-width:760px){.hero-stage{min-height:740px}.hero-about{top:13%;width:43%;left:22px}.hero-about h2{font-size:23px}.about-kicker{margin-bottom:12px}.about-school{font-size:9px;margin-bottom:15px}.about-lead{font-size:13px;line-height:1.65}.about-detail{font-size:11px;line-height:1.7}.about-skills{font-size:8px;margin-top:12px}.career-scene{top:67%}.career-signature{top:91%;font-size:10vw;gap:.2em}.career-entry h2{font-size:26px}.career-entry h2 span{font-size:16px}.project-index{overflow-x:auto;gap:25px;padding:18px 22px;top:78px}.project-index .category-tab{font-size:15px;white-space:nowrap}.category-tab small{font-size:7px}.directory-project{padding:30px 22px 45px;scroll-margin-top:170px}.directory-art{min-height:400px;height:65svh}.lyra-heading h3{font-size:30px}.lyra-device{width:205px;margin:0 17px}.contact-extra{margin-left:0;gap:25px;font-size:13px}.hero-cross{bottom:6%;width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.hero-cross{animation:none}.hero-about{position:relative;inset:auto;width:100%;max-width:600px;opacity:1;transform:none;margin-top:55px}.career-scene{top:auto}.career-signature{top:auto;display:flex}.hero-contours animate{display:none}.typed-character{opacity:1;animation:none}.project-index{scroll-behavior:auto}}

/* Centered portrait with balanced left identity and right narrative. */
.hero-about{inset:0;width:100%;max-width:none;transform:none}
.about-identity{position:absolute;left:var(--gutter);top:25%;width:24%}
.hero-about h2{font-size:clamp(28px,3.2vw,48px)}.hero-about h2 span{display:block;margin:14px 0 0;font-size:.5em;letter-spacing:.02em}
.about-copy{position:absolute;right:var(--gutter);top:25%;width:25%;max-width:390px}
.about-copy .about-lead{font-size:clamp(15px,1.3vw,19px);line-height:1.85}.about-copy .about-detail{font-size:12px;line-height:1.95;margin-top:22px}
.about-skills{position:absolute;left:var(--gutter);bottom:9%;font-size:8px;letter-spacing:.12em;color:#77776f;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.6}
.hero-person{z-index:3}.career-scene{z-index:2;top:60%}
.hero-person:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 47% at 51% 42%,transparent 50%,#0e0e0e38 72%,#0e0e0e 100%);opacity:.78}
.hero-person img{mask-image:radial-gradient(ellipse 50% 61% at 50% 42%,#000 46%,#000e 65%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse 50% 61% at 50% 42%,#000 46%,#000e 65%,transparent 94%)}
.career-signature{display:block;top:75%;left:50%;width:38vw;max-width:570px;text-align:center;font-size:clamp(64px,7.4vw,112px);line-height:.8;transform:translate(-50%,0) rotate(-7deg)}
.career-signature .signature-name{display:block;margin:0;transform:none}.career-signature .signature-subtitle{display:block;font-size:.75em;margin:5px 0 0;transform:none;line-height:1}
.hero-description{max-width:540px;min-height:3.6em;overflow:visible}.typing-complete .typed-character{animation:none!important;opacity:1!important}
@media(max-width:760px){.about-identity{left:22px;top:14%;width:30%}.hero-about h2{font-size:25px}.about-copy{right:22px;top:14%;width:39%}.about-copy .about-lead{font-size:12px;line-height:1.7}.about-copy .about-detail{font-size:10px;line-height:1.7;margin-top:10px}.about-kicker{font-size:8px}.about-skills{display:none}.career-scene{top:64%}.career-signature{top:81%;width:80vw;font-size:15vw}.hero-description{max-width:85vw}}
@media(prefers-reduced-motion:reduce){.hero-about{position:relative;inset:auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:32px}.about-identity,.about-copy{position:static;width:auto;max-width:none}.about-skills{display:none}.career-scene{top:auto}.career-signature{position:relative;top:auto;left:auto;margin:35px auto 0;transform:rotate(-7deg);width:80%}}

/* Final hero spacing and interactive project panels. */
.hero-person:after{display:none}
.hero-person .portrait-front{mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%)}
.career-scene{top:47%}.career-signature{top:61%;font-size:clamp(64px,7.4vw,112px)}
.about-identity{left:3.5vw}.about-copy{right:7vw;width:26%}.about-copy p{text-wrap:pretty;word-break:normal;overflow-wrap:normal}.about-copy .about-detail{font-size:13px;line-height:1.9;max-width:29em}
.about-skills{bottom:calc(8% + 58px);left:var(--gutter);max-height:200px;font-size:7px;letter-spacing:.09em}
.hero-cross{bottom:6%;width:30px;height:30px;color:#aaa99e;animation:snow-bloom 3.4s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center}.hero-cross:before,.hero-cross:after{display:none}.hero-cross svg{display:block;width:100%;height:100%}
@keyframes snow-bloom{0%,8%{transform:scale(.35) rotate(0);opacity:.2}32%{transform:scale(1) rotate(0);opacity:.6}68%,85%{transform:scale(1) rotate(90deg);opacity:.6}100%{transform:scale(.35) rotate(90deg);opacity:.2}}
.project-switcher{display:flex;gap:10px 28px;flex-wrap:wrap;padding:22px var(--gutter);background:#e9e9e5}.project-switcher button{background:none;padding:9px 0;border-bottom:1px solid transparent;cursor:pointer;font:400 12px var(--sans);color:#6d6d65}.project-switcher button[aria-selected=true]{color:var(--accent-on-light);border-color:currentColor}
.directory-project[hidden]{display:none!important}
.lyra-showcase{perspective:1600px;padding-top:65px;padding-bottom:40px;background:radial-gradient(ellipse at 25% 40%,#f2e8e3,transparent 60%),#dfE6e7}
.lyra-track{animation-duration:65s}.lyra-case.is-visible:not(.is-paused) .lyra-showcase:hover .lyra-track,.lyra-showcase:focus-within .lyra-track{animation-play-state:paused}
.lyra-device{width:clamp(230px,23vw,340px);padding:28px 24px 20px!important;background:#f5f3ee;box-shadow:0 20px 50px #35353512;border:1px solid #fff9;border-radius:12px;transform:rotate(-3deg);transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s}.lyra-device:nth-child(even){transform:translateY(20px) rotate(3deg)}.lyra-device:hover{transform:translateY(-12px) rotate(0);box-shadow:0 30px 60px #35353525}
.lyra-device-body{width:100%;height:auto;aspect-ratio:220/460}.lyra-device figcaption{text-align:left;margin-top:25px}.lyra-device figcaption strong{font-size:12px;color:#262622;font-weight:400}.lyra-device figcaption p{font:12px/1.8 'PingFang SC',sans-serif;color:#77776b;margin:9px 0 0}
@media(max-width:760px){.career-scene{top:49%}.career-signature{top:69%;font-size:15vw}.about-identity{left:22px}.about-copy{right:22px;width:39%}.about-copy .about-detail{font-size:10px}.hero-cross{bottom:5%;width:25px;height:25px}.project-switcher{gap:10px 20px;padding:16px 22px}.lyra-device{width:240px;padding:22px 18px 18px!important}.lyra-device figcaption p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-cross{animation:none;transform:none}.career-scene,.career-signature{top:auto}.lyra-device,.lyra-device:nth-child(even),.lyra-device:hover{transform:none;transition:none}}

/* Compact hero and three editorial project rows. */
.hero-story{height:320svh}.career-signature{font-size:clamp(85px,9vw,138px);width:52vw;max-width:720px;left:50%;text-align:center;top:59%;transform:translateX(-50%) rotate(-6deg)}
.about-skills{writing-mode:horizontal-tb;transform:translateX(-50%);left:50%;bottom:6%;max-height:none;white-space:nowrap;font-size:8px;letter-spacing:.13em;line-height:30px}.about-copy .about-lead{font-size:clamp(13px,1.12vw,16px)}
.lyra-device,.lyra-device:hover{background:none;border:0;box-shadow:none;padding:0!important}
.work-overview{padding:70px var(--gutter);background:#e9e9e5}.work-row{padding:35px 0 85px;border-top:1px solid #2223}.work-row>header{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:40px}.work-row>header p{font-size:9px;color:#74746e;letter-spacing:.06em}.work-row>header h2{font-size:clamp(28px,4vw,60px);font-weight:300;letter-spacing:-.06em;margin:0}
.cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.cover-card:nth-child(2){margin-top:65px}.cover-card:nth-child(3){margin-top:125px}.logo-cover{aspect-ratio:4/3;display:grid;place-items:center;background:#d8dad7;overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.logo-cover>span{font-family:'ABC Normal',var(--sans);font-weight:900;font-size:clamp(22px,3.2vw,50px);letter-spacing:-.06em;text-align:center;padding:25px}.cover-card:hover .logo-cover{transform:translateY(-8px)}.cover-meta{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin-top:20px}.cover-meta h3{font-size:13px;font-weight:400;margin:0}.cover-meta>span{font-size:8px;color:#777}.cover-lyra .logo-cover{background:#e5ded2}.cover-snap .logo-cover{background:#222;color:#eee}.cover-arte .logo-cover{background:#d1d5dd}.cover-brand{grid-column:span 2}.cover-brand .logo-cover{aspect-ratio:16/9;background:#ff4f18;color:#151515}.cover-fashion .logo-cover{background:#222;color:#eee}.cover-city .logo-cover{background:#cad3c4}.work-row:last-child .cover-grid{grid-template-columns:1fr 1fr}
@media(max-width:760px){.hero-story{height:340svh}.career-signature{width:90vw;font-size:19vw;top:64%}.about-skills{display:block;font-size:6px;letter-spacing:.04em;bottom:5%;max-width:76vw;white-space:normal;text-align:center;line-height:1.6}.about-copy .about-lead{font-size:12px}.work-overview{padding:35px 22px}.work-row>header{display:block}.work-row>header h2{font-size:36px;margin-top:16px}.cover-grid,.work-row:last-child .cover-grid{grid-template-columns:1fr;gap:35px}.cover-card:nth-child(n){margin-top:0;grid-column:auto}.logo-cover>span{font-size:38px}.work-row{padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){.hero-story{height:auto}.career-signature{top:auto;left:auto;transform:rotate(-6deg)}.cover-card:hover .logo-cover{transform:none}}
/* Compact introduction copy. */
.about-copy .about-lead{font-size:clamp(9px,.78vw,12px);line-height:1.65;white-space:nowrap;margin-bottom:9px;letter-spacing:0}
.about-copy .about-detail{margin-top:0;line-height:1.75}
@media(max-width:760px){.about-copy .about-lead{font-size:11px;white-space:normal;margin-bottom:8px}.about-copy .about-detail{margin-top:0}}