@font-face{font-family:"East Sea Dokdo";src:url("assets/fonts/east-sea-dokdo.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--blue:#075ed8;--ink:#062645;--deep:#063a82;--white:#fff7f4;--pink:#f2bfce;--green:#a0d55a;--muted:#d2e6ff;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--white);font-size:16px;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:var(--blue);isolation:isolate}button,input,select{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--green);outline-offset:6px}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-weight:400}p{line-height:1.9}img{display:block;max-width:100%}[hidden]{display:none!important}
.page-texture{position:fixed;inset:0;background:url("assets/forest-background.webp") center bottom/auto 260% no-repeat;opacity:.5;z-index:-2;pointer-events:none}.skip{position:fixed;left:20px;top:-90px;z-index:30;background:var(--ink);padding:15px 20px}.skip:focus{top:15px}
.site-header{position:fixed;inset:22px 26px auto auto;z-index:10}.site-header nav a{display:block;font-family:"East Sea Dokdo",cursive;font-size:34px;line-height:1;padding:7px 28px 10px;background:#051b2c;border-radius:49% 44% 48% 46%;transform:rotate(-3deg)}.site-header nav a:hover{color:var(--green)}
.hero{position:relative;height:100svh;min-height:650px;overflow:hidden;background:#075bd4;isolation:isolate}.hero-art{position:absolute;inset:-2%;width:104%;max-width:none;height:104%;object-fit:cover;object-position:center center;z-index:-1;will-change:transform}
.forest-heading{position:absolute;top:5%;left:5%;right:5%;text-align:center;z-index:4}.forest-heading h1{font-family:"East Sea Dokdo",cursive;font-size:clamp(78px,8.8vw,140px);line-height:1;font-weight:400;letter-spacing:1px}.forest-heading p{font-size:16px;letter-spacing:2px;margin-top:6px;color:#f9eee9}
.forest-profile{position:absolute;z-index:2;top:51%;left:46%;width:clamp(280px,31vw,450px);transform:translateX(-50%)}.forest-profile summary{position:relative;width:100%;aspect-ratio:3/2;cursor:pointer;list-style:none;outline-offset:2px;border-radius:10px}.forest-profile summary::-webkit-details-marker{display:none}
.horse-sprite{display:block;position:absolute;inset:0;background-image:url("assets/horse-sprite.webp");background-size:200% 200%;background-repeat:no-repeat;animation:horse-gallop .68s step-end infinite}.horse-note{position:absolute;left:94%;top:37%;background:#061f2b;padding:10px 22px;white-space:nowrap;border-radius:48% 43% 47% 41%;font-size:15px}
.profile-card{position:absolute;left:95%;top:5%;width:300px;padding:35px 32px;background:#06232f;border-radius:40% 44% 38% 43%;text-align:center}.profile-card strong{font-size:23px}.profile-card p{font-size:16px;line-height:1.8;margin:10px 0}.profile-card>div{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.profile-card a{font-size:14px;border-bottom:1px solid var(--green);padding:5px 0}.forest-profile[open]{z-index:5}.forest-profile[open] .horse-note{display:none}.forest-profile[open] .horse-sprite,.horse-paused .horse-sprite{animation-play-state:paused}
.forest-front{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:3;will-change:transform}.scene-scroll{position:absolute;z-index:4;left:50%;bottom:6%;transform:translateX(-50%);text-align:center;white-space:nowrap}.scene-scroll span{display:block;font-family:"East Sea Dokdo",cursive;font-size:32px;line-height:1.2}.scene-scroll small{display:block;font-size:14px;margin-top:7px}.scene-scroll:hover{color:var(--pink)}
@keyframes horse-gallop{0%,24.99%{background-position:0 0}25%,49.99%{background-position:100% 0}50%,74.99%{background-position:0 100%}75%,100%{background-position:100% 100%}}
.section{padding:90px 7%;scroll-margin-top:30px}.section-heading{text-align:center;margin-bottom:50px}.section-heading h2,.about h2,.contact h2{font-size:clamp(30px,3.4vw,46px);line-height:1.5}.section-kicker{color:var(--pink);font-size:16px;margin-bottom:16px}.section-note{color:var(--muted);font-size:16px;line-height:1.9;margin:20px auto 0;max-width:44ch}.handwritten{font-family:"East Sea Dokdo",cursive!important;font-size:76px!important;line-height:1!important;letter-spacing:3px}
.works{padding:0 7% 75px;background:transparent}.works>.section-heading{min-height:60svh;display:flex;align-items:center;justify-content:center;padding:75px 0 30px;margin-bottom:0}.works .section-note{color:var(--white)}.filters{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:20px 0 50px}.filter{border:1px solid #accbff80;background:transparent;color:var(--white);font-size:16px;min-height:46px;padding:10px 23px;border-radius:48% 43% 47% 41%;white-space:nowrap}.filter.active{background:var(--pink);border-color:var(--pink);color:#0c3661}.filter:hover:not(.active){background:#06367580}
.project-grid{max-width:1180px;margin:0 auto}.project-card{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:clamp(30px,6vw,80px);min-height:80svh;padding:90px 15px 110px;min-width:0}.project-card:nth-child(even) .project-poster{grid-column:2;grid-row:1;transform:rotate(2deg)}.project-card:nth-child(even) .project-copy{grid-column:1;grid-row:1}
.project-poster{position:relative;display:block;border:8px solid #f8e8ed;padding:0;width:100%;aspect-ratio:16/10;background:#0d284f;overflow:hidden;transform:rotate(-2deg);box-shadow:-12px 16px 0 #072d6b6b;transition:transform .25s}.project-poster:has(img[height="960"]){width:min(300px,86%);aspect-ratio:3/4;justify-self:center}.project-poster img{width:100%;height:100%;object-fit:cover}.project-poster:hover,.project-card:nth-child(even) .project-poster:hover{transform:rotate(0deg)}
.play-mark{position:absolute;bottom:14px;left:14px;background:#062744ed;border:1px solid #c1daff77;padding:8px 16px;border-radius:48% 43% 47% 41%;color:var(--white);font-size:14px}.project-copy{background:#052d6bd9;padding:40px 36px;text-align:center;border-radius:46% 44% 42% 47%/17% 19% 22% 17%;position:relative}.project-type{font-size:14px;color:#c8e6ff;margin-bottom:12px}.project-copy h3{font-size:32px;line-height:1.45;overflow-wrap:anywhere}.project-copy p:not(.project-type){font-size:16px;line-height:1.9;margin:17px auto 0;max-width:32ch}.project-open{display:inline-block;margin-top:23px;border:0;background:#fbe8ed;color:#133a68;border-radius:49% 42% 45% 44%;padding:12px 24px;font-size:16px;min-height:46px}.project-open:hover{background:var(--green)}.work-count{text-align:center;color:#d4e9ff;font-size:14px;margin-top:20px}
.process{background:#042b7180}.process-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 65px;max-width:1090px;margin:0 auto}.process-list article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 22px}.step-index{grid-row:1/3;font-family:"East Sea Dokdo",cursive;font-size:50px;line-height:1;color:var(--green)}.process-list h3{font-size:24px;line-height:1.5}.process-list p{grid-column:2;font-size:16px;line-height:1.9;color:#dfecff}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:70px 8%;max-width:1470px;margin:auto;background:transparent}.about-intro>p:not(.section-kicker):not(.about-role){max-width:390px;margin:24px 0;color:#e0eeff;font-size:16px}.about-role{font-size:18px;line-height:1.7;margin-top:14px}.about .section-kicker{font-family:"East Sea Dokdo",cursive;font-size:44px;line-height:1}.experience>h3{font-size:23px;margin:10px 0 20px}.experience article{display:grid;grid-template-columns:160px 1fr;gap:18px;border-top:1px solid #96b7ec6b;padding:22px 0}.experience time{font-size:14px;line-height:1.7;color:#c4defa}.experience h4{font-size:18px;line-height:1.6}.experience p{font-size:16px;color:#cce2ff;margin-top:6px}.tool-line{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid #96b7ec6b;padding-top:32px}.tool-line h3{font-size:18px;margin-bottom:12px}.tool-line p{font-size:16px;color:#cee4ff}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 25px;border:0;min-height:48px;font-size:16px;border-radius:49% 44% 48% 46%}.primary{background:#ffe9ef;color:#123966}.primary:hover{background:var(--green)}
.contact{background:#03245ac9;display:flex;align-items:center;justify-content:space-between;gap:40px}.contact-details{display:flex;flex-direction:column;gap:18px;align-items:flex-start}.contact-details a{font-size:clamp(19px,2.3vw,30px);border-bottom:1px solid #aac8e5;padding-bottom:8px;overflow-wrap:anywhere}.contact-details a:hover{color:var(--green)}footer{display:flex;justify-content:space-between;gap:24px;padding:32px 7%;background:#052147;font-size:14px;color:#d5e9ff}footer a{text-decoration:underline;text-underline-offset:5px}
.project-dialog,.resume-dialog{padding:0;width:min(1100px,calc(100% - 32px));max-height:92dvh;border:1px solid #75a7e66b;border-radius:12px;background:#083a78;color:var(--white);overflow:auto}.project-dialog::backdrop,.resume-dialog::backdrop{background:#02142be6;backdrop-filter:blur(5px)}.dialog-close{position:sticky;top:13px;z-index:3;display:block;margin:13px 13px 0 auto;border:0;border-radius:46% 43% 45% 41%;padding:10px 20px;min-height:44px;font-size:16px;background:#fae6ed;color:#14355c}.dialog-close:hover{background:var(--green)}
.dialog-top{padding:10px 36px 28px}.dialog-top h2{font-size:clamp(27px,3vw,38px);line-height:1.5;max-width:850px;overflow-wrap:anywhere}.dialog-top>p{font-size:16px;color:#dceaff;margin-top:12px}.dialog-top .section-kicker{font-size:14px;color:#dce6fb}.screening{background:#031c38;padding:25px 32px}.video-shell{display:flex;align-items:center;justify-content:center;min-height:240px}.video-shell video{width:100%;max-height:62dvh;display:block;background:#03172d}.video-shell.portrait video{width:auto;max-width:100%;height:58dvh}
.episode-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}.episode-controls label{font-size:16px;display:flex;align-items:center;gap:13px}.episode-controls select{font-size:16px;min-height:44px;padding:9px 13px;border:1px solid #a9c7f2;background:#e9edfa;color:#12365b;border-radius:3px;max-width:250px}.episode-controls p{font-size:14px;color:#d1e3ff}.video-error{font-size:16px;color:#ffcbd6;margin-top:16px}.video-error a{text-decoration:underline}
.case-study{padding:36px;display:grid;grid-template-columns:1.5fr 1fr;gap:38px}.case-study h3{font-size:25px;margin-bottom:17px}.case-study p{font-size:16px;line-height:1.9;color:#e1ecfc;margin-top:13px}.case-study .case-role{color:var(--pink);margin:0 0 25px}.case-facts{border-left:1px solid #79a6da80;padding-left:26px}.case-facts dl{margin:0}.case-facts dt{font-size:14px;color:#bdd7fb;margin-top:18px}.case-facts dt:first-child{margin-top:0}.case-facts dd{font-size:16px;line-height:1.9;margin:7px 0 0}
.resume-dialog{max-width:850px}.resume-content{padding:10px 40px 45px}.resume-content h2{font-size:40px;margin-bottom:12px}.resume-content h3{font-size:22px;margin:30px 0 17px;padding-top:20px;border-top:1px solid #7fa9df99}.resume-content p{font-size:16px;margin-bottom:16px}.resume-content .button{margin-top:20px}
@media(min-width:1600px){.section{padding-left:max(7%,calc((100% - 1280px)/2));padding-right:max(7%,calc((100% - 1280px)/2))}.works{padding-top:0}.project-card{min-height:750px}}
@media(max-width:1000px){.forest-profile{left:44%;width:340px}.profile-card{left:85%;width:270px;padding:26px}.project-card{gap:30px;padding-left:0;padding-right:0}.project-copy{padding:35px 24px}.project-copy h3{font-size:28px}.about{gap:50px 7%}.experience article{grid-template-columns:1fr;gap:7px}}
@media(max-width:640px){.site-header{inset:16px 16px auto auto}.site-header nav a{font-size:28px;padding:5px 22px 8px}.hero{min-height:620px}.hero-art{object-position:54% center}.forest-heading{top:11%;left:2%;right:2%}.forest-heading h1{font-size:76px}.forest-heading p{font-size:14px;letter-spacing:1px}.forest-profile{top:48%;left:47%;width:290px}.horse-note{left:77%;top:68%;font-size:14px;padding:9px 17px}.profile-card{top:70%;left:5%;width:280px;padding:24px 25px}.forest-front{object-position:50% center}.scene-scroll{bottom:5%}.scene-scroll span{font-size:30px}.scene-scroll small{font-size:14px}.section{padding:65px 7%}.section-heading{margin-bottom:35px}.section-heading h2,.about h2,.contact h2{font-size:30px}.section-note{font-size:16px}.works{padding-top:0}.works>.section-heading{min-height:50svh;padding:70px 0 20px}.handwritten{font-size:66px!important}.filters{gap:10px;margin:15px 0 25px}.filter{font-size:16px;padding:10px 18px}.project-card{display:flex;flex-direction:column;gap:35px;min-height:0;padding:60px 0 65px}.project-card:nth-child(even) .project-poster{order:0}.project-copy{width:100%;padding:35px 24px}.project-copy h3{font-size:29px}.project-poster{width:100%;border-width:7px}.project-poster:has(img[height="960"]){width:240px}.project-copy p:not(.project-type){font-size:16px}.project-open{font-size:16px}.process-list{grid-template-columns:1fr;gap:32px}.process-list article{grid-template-columns:38px minmax(0,1fr);gap:8px 15px}.process-list h3{font-size:22px}.step-index{font-size:43px}.about{grid-template-columns:1fr;gap:45px}.tool-line{grid-template-columns:1fr;gap:28px}.contact{display:block}.contact-details{margin-top:28px}.contact-details a{font-size:21px}footer{gap:16px;flex-wrap:wrap}footer>span:nth-child(2){display:none}.project-dialog,.resume-dialog{width:calc(100% - 18px);max-height:94dvh}.dialog-close{top:10px;margin:10px 10px 0 auto}.dialog-top{padding:12px 20px 25px}.dialog-top h2{font-size:27px}.screening{padding:20px 14px}.video-shell{min-height:180px}.video-shell video{max-height:50dvh}.video-shell.portrait video{height:52dvh}.episode-controls{gap:13px}.episode-controls label{flex-wrap:wrap}.case-study{padding:28px 20px;grid-template-columns:1fr;gap:30px}.case-facts{border:0;border-top:1px solid #79a6da80;padding:25px 0 0}.resume-content{padding:10px 23px 35px}.resume-content h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-art,.forest-front{will-change:auto;transform:none!important}.horse-sprite{background-position:0 0}}