/* 01. Tokens: reference geometry is deliberate, including oversized type. */
@font-face{font-family:Archivo;src:url('assets/archivo-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('assets/archivo-medium.ttf') format('truetype');font-weight:500;font-display:swap}
:root{--bg:#000;--ink:#fff;--muted:#858585;--line:#454545;--accent:#e8be1d;--gutter:48px;--gap:48px;--app-height:100svh;--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.83,0,.17,1);color-scheme:dark}
*{box-sizing:border-box}html{scroll-padding-top:125px}body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.4 Archivo,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}p,h1,h2{margin:0;font-weight:400}ul{padding:0;margin:0;list-style:none}::selection{background:#03ff51;color:#000}:focus-visible{outline:1px solid var(--accent);outline-offset:7px}a{transition:color .5s cubic-bezier(.33,1,.68,1)}a:hover{color:var(--accent)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#505050;border-radius:6px}::-webkit-scrollbar-track{background:#151515}.section-shell{margin-inline:var(--gutter)}.page-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.skip{position:fixed;left:20px;top:-80px;z-index:100;background:#fff;color:#000;padding:12px}.skip:focus{top:10px}
/* 02. Fixed navigation; only the narrow header strip blurs. */
.header{position:fixed;z-index:30;inset:48px var(--gutter) auto;padding:22px 0 20px;font-size:12px;line-height:1;text-transform:uppercase;isolation:isolate}
.header::before{content:'';position:absolute;z-index:-1;inset:-48px calc(-1 * var(--gutter)) 0;background:#0009;backdrop-filter:blur(7px);pointer-events:none}
.header::after{content:'';position:absolute;inset:0 0 auto;height:1px;background:#b3b3b3;transform-origin:left;animation:hairline .7s var(--ease-in-out) both}
.header.list-above{border-bottom:1px solid #696969}.nav-b{grid-column:1 / 3}.nav-l{grid-column:4 / 6}.nav-discover{grid-column:7 / 9;color:var(--muted)}.nav-bio{grid-column:10 / 11}.nav-contact{grid-column:11 / 13;text-align:right}
@keyframes hairline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 03. The monogram is live text. ScrollTrigger supplies a separate pin spacer. */
.hero{height:var(--app-height);position:relative;margin-inline:var(--gutter);min-height:520px;overflow:hidden}
.hero-stage{position:absolute;inset:auto 0 48px;height:clamp(300px,35vw,510px);will-change:transform}
.monogram{position:relative;height:100%;font-size:clamp(300px,40vw,580px);line-height:.85;letter-spacing:-.04em;font-weight:400}
.letter-left,.letter-right,.letter-dash{position:absolute;bottom:0;display:block;will-change:transform}.letter-left{left:-.01em}.letter-right{right:0}.letter-dash{left:51.7%;font-size:.66em;bottom:.24em;line-height:1}
.hero-notes{position:absolute;left:52.3%;top:0;bottom:6px;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;text-transform:uppercase;line-height:1.4}.hero-notes span{color:var(--muted)}
/* 04. A half-width index leaves the other half empty for row-local previews. */
.works{position:relative;border-top:1px solid #aaa;padding-top:120px;padding-bottom:140px;z-index:2;background:#000}
.works-list{margin-left:calc(50% + var(--gap)/2)}
.work-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);position:relative;min-height:93px;padding:23px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.35;isolation:isolate}
.work-row .year{grid-column:1 / 3}.work-row .work-info{grid-column:3 / 7}.category{display:block;font-size:14px;color:var(--muted);transition:color .5s}.work-row:hover .category,.work-row:focus-visible .category{color:#fff}.work-row:hover{color:#fff;border-color:#ddd}.row-mask{position:absolute;inset:0;background:#000;z-index:3;pointer-events:none;transform-origin:bottom;transform:scaleY(0)}
.work-row .preview{position:absolute;left:calc(-100% - var(--gap));top:0;width:min(400px,calc(100% - 48px));aspect-ratio:1;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),visibility .5s;overflow:hidden;color:#171717;z-index:5}
.work-row:hover .preview,.work-row:focus-visible .preview{opacity:1;visibility:visible;transform:translateY(0)}
.preview video{width:100%;height:100%;object-fit:cover}.preview .demo-scene{width:100%;height:100%;position:relative;background:var(--paper);padding:7%;overflow:hidden}.demo-head{display:flex;justify-content:space-between;border-bottom:1px solid currentColor;font-size:9px;padding-bottom:8px;letter-spacing:.04em}.demo-name{font-size:clamp(28px,4vw,70px);letter-spacing:-.04em;line-height:.9;margin-top:8%;position:relative;z-index:2}.demo-caption{position:absolute;bottom:6%;left:7%;font-size:10px;text-transform:uppercase}.demo-mark{position:absolute;width:58%;height:58%;left:28%;top:27%;border:22px solid var(--color);border-radius:50%;transform:rotate(-25deg);animation:object-turn 7s ease-in-out infinite alternate;animation-play-state:paused}.demo-mark::after{content:'';position:absolute;width:100%;height:100%;border:12px solid var(--color);border-radius:inherit;left:-50%;top:20%}.work-row:hover .demo-mark,.work-row:focus-visible .demo-mark{animation-play-state:running}.demo-scene.type-1 .demo-mark{border-radius:0;width:42%;height:70%;border-width:0;background:var(--color);left:49%;top:25%;transform:rotate(18deg)}.demo-scene.type-2 .demo-mark{border:0;border-radius:50% 50% 0 0;background:var(--color);left:42%;height:65%;width:43%}.demo-scene.type-3 .demo-name{font-family:Georgia,serif;font-style:italic}.demo-scene.type-3 .demo-mark{border-width:2px;width:85%;height:85%;left:24%;top:39%}
@keyframes object-turn{to{transform:translate(-12px,-20px) rotate(25deg)}}
/* 05. Display statement and the 6 / 2 / 2 / 2 profile grid. */
.bio{padding:120px 0 160px}.bio-title{font-size:clamp(40px,5.28vw,88px);line-height:1.01;letter-spacing:-.035em;font-weight:500}.masked-line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}.masked-line>span{display:block;will-change:transform}
.profile{border-top:1px solid #aaa;padding-top:16px;padding-bottom:150px}.profile-copy{grid-column:1 / 6;font-size:clamp(24px,2.8vw,40px);line-height:1.03;letter-spacing:-.025em}.profile-copy p{margin-bottom:30px}.study-link{font-size:14px;letter-spacing:0;text-decoration:underline;text-underline-offset:5px}.profile-column h2{font-size:16px;margin-bottom:62px}.profile-column ul{font-size:13px;line-height:1.7}.profile-column li{margin-bottom:8px}.stack{grid-column:7 / 9}.capabilities{grid-column:9 / 11}.accolades{grid-column:11 / 13}
/* 06. Equal copies make the loop seamless at -25% of the full track. */
.contact{padding-top:200px;overflow:hidden;position:relative}.contact::before{content:'';position:absolute;inset:0 var(--gutter) auto;height:1px;background:#aaa}.contact-marquee{display:block;overflow:hidden;font-size:clamp(80px,23.9vw,360px);line-height:1.1;letter-spacing:-.035em;padding:36px 0 70px}.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite;will-change:transform}.marquee-track>span{display:block;flex:none}.contact-meta{display:flex;justify-content:space-between;gap:20px;padding-block:24px;color:var(--muted);font-size:12px}.contact-meta:target{color:var(--ink)}
@keyframes marquee{to{transform:translateX(-25%)}}
/* 07. Native scrolling still works if animation dependencies fail. */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
@media(min-width:1440px){.work-row .preview{width:500px}.hero-stage{height:510px}.monogram{font-size:580px}}
@media(max-width:1023px){:root{--gutter:24px;--gap:24px}.header{top:24px}.header::before{top:-24px}.hero-stage{height:32vw;bottom:32px}.monogram{font-size:43vw}.hero-notes{font-size:10px}.works{padding-top:60px;padding-bottom:60px}.works-list{margin-left:0}.work-row .preview{display:none}.work-row{grid-template-columns:repeat(12,minmax(0,1fr));min-height:78px;font-size:16px;padding:20px 0}.work-row .year{grid-column:1 / 4}.work-row .work-info{grid-column:4 / 13}.bio{padding:100px 0}.profile{padding-bottom:100px}.profile-copy{grid-column:1 / 7}.stack{grid-column:8 / 10}.capabilities{grid-column:10 / 13}.accolades{grid-column:8 / 13;margin-top:40px}.profile-column h2{margin-bottom:26px}.contact{padding-top:100px}.contact-marquee{padding-bottom:40px}}
@media(max-width:600px){:root{--gutter:20px;--gap:12px}.header{top:20px;padding-top:18px;font-size:10px}.header::before{top:-20px}.nav-b{grid-column:1}.nav-l{grid-column:3}.nav-discover{grid-column:5 / 8}.nav-bio{grid-column:9 / 10}.nav-contact{grid-column:10 / 13}.hero{min-height:440px}.hero-stage{bottom:30px;height:36vw}.monogram{font-size:46vw}.letter-dash{left:46%;bottom:.21em}.hero-notes{left:47%;top:-88px;bottom:auto;gap:12px;font-size:9px}.hero-notes p:last-child{position:absolute;top:calc(88px + 32vw);left:0;white-space:nowrap;transform:translateY(-100%)}.hero-notes p:last-child br{display:none}.bio-title{font-size:clamp(24px,5.8vw,35px);letter-spacing:-.025em}.bio{padding-block:90px}.profile-copy{grid-column:1 / 13;font-size:26px;max-width:95%;padding-bottom:50px}.profile-column{grid-column:auto / span 4}.accolades{margin-top:0}.profile-column h2{font-size:13px}.profile-column ul{font-size:11px}.profile{row-gap:20px}.category{font-size:12px}.contact-meta{flex-wrap:wrap;font-size:10px}.contact-meta p{flex-basis:100%}.contact-marquee{font-size:80px}.contact{padding-top:80px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.marquee-track{transform:none}.hero-stage,.masked-line>span{transform:none!important}.row-mask{display:none}.demo-mark{animation:none!important}}

/* Reference correction: the stage travels normally first, then pins under
   the incoming works sheet. Glyph ink metrics also anchor the small copy. */
.hero{height:calc(var(--app-height) - 48px);overflow:visible}
.hero-stage{height:var(--cap-height,375px);bottom:80px;z-index:1}
.monogram{font-size:var(--hero-font-size,510px);height:100%;line-height:1;letter-spacing:-.04em}
.letter-left,.letter-right{top:var(--ink-offset,0px);bottom:auto;line-height:1;transform-origin:top left}
.letter-left{left:0;width:max-content;}
.letter-right{right:0;left:auto;width:max-content;transform-origin:top right;}
.letter-dash{left:51.7%;top:50%;bottom:auto;width:22.6%;height:calc(var(--cap-height,375px) * .047);font-size:0;background:#fff;transform:translateY(-50%)}
.hero-notes{left:51.7%;top:0;bottom:0;font-size:12px}
.hero-notes p{line-height:1.4}.year{font-variant-numeric:tabular-nums}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
@media(max-width:1023px){.hero-stage{bottom:55px}.hero{height:calc(var(--app-height) - 24px)}.hero-notes{font-size:10px}}
@media(max-width:600px){.hero-stage{bottom:40px}.hero{height:calc(var(--app-height) - 20px)}.hero-notes{left:51.7%;top:0;bottom:0;gap:0;font-size:7px;max-width:25%}.hero-notes p:last-child{position:static;transform:none;white-space:normal}.hero-notes p:last-child br{display:initial}.hero-notes span{display:block}.hero-stage{min-height:0}}

/* Explicit width survives the pin spacer wrapping an absolutely positioned stage. */
.hero-stage{width:calc(100vw - var(--gutter) - var(--gutter) - 8px);left:0;right:auto}

.monogram{font-family:"Schibsted Grotesk",Archivo,sans-serif;font-weight:500}


/* 08. Contact: a full-height sheet in the same black/white typography system. */
.inquiry{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:auto;overscroll-behavior:contain}
.inquiry::backdrop{background:#000b}.inquiry-shell{padding:48px;max-width:1800px;margin:auto}
.inquiry-nav{border-top:1px solid #aaa;padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:12px;text-transform:uppercase}
.contact-close{display:flex;gap:24px;align-items:center;color:#fff;background:none;border:0;padding:8px 0 8px 12px;cursor:pointer;text-transform:uppercase;font-size:12px}
.contact-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1;fill:none}.contact-close:hover{color:var(--accent)}
.inquiry-layout{display:grid;grid-template-columns:5fr 7fr;gap:clamp(48px,8vw,140px);padding-top:clamp(60px,9vh,120px);padding-bottom:50px}
.inquiry-intro h2{font-family:'Schibsted Grotesk',Archivo,sans-serif;font-weight:500;font-size:clamp(90px,11vw,170px);line-height:.88;letter-spacing:-.04em;outline:none}
.inquiry-intro>p{margin-top:50px;font-size:16px;line-height:1.8;word-break:keep-all}.required-note{display:block;color:var(--muted);font-size:12px;margin-top:55px}
.inquiry-form{padding-top:8px;min-width:0}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.field{margin-bottom:38px}.field label{display:block;margin-bottom:15px;font-size:13px}.field label>span{color:var(--accent);margin-left:4px}.field label>.optional{color:var(--muted);font-size:11px;margin-left:10px}
.field input,.field textarea{display:block;width:100%;border:0;border-bottom:1px solid #535353;border-radius:0;padding:0 0 16px;background:transparent;color:#fff;caret-color:var(--accent);font:400 17px/1.65 Archivo,Arial,sans-serif;transition:border-color .25s;outline:none;box-shadow:none}
.field input::placeholder,.field textarea::placeholder{color:#888;opacity:1;font-size:15px}.field textarea{min-height:150px;max-height:340px;resize:vertical}.field input:focus,.field textarea:focus{border-color:#03ff51}.field [aria-invalid=true]{border-color:#03ff51}.field-error{font-size:12px;color:var(--accent);margin-top:8px;min-height:0}.field-error:empty{display:none}.submit-row{display:flex;justify-content:space-between;gap:24px;align-items:center}.submit-row p{font-size:12px;color:#aaa;line-height:1.7}.contact-submit{display:flex;align-items:center;justify-content:space-between;gap:50px;border:1px solid #fff;background:transparent;color:#fff;padding:18px 22px;min-width:220px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}.contact-submit svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.2}.contact-submit:hover{color:#000;background:#03ff51;border-color:#03ff51}.contact-submit:disabled{opacity:.5;cursor:wait}.contact-status{font-size:13px;line-height:1.7;margin-top:24px;max-width:60ch;white-space:pre-line}.contact-status[data-state=error]{color:var(--accent)}.contact-status[data-state=success]{color:#fff}.contact-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:800px){.inquiry-shell{padding:24px}.inquiry-layout{grid-template-columns:1fr;gap:42px;padding-top:55px}.inquiry-intro h2{font-size:90px}.inquiry-intro h2 br{display:none}.inquiry-intro>p{margin-top:24px;font-size:14px}.required-note{margin-top:22px}.form-pair{gap:22px}.field{margin-bottom:30px}.field input,.field textarea{font-size:16px}.field input::placeholder,.field textarea::placeholder{font-size:13px}.submit-row{align-items:flex-start}.contact-submit{min-width:185px;gap:25px;padding:17px}.inquiry-nav{font-size:10px}.contact-close{font-size:10px}}
@media(max-width:380px){.form-pair{grid-template-columns:1fr;gap:0}.submit-row{flex-direction:column}.contact-submit{width:100%}.inquiry-intro h2{font-size:74px}}

/* Requested brand accent, scoped only to the footer marquee interaction. */
.contact-marquee:hover,.contact-marquee:focus-visible{color:#03ff51}
/* 08. 한글 / EN toggle. Korean applies to the display copy and the inquiry dialog only. */
body{font-family:Archivo,"Noto Sans KR",Helvetica,sans-serif}
.nav-right{grid-column:11 / 13;display:flex;justify-content:flex-end;align-items:center;gap:28px}
.nav-right .nav-contact{text-align:right;white-space:nowrap}
.lang-toggle{display:flex;align-items:center;gap:6px;color:#5c5c5c;white-space:nowrap}
.lang-toggle button{appearance:none;background:none;border:0;margin:-12px -4px;padding:12px 4px;font:inherit;line-height:1;letter-spacing:inherit;text-transform:inherit;color:var(--muted);cursor:pointer;transition:color .5s cubic-bezier(.33,1,.68,1)}
.lang-toggle button[aria-pressed=true]{color:var(--ink)}
.lang-toggle button:hover{color:var(--accent)}
.lang-toggle button:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
.bio-title[lang=ko]{line-height:1.2;letter-spacing:-.04em;word-break:keep-all}
.bio-title[lang=ko] .masked-line{padding-bottom:.12em;margin-bottom:-.12em}
.profile-copy[lang=ko]{line-height:1.32;letter-spacing:-.03em;word-break:keep-all}
.inquiry[lang=ko]{word-break:keep-all}
.inquiry[lang=ko] .inquiry-intro>p{line-height:1.75}
@media(max-width:1023px){.nav-right{gap:18px}}
@media(max-width:600px){.nav-bio{grid-column:8 / 9}.nav-right{grid-column:10 / 13;gap:12px}.lang-toggle{gap:4px}}
.profile-quote{margin-top:4px;font-family:"Schibsted Grotesk",Archivo,sans-serif;font-style:italic;font-weight:400;font-size:12.5px;line-height:1.7;letter-spacing:.01em;color:var(--muted);max-width:44ch}
@media(max-width:600px){.profile-quote{font-size:11.5px}}

/* Work rows show a discipline label instead of a year: smaller than the title, on its baseline. */
.work-row .year{font-size:13px;align-self:baseline}.work-row .work-info{align-self:baseline}
@media(max-width:1023px){.work-row .year{font-size:12px}}
@media(max-width:600px){.work-row .year{grid-column:1 / 5;font-size:11px}.work-row .work-info{grid-column:5 / 13}}

/* Same-origin works (ZING) cross-fade into their page after the bending image transition. */
@view-transition{navigation:auto}

/* Rounded hover previews, matching the corner radius of the work transition card. */
.work-row .preview{border-radius:16px}