@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root{--bg:#f4f2ed;--fg:#111;--muted:#76736d;--line:#a9a59d;--pad:clamp(18px,2.2vw,34px);--gap:clamp(14px,1.4vw,24px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Averta PE',Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:300;letter-spacing:normal;text-transform:uppercase}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:#111;color:#fff}.shell{padding:0 var(--pad)}
.top{position:fixed;z-index:50;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:18px var(--pad);font-size:12px;line-height:1.25;mix-blend-mode:difference;color:#fff;pointer-events:none}.top>*{pointer-events:auto}.top-center{display:flex;gap:26px}.top-center a{text-transform:none}.top-right{text-align:right}.top a{position:relative}.top a:after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}.top a:hover:after{right:0}
.hero{min-height:100vh;padding-top:88px;padding-bottom:18px;display:grid;grid-template-columns:minmax(0,2.25fr) minmax(250px,.75fr);gap:var(--gap);align-items:end}.hero-main{align-self:end}.hero-line{font-size:clamp(54px,8.4vw,146px);line-height:.88;letter-spacing:normal;font-weight:300;margin:0;max-width:1200px}.hero-line .light{font-weight:300}.hero-side{border-top:1px solid var(--fg);padding-top:12px;align-self:end}.mini-label{font-size:10px;letter-spacing:normal;margin-bottom:20px;color:var(--muted)}.side-list{display:grid;gap:7px;font-size:clamp(16px,1.35vw,22px);line-height:1.15}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--fg);padding-top:10px;margin-top:24px;font-size:11px;letter-spacing:normal}
.intro-block{padding:120px 0 90px;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap)}.intro-copy{font-size:clamp(34px,5.2vw,78px);line-height:.98;letter-spacing:normal;font-weight:300;margin:0}.intro-copy b{font-weight:700}.philosophy{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:70px}.phil{border-top:1px solid var(--fg);padding-top:10px}.phil strong{font-size:12px;letter-spacing:normal;font-weight:700}.phil p{font-size:13px;line-height:1.55;color:var(--muted);margin:35px 0 0}
.ai-strip{margin:0 calc(-1*var(--pad));padding:24px var(--pad);background:#111;color:#fff;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap);align-items:start}.ai-strip .mini-label{color:#8d8d8d}.ai-big{font-size:clamp(42px,6.8vw,110px);line-height:.88;letter-spacing:normal;font-weight:300;margin:0}.ai-big .light{font-weight:300}.ai-desc{grid-column:2;max-width:760px;font-size:15px;line-height:1.65;color:#bcbcbc;margin:34px 0 10px}
.work-section{padding:120px 0 80px}.section-top{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--fg);padding-top:10px;margin-bottom:24px}.section-top h2{font-size:12px;font-weight:300;margin:0}.section-top span{font-size:11px;color:var(--muted)}.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);row-gap:52px}.project{display:block;position:relative}.project:nth-child(1){grid-column:1/span 7}.project:nth-child(2){grid-column:8/span 5;margin-top:170px}.project:nth-child(3){grid-column:2/span 5}.project:nth-child(4){grid-column:7/span 6;margin-top:110px}.project:nth-child(5){grid-column:1/span 4}.project:nth-child(6){grid-column:5/span 8;margin-top:80px}.project-meta{display:flex;justify-content:space-between;gap:18px;margin-bottom:8px;font-size:11px;letter-spacing:normal}.project-title{font-size:clamp(18px,2vw,30px);font-weight:300;letter-spacing:normal}.placeholder{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--line);overflow:hidden;background:transparent;transition:.45s cubic-bezier(.2,.75,.15,1)}.placeholder.tall{aspect-ratio:4/5}.placeholder.wide{aspect-ratio:2/1}.placeholder:before,.placeholder:after{content:"";position:absolute;left:50%;top:50%;width:142%;height:1px;background:var(--line);transform-origin:center}.placeholder:before{transform:translate(-50%,-50%) rotate(32deg)}.placeholder:after{transform:translate(-50%,-50%) rotate(-32deg)}.project:hover .placeholder{transform:scale(.988);background:#e9e6df}.project:hover .project-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.archive{padding:110px 0 80px;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap);border-top:1px solid var(--fg)}.archive h2{font-size:11px;font-weight:300;margin:0}.archive-list{border-top:1px solid var(--line)}.archive-row{display:grid;grid-template-columns:105px 1fr 1fr 36px;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px;transition:.25s}.archive-row:hover{padding-left:10px;padding-right:10px;background:#111;color:#fff}.archive-row .muted{color:var(--muted)}
.footer{padding:80px 0 18px}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);border-top:1px solid var(--fg);padding-top:10px}.footer h3{font-size:10px;letter-spacing:normal;color:var(--muted);font-weight:300;margin:0 0 18px}.footer a,.footer p{font-size:13px;line-height:1.6;margin:0}.foot-name{font-size:clamp(46px,8vw,126px);font-weight:300;letter-spacing:normal;line-height:.82;margin:80px 0 0}.foot-name .light{font-weight:300}
.case-hero{min-height:100vh;padding:110px 0 24px;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap);align-items:end}.case-title{grid-column:2;font-size:clamp(52px,8vw,126px);line-height:.87;letter-spacing:normal;font-weight:300;margin:0}.case-title .light{font-weight:300}.case-kicker{grid-column:1;align-self:end;font-size:11px;letter-spacing:normal;color:var(--muted)}.case-meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);border-top:1px solid var(--fg);padding-top:10px;margin-top:35px;font-size:11px}.case-section{padding:110px 0;display:grid;grid-template-columns:1fr 2.2fr;gap:var(--gap)}.case-section .label{font-size:10px;letter-spacing:normal;color:var(--muted)}.case-copy h2{font-size:clamp(32px,4.5vw,68px);line-height:1;letter-spacing:normal;font-weight:300;margin:0 0 28px}.case-copy h2 b{font-weight:700}.case-copy p{max-width:720px;font-size:15px;line-height:1.7;color:#54514b}.case-image{grid-column:1/-1;margin-top:45px}.case-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);margin-top:50px}.case-stats div{padding:18px 16px 18px 0}.case-stats div+div{border-left:1px solid var(--line);padding-left:16px}.case-stats strong{display:block;font-size:clamp(34px,4vw,62px);font-weight:700;letter-spacing:normal}.case-stats span{font-size:11px;color:var(--muted)}
.about-hero{min-height:100vh;padding:110px 0 24px;display:flex;align-items:flex-end}.about-hero h1{font-size:clamp(58px,8.8vw,142px);line-height:.86;letter-spacing:normal;font-weight:300;margin:0}.about-hero b{font-weight:700}.timeline{padding:90px 0;border-top:1px solid var(--fg)}.timeline-row{display:grid;grid-template-columns:120px 1fr 1.6fr;gap:var(--gap);padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}.timeline-row .year{color:var(--muted)}.timeline-row.ai{background:#111;color:#fff;margin:0 calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}.timeline-row.ai .year,.timeline-row.ai .desc{color:#999}
@media(max-width:850px){.top{grid-template-columns:1fr 1fr}.top-center{display:none}.hero,.intro-block,.ai-strip,.archive,.case-hero,.case-section{grid-template-columns:1fr}.hero-side,.intro-copy,.philosophy,.ai-big,.ai-desc,.case-title,.case-kicker{grid-column:1}.hero{align-content:end}.philosophy{grid-template-columns:1fr;margin-top:25px}.work-grid{grid-template-columns:1fr}.project,.project:nth-child(n){grid-column:1;margin-top:0}.archive-row{grid-template-columns:70px 1fr 28px}.archive-row .muted:nth-of-type(2){display:none}.footer-grid{grid-template-columns:1fr}.case-meta{grid-template-columns:1fr 1fr}.timeline-row{grid-template-columns:80px 1fr}.timeline-row .desc{grid-column:2}.hero-bottom{flex-direction:column}.hero-line{font-size:clamp(54px,16vw,100px)}}