/* A quiet, dimensional stage inspired by the author's app story. */
:root{--bg:#0e1d15;--fg:#f6f4ec;--lime:#9ed6ae;--muted:#9eb3a5;--line:#8fd6a329}
body{background:var(--bg)}header{background:#0e1d15df;backdrop-filter:blur(18px);border-color:var(--line)}
#portfolio-sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.65}main,header,.foot{position:relative}header{position:fixed}
.section{background:transparent}.intro-home{padding-top:0}.intro-home>.hero-body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;gap:0;padding:105px 0 50px;overflow:visible;text-align:center}
.hero-body>div:first-child{position:relative;z-index:2;max-width:960px}.hero h1.refined-title{font-family:'Gowun Batang',serif;font-size:clamp(44px,5.4vw,82px);font-weight:700;line-height:1.32;letter-spacing:-.04em;white-space:pre-line;margin-bottom:22px}.hero .eyebrow{font-size:10px;letter-spacing:.22em;margin-bottom:22px}.hero .desc{font-size:15px;line-height:1.95;max-width:510px;margin:0 auto;color:#b9c9be}.hero-actions{justify-content:center;gap:26px;margin-top:24px}.hero-actions .primary-link{background:transparent;border-bottom:1px solid #9ed6ae8c;border-radius:0;padding:10px 0;color:var(--lime);font-size:12px}.hero-actions .secondary-link{font-size:12px}.hero-identity{justify-content:center;margin-top:25px;gap:10px}.hero-portrait{width:34px;height:34px}.hero-identity .small{font-size:9px}.hero-bottom{width:100%;justify-content:center;border:0;padding-top:0;margin-top:32px}.hero-bottom p{display:none}.scroll-link{font-size:9px;letter-spacing:.18em}
.hero-art.perspective-art{order:-1;width:400px;max-width:84vw;height:230px;min-height:230px;padding:0;margin:0 auto 30px;background:none;transform:perspective(1100px) translate3d(0,var(--scroll-shift,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out}
.perspective-art:before{width:150px;top:48%;background:radial-gradient(circle at 31% 25%,#e3f3d9,#8bb196 15%,#42644c 39%,#1d3928 62%,#0d1a12 75%);box-shadow:inset -20px -18px 35px #07110a,0 0 90px #8fd6a314}
.perspective-art:after{width:360px;max-width:94%;height:80px;top:48%;transform:translate(-50%,-50%) translateZ(22px) rotate(-20deg);border-color:#9ed6ae42}
.perspective-node{width:100px;min-height:70px;border-radius:18px;padding:10px 8px;background:linear-gradient(145deg,#264233e8,#102218d9);border-color:#8fd6a330;box-shadow:0 16px 30px #0004;gap:4px}.perspective-node svg{width:20px;height:20px;stroke:var(--lime)}.perspective-node strong{font-size:11px}.perspective-node span{font-size:9px}.node-0{left:18%;top:39%}.node-1{left:85%;top:40%}.node-2{left:51%;top:83%}.perspective-statement{display:none}.perspective-top{position:fixed;inset:auto 0 -35px;display:block;pointer-events:none}.perspective-top>span{display:none}.perspective-top .motion-toggle{pointer-events:auto;position:absolute;right:0;bottom:0;font-size:9px;padding:6px 9px;border-color:#8fd6a32a;color:#9eb3a5;background:#102218}
.about-context{padding-top:70px;padding-bottom:35px}.about-context h2,.selected-work>h2,.team-title,.writing>h2,.contact h2{font-family:'Gowun Batang',serif;font-weight:700;line-height:1.4;letter-spacing:-.035em}.about-context h2{font-size:clamp(32px,4vw,56px)}.selected-work>h2,.writing>h2{font-size:clamp(34px,4.3vw,62px)}.section-meta{color:#94ab9b}.project-entry{background:#14271db3;border-color:#8fd6a326;border-radius:16px}.writing-card{background:#14271db3;border-color:#8fd6a329}.context-details>summary{color:#d6e2d9}.building-grid article{border-color:#77a98a}.contact-mark{border-color:#8fd6a345}
.family-feature{position:relative;isolation:isolate;display:grid;grid-template-columns:1.1fr 1fr;column-gap:48px;align-items:center;margin:58px 0 70px;padding:55px 0 0;border-top:1px solid var(--line);scroll-margin-top:110px}.family-feature:before{content:'';position:absolute;z-index:-1;inset:-40px -5vw 0;background:radial-gradient(ellipse at 78% 39%,#87c99f13,transparent 52%);pointer-events:none}.family-copy .case-kicker{color:#9ed6ae;font-size:10px;letter-spacing:.16em;margin:0 0 28px}.family-brandline{display:flex;align-items:center;gap:10px;margin-bottom:23px;font-size:14px}.family-brandline img{width:35px;height:35px;border-radius:10px;box-shadow:0 8px 20px #0003}.family-brandline img+img{margin-left:-3px}.family-brandline .prototype-tag{font-size:10px;color:#abc4b4;border:1px solid var(--line);padding:5px 9px;border-radius:30px;margin-left:4px}.family-feature h3{font-family:'Gowun Batang',serif;font-weight:700;font-size:clamp(29px,3.2vw,48px);line-height:1.42;letter-spacing:-.035em;white-space:pre-line;margin:0 0 22px}.family-lead{font-size:15px;line-height:1.95;color:#b9c9be;max-width:460px;margin:0}.family-story-link{display:inline-flex;align-items:center;gap:32px;color:#f2f6ec;font-size:14px;padding:14px 0;border-bottom:1px solid #9ed6ae8c;margin-top:16px}.family-story-link>span:last-child{font-size:22px;color:var(--lime);transition:transform .2s}.family-story-link:hover>span:last-child{transform:translate(3px,-3px)}.family-role{color:#91aa99;font-size:10px;line-height:1.9;letter-spacing:.02em;margin-top:20px}
.family-visual{position:relative;display:block;isolation:isolate;min-height:510px;perspective:1200px;transform-style:preserve-3d;--turn:0deg;--lift:0px}.family-phone{position:absolute;width:47%;max-width:210px;aspect-ratio:585/1266;background:#121c16;border:5px solid #1d3023;border-radius:29px;overflow:hidden;box-shadow:20px 40px 70px #0007;transition:transform .3s ease-out;transform-style:preserve-3d}.family-phone img{width:100%;height:100%;object-fit:cover;display:block}.phone-picksure{left:5%;top:6%;transform:translateY(var(--lift)) rotateY(calc(18deg + var(--turn))) rotateZ(-8deg);z-index:2}.phone-huonna{right:0;top:15%;transform:translateY(calc(var(--lift) * -1)) translateZ(-50px) rotateY(calc(-20deg + var(--turn))) rotateZ(9deg);z-index:1}.family-orbit{position:absolute;inset:27% -5% auto;width:110%;height:30%;border:1px solid #8fd6a32c;border-radius:50%;transform:rotate(-26deg);z-index:-1}.visual-label{position:absolute;bottom:-12px;left:0;right:0;text-align:center;font:9px ui-monospace,monospace;letter-spacing:.14em;color:#8cae96}.family-products{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:28px;margin-top:45px}.family-products>div{display:flex;gap:18px}.product-number{font:10px ui-monospace,monospace;color:#7ba48a;padding-top:6px}.family-products h4{font-size:15px;font-weight:500;margin:0 0 8px}.family-products p{font-size:13px;line-height:1.8;color:#a1b7a9;margin:0}.motion-off .perspective-node{animation:none!important}.motion-off .perspective-art,.motion-off .family-phone{transition:none!important}.motion-off #portfolio-sky{opacity:.35}
@media(min-width:1500px){.hero-art.perspective-art{margin-bottom:42px;min-height:250px;height:250px}.hero h1.refined-title{font-size:82px}}
@media(max-width:1000px){.family-feature{gap:30px;grid-template-columns:1fr 1fr}.family-visual{min-height:430px}.family-brandline{flex-wrap:wrap}.family-brandline .prototype-tag{margin-left:0}.family-phone{border-radius:24px}.family-copy .case-kicker{margin-bottom:20px}.family-feature h3{font-size:34px}}
@media(max-width:700px){.intro-home>.hero-body{min-height:100svh;padding:135px 0 45px}.hero h1.refined-title{font-size:clamp(34px,8.2vw,54px);letter-spacing:-.055em;line-height:1.4}.hero .desc{font-size:13px;max-width:330px}.hero-art.perspective-art{width:320px;min-height:205px;height:205px;margin-bottom:38px}.perspective-art:before{width:130px}.perspective-node{width:85px;min-height:66px;border-radius:16px}.node-0{left:16%;top:34%}.node-1{left:83%;top:38%}.node-2{left:49%;top:82%}.perspective-node strong{font-size:10px}.perspective-node span{font-size:9px}.perspective-top{bottom:-24px}.hero-actions{gap:20px;margin-top:22px}.hero-identity{margin-top:22px}.hero-bottom{margin-top:30px}.about-context{padding-top:45px;padding-bottom:15px}.family-feature{grid-template-columns:1fr;margin:38px 0 50px;padding-top:32px;gap:20px}.family-feature h3{font-size:34px}.family-lead{font-size:14px}.family-visual{width:min(360px,100%);min-height:415px;margin:10px auto 0}.family-phone{max-width:167px}.family-products{grid-template-columns:1fr;gap:22px;margin-top:20px;padding-top:24px}.family-brandline{gap:9px}.family-products h4{font-size:14px}.family-products p{font-size:12px}.family-role{font-size:10px}.section-meta{font-size:9px}.family-copy .case-kicker{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.perspective-node{animation:none!important}.hero-art.perspective-art{transform:none!important}.family-phone{transition:none!important}}
@media(min-width:701px) and (max-height:850px){.intro-home>.hero-body{padding-top:100px;padding-bottom:25px}.hero-art.perspective-art{height:150px;min-height:150px;width:320px;margin-bottom:28px}.perspective-art:before{width:110px}.perspective-node{width:82px;min-height:60px;padding:7px}.perspective-node svg{width:16px;height:16px}.perspective-node strong{font-size:10px}.perspective-node span{font-size:8px}.perspective-top{bottom:-23px}.hero h1.refined-title{font-size:clamp(42px,4.6vw,64px);margin-bottom:14px}.hero .eyebrow{margin-bottom:16px}.hero .desc{font-size:14px}.hero-actions{margin-top:14px}.hero-identity{margin-top:15px}.hero-portrait{width:28px;height:28px}.hero-bottom{margin-top:20px}}