@import url('/assets/fonts/fonts.css');

:root{color-scheme:light;--canvas:#f6f4ef;--surface:#fff;--ink:#22231f;--secondary:#65675e;--rule:#dcddd3;--action:#303a2d;--on-action:#fff;--focus:#3851b8;--serif:'Newsreader',Georgia,'Times New Roman',serif;--sans:'DM Sans','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;--gutter:clamp(22px,5.5vw,84px);--content:1320px;--motion:240ms;--ease:cubic-bezier(.2,.7,.2,1)}
[data-theme=dark]{color-scheme:dark;--canvas:#171816;--surface:#22231f;--ink:#f3f1e9;--secondary:#b8baae;--rule:#45473f;--action:#e4e7d9;--on-action:#252a22;--focus:#b7c4ff}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:116px}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body,button,a{transition:background-color var(--motion),color var(--motion),border-color var(--motion)}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
img{max-width:100%;height:auto}
svg{flex:none}
p,h1,h2,h3{margin:0}
h1,h2,h3{font-weight:400}
em{font-weight:400}
.wrap{width:min(var(--content),calc(100% - var(--gutter)*2));margin-inline:auto}
.skip-link{position:fixed;z-index:20;top:12px;left:12px;padding:10px 18px;background:var(--ink);color:var(--canvas);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.masthead{position:relative;z-index:5}
.masthead-inner{min-height:104px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--rule)}
.home-link{width:62px;min-height:64px;display:flex;align-items:center;margin-right:auto}
.studio-mark{display:block;width:52px;height:52px;object-fit:contain}
[data-theme=dark] .studio-mark{filter:invert(1)}
.masthead nav{display:flex;gap:30px}
.masthead nav a,.language-link{font-size:14px;line-height:44px;position:relative}
.masthead nav a::after,.language-link::after{content:'';position:absolute;left:0;bottom:8px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion) var(--ease)}
.masthead nav a:hover::after,.language-link:hover::after{transform:scaleX(1)}
.header-tools{display:flex;align-items:center;gap:13px;padding-left:27px;border-left:1px solid var(--rule)}
.language-link{min-width:28px;text-align:center;font-size:12px;letter-spacing:.06em}
.theme-toggle{display:none;width:40px;height:44px;background:none;border:0;padding:8px}
.js .theme-toggle{display:grid;place-items:center}
.theme-toggle svg{width:23px;height:23px;transition:transform 350ms var(--ease)}
.theme-toggle:hover svg{transform:rotate(40deg)}
.eyebrow,.section-kicker{font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{color:var(--secondary)}
.hero{padding-top:76px;padding-bottom:60px}
.hero h1{font-family:var(--serif);font-size:clamp(58px,9.7vw,148px);line-height:.98;letter-spacing:-.047em;padding-top:28px;text-wrap:balance}
.hero h1 em{letter-spacing:-.05em}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:34px}
.hero-bottom p{font-size:clamp(18px,2.1vw,25px);max-width:650px;line-height:1.5;letter-spacing:-.025em;color:var(--secondary)}
.scroll-cue{display:grid;place-items:center;width:48px;height:56px;flex:none}
.scroll-cue svg{width:24px;height:36px;transition:transform var(--motion) var(--ease)}
.scroll-cue:hover svg{transform:translateY(5px)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;margin-bottom:30px;border-top:1px solid var(--rule)}
.section-count{font-size:12px;letter-spacing:.13em;color:var(--secondary)}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.project-card-link{display:block;height:100%;position:relative}
.project-art{aspect-ratio:1.04;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--field);isolation:isolate;transition:background-color var(--motion)}
.art-framewise{--field:#e7e9e5;--field-dark:#32362f;--art-ink:#596151}
.art-loft{--field:#efdfa6;--field-dark:#393325;--art-ink:#665326}
.art-offscene{--field:#e8ebe8;--field-dark:#2b2f2c;--art-ink:#516056}
[data-theme=dark] .project-art{background:var(--field-dark);--art-ink:#c4c9b7}
.project-art .app-icon{position:relative;z-index:1;width:66%;display:block;transform:translateY(3px);transition:transform 520ms var(--ease)}
.art-framewise .app-icon{transform:translateY(4px) rotate(-6deg)}
.art-loft .app-icon{transform:translateY(3px) rotate(5deg)}
.art-offscene .app-icon{transform:translateY(4px) rotate(-3deg)}
.project-card-link:hover .app-icon{transform:translateY(-7px) rotate(0deg)}
.art-index,.art-caption{position:absolute;z-index:2;font-size:10px;letter-spacing:.1em;line-height:1.4;color:var(--art-ink);text-transform:uppercase}
.art-index{top:19px;left:21px}
.art-caption{bottom:18px;left:21px}
.art-line{position:absolute;pointer-events:none;border:1px solid var(--art-ink);opacity:.12}
.art-framewise .art-line-one{inset:17% 12%;transform:rotate(7deg)}
.art-framewise .art-line-two{inset:12% 17%;transform:rotate(-7deg)}
.art-loft .art-line-one{width:90%;height:90%;border-radius:50%;right:-24%;top:16%}
.art-loft .art-line-two{width:90%;height:90%;border-radius:50%;right:-32%;top:16%}
.art-offscene .art-line-one{width:66%;height:78%;transform:rotate(12deg);top:9%;left:10%}
.art-offscene .art-line-two{width:66%;height:78%;transform:rotate(-9deg);top:15%;left:25%}
.project-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}
.project-card h3{font-family:var(--serif);font-size:43px;line-height:1.12;letter-spacing:-.035em}
.project-arrow{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;transition:background-color var(--motion),transform var(--motion)}
.project-arrow svg{width:17px;height:17px;transform:rotate(-45deg)}
.project-card-link:hover .project-arrow{background:var(--ink);color:var(--canvas);transform:rotate(45deg)}
.status{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--secondary)}
.status-dot{display:inline-block;flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}
.project-description{margin-top:19px;color:var(--secondary);font-size:16px;line-height:1.6;max-width:32ch}
.text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:14px;border-bottom:1px solid var(--rule)}
.text-link svg{width:20px;height:20px;transition:transform var(--motion) var(--ease)}
.project-card .text-link{margin-top:15px}
.project-card-link:hover .text-link svg,.text-link:hover svg{transform:translateX(4px)}
.studio-section{margin-top:110px;border-top:1px solid var(--rule);padding-top:25px}
.studio-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;margin-top:36px;align-items:start}
.studio-intro h2{font-family:var(--serif);font-size:clamp(48px,5.2vw,78px);line-height:1.04;letter-spacing:-.045em}
.studio-story{padding-top:6px;color:var(--secondary);max-width:520px}
.origin{display:flex;align-items:baseline;gap:12px;color:var(--ink);margin-bottom:19px}
.origin>span:first-child{font-size:20px;font-weight:500;letter-spacing:-.025em}
.origin-pronunciation{font-size:12px;letter-spacing:.02em;color:var(--secondary)}
.studio-story>p:last-child{font-size:18px;line-height:1.7;letter-spacing:-.015em}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:64px}
.principle{border-top:1px solid var(--rule);padding-top:18px}
.principle-number{font-size:11px;letter-spacing:.06em;color:var(--secondary)}
.principle h3{font-size:17px;font-weight:500;line-height:1.4;margin-top:12px;letter-spacing:-.02em}
.principle p{font-size:14px;line-height:1.7;max-width:36ch;color:var(--secondary);margin-top:9px}
.contact-section{padding-top:25px;margin-top:100px;border-top:1px solid var(--rule);padding-bottom:70px}
.contact-main{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:28px}
.contact-main h2{font-family:var(--serif);font-size:clamp(46px,5.4vw,82px);line-height:1.1;letter-spacing:-.045em}
.contact-main p{max-width:460px;font-size:15px;color:var(--secondary);margin-top:17px;line-height:1.7}
.email-link{display:inline-flex;gap:22px;align-items:center;white-space:nowrap;font-family:var(--serif);font-size:clamp(28px,3.2vw,43px);line-height:1.3;border-bottom:1px solid var(--secondary);padding-block:8px;letter-spacing:-.02em}
.email-link svg{width:25px;height:25px;transition:transform var(--motion) var(--ease)}
.email-link:hover svg{transform:translateX(5px)}
.footer{border-top:1px solid var(--rule);display:flex;align-items:center;gap:24px;min-height:100px;font-size:11px;color:var(--secondary)}
.footer-brand{display:flex;align-items:center;gap:18px}
.footer .studio-mark{width:32px;height:32px}
.footer-note{margin-left:auto}
.footer>a:last-child{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.footer>a:last-child svg{width:14px;height:14px}
.product-breadcrumb{display:flex;justify-content:space-between;align-items:center;padding-top:31px}
.back-link{display:inline-flex;align-items:center;gap:11px;min-height:44px;font-size:13px}
.back-link svg{width:19px;height:19px;transform:rotate(180deg)}
.product-hero{display:grid;grid-template-columns:1.03fr 1fr;align-items:start;gap:7%;padding-top:45px;padding-bottom:84px}
.product-hero-copy{padding-top:10px}
.product-hero h1{font-family:var(--serif);font-size:clamp(48px,5.9vw,86px);line-height:1.04;letter-spacing:-.045em;margin-top:27px}
.product-tagline{font-family:var(--serif);font-size:clamp(35px,3.5vw,50px);line-height:1.13;letter-spacing:-.035em;margin-top:22px}
.product-lede{font-size:17px;color:var(--secondary);max-width:510px;line-height:1.75;margin-top:28px}
.product-facts{display:flex;gap:42px;border-top:1px solid var(--rule);padding-top:22px;margin:29px 0 0}
.product-facts dt{font-size:11px;line-height:1.5;letter-spacing:.07em;text-transform:uppercase;color:var(--secondary)}
.product-facts dd{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0 0}
.art-large{min-height:510px;aspect-ratio:1;align-self:center}
.art-large .app-icon{width:66%}
.art-large .art-index{top:24px;left:26px;font-size:11px}
.art-large .art-caption{bottom:24px;left:26px;font-size:11px}
.product-overview{border-top:1px solid var(--rule);padding-top:25px;display:grid;grid-template-columns:1fr 2fr;gap:8%}
.overview-text{max-width:870px;font-family:var(--serif);font-size:clamp(30px,3.1vw,43px);line-height:1.35;letter-spacing:-.02em}
.product-details{padding-top:80px;display:grid;grid-template-columns:1fr 2fr;gap:0 8%}
.product-details>h2{font-size:15px;line-height:1.5;max-width:18ch}
.feature-list{border-top:1px solid var(--rule)}
.feature{display:grid;grid-template-columns:40px 1fr;gap:12px;border-bottom:1px solid var(--rule);padding:25px 0 29px}
.feature-number{font-size:11px;color:var(--secondary);padding-top:7px;letter-spacing:.08em}
.feature h3{font-family:var(--serif);font-size:31px;line-height:1.3;letter-spacing:-.025em}
.feature p{font-size:16px;color:var(--secondary);line-height:1.7;max-width:610px;margin-top:9px}
.development-note{grid-column:2;font-size:13px;line-height:1.75;color:var(--secondary);margin-top:25px;max-width:650px}
.product-page .contact-section{margin-top:85px}
.product-page .contact-main h2{font-size:clamp(40px,4.3vw,68px)}
.product-page .contact-main h2 em{display:block}
.next-project{border-top:1px solid var(--rule);margin-bottom:70px}
.next-project>a{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:30px}
.next-project>a>span:first-child{display:flex;flex-direction:column;gap:14px}
.next-name{font-family:var(--serif);font-size:clamp(44px,5vw,72px);line-height:1.1;letter-spacing:-.04em}
.next-art{display:flex;align-items:center;gap:34px}
.next-art .app-icon{width:92px;height:92px;transition:transform var(--motion)}
.next-art>svg{width:32px;height:32px}
.next-project a:hover .app-icon{transform:rotate(-5deg)}
.not-found{padding-block:80px}
.not-found .eyebrow{margin-top:70px}
.not-found h1{font-family:var(--serif);font-size:clamp(50px,8vw,100px);letter-spacing:-.04em;margin-top:20px;line-height:1.1}
.not-found>p:not(.eyebrow){margin-top:20px;color:var(--secondary)}
.not-found .text-link{margin-top:28px}
.js .reveal{opacity:0;transform:translateY(13px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);transition-delay:var(--delay,0ms)}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
:lang(ko) .hero h1,:lang(ko) .studio-intro h2,:lang(ko) .contact-main h2,:lang(ko) .product-tagline,:lang(ko) .overview-text,:lang(ko) .feature h3{font-family:'Noto Serif KR','Batang',var(--sans);letter-spacing:-.055em;word-break:keep-all}
:lang(ko) .hero h1{font-size:clamp(43px,7.6vw,114px);line-height:1.2}
:lang(ko) .studio-intro h2{font-size:clamp(39px,4.5vw,67px);line-height:1.28}
:lang(ko) .contact-main h2{font-size:clamp(37px,4.9vw,73px);line-height:1.3}
:lang(ko) .product-tagline{font-size:clamp(32px,3.25vw,46px);line-height:1.35}
:lang(ko) .overview-text{font-size:clamp(25px,2.6vw,36px);line-height:1.6}
:lang(ko) .feature h3{font-size:27px;line-height:1.45}
:lang(ko) .project-description,:lang(ko) .studio-story,:lang(ko) .principle p,:lang(ko) .product-lede,:lang(ko) .feature p{word-break:keep-all}
@media(min-width:1600px){.hero{padding-top:95px;padding-bottom:75px}.hero h1{font-size:154px}}
@media(max-width:1100px){.project-grid{gap:23px}.project-card h3{font-size:36px}.art-index,.art-caption{font-size:9px;left:16px}.art-index{top:15px}.art-caption{bottom:14px}.project-description{font-size:15px}.contact-main{align-items:flex-start;flex-direction:column;gap:30px}.product-hero{gap:5%}.art-large{min-height:420px}.product-lede{font-size:16px}}
@media(max-width:760px){:root{--gutter:24px}.masthead-inner{min-height:88px;gap:17px}.home-link{width:40px;min-height:56px}.studio-mark{width:42px;height:42px}.masthead nav{gap:18px}.masthead nav a{font-size:12px}.header-tools{gap:6px;padding-left:15px}.theme-toggle{width:32px;padding:5px}.hero{padding-top:56px;padding-bottom:44px}.hero h1{font-size:clamp(53px,10.1vw,78px);line-height:1.02;padding-top:25px}.hero-bottom{margin-top:25px;gap:22px}.hero-bottom p{font-size:18px;max-width:520px}.scroll-cue{width:32px;height:52px}.section-heading{margin-bottom:24px}.project-grid{grid-template-columns:1fr;gap:50px}.project-art{aspect-ratio:1.3}.project-art .app-icon{width:52%;max-width:310px}.art-index,.art-caption{font-size:10px;left:22px}.art-index{top:20px}.art-caption{bottom:19px}.project-card-heading{margin-top:20px}.project-card h3{font-size:42px}.project-description{font-size:16px;max-width:48ch;margin-top:15px}.project-card .text-link{margin-top:11px}.studio-section{margin-top:72px;padding-top:22px}.studio-intro{grid-template-columns:1fr;gap:30px;margin-top:29px}.studio-intro h2{font-size:55px}.studio-story{max-width:620px;padding-top:0}.studio-story>p:last-child{font-size:17px}.principles{gap:24px;grid-template-columns:1fr;margin-top:38px}.principle{display:grid;grid-template-columns:30px 1fr;gap:0 14px;padding-top:17px}.principle-number{grid-column:1;grid-row:1;padding-top:3px}.principle h3{margin:0;grid-column:2}.principle p{grid-column:2;max-width:56ch;font-size:15px}.contact-section{margin-top:64px;padding-bottom:45px}.contact-main{margin-top:25px;gap:26px}.contact-main h2{font-size:55px}.contact-main p{font-size:15px;margin-top:14px}.email-link{font-size:34px;gap:17px}.footer{flex-wrap:wrap;gap:6px 16px;padding-block:22px;min-height:100px;justify-content:space-between}.footer-brand{gap:12px}.footer-note{display:none}.footer>a:last-child{font-size:10px}.product-breadcrumb{padding-top:21px}.product-hero{grid-template-columns:1fr;gap:32px;padding-top:21px;padding-bottom:48px}.product-hero-copy{padding-top:0}.product-hero h1{font-size:62px;margin-top:22px}.product-tagline{font-size:44px;margin-top:19px}.product-lede{font-size:17px;margin-top:23px;max-width:100%}.product-facts{margin-top:24px;padding-top:18px;gap:35px}.art-large{min-height:0;aspect-ratio:1.12}.art-large .app-icon{width:59%;max-width:350px}.product-overview{grid-template-columns:1fr;gap:20px;padding-top:22px}.overview-text{font-size:32px;line-height:1.4}.product-details{padding-top:45px;grid-template-columns:1fr;gap:21px}.product-details>h2{max-width:none}.feature{grid-template-columns:27px 1fr;gap:10px;padding:21px 0 25px}.feature h3{font-size:29px}.feature p{font-size:16px}.development-note{grid-column:1;margin-top:0}.product-page .contact-section{margin-top:50px}.product-page .contact-main h2{font-size:47px}.next-project{margin-bottom:40px}.next-project>a{padding-top:24px}.next-name{font-size:51px}.next-art{gap:14px}.next-art .app-icon{width:74px;height:74px}.next-art>svg{width:25px;height:25px}:lang(ko) .hero h1{font-size:clamp(39px,8.7vw,65px);line-height:1.28}:lang(ko) .studio-intro h2{font-size:44px}:lang(ko) .contact-main h2{font-size:43px}:lang(ko) .product-tagline{font-size:37px}:lang(ko) .overview-text{font-size:27px}:lang(ko) .feature h3{font-size:25px}}
@media(max-width:390px){:root{--gutter:20px}.masthead-inner{gap:12px}.masthead nav{gap:13px}.masthead nav a{font-size:11px}.header-tools{padding-left:10px;gap:3px}.language-link{min-width:25px}.theme-toggle{width:29px}.hero h1{font-size:50px}.hero-bottom p{font-size:17px}.hero-bottom{gap:12px}.project-art{aspect-ratio:1.12}.project-art .app-icon{width:60%}.studio-intro h2,.contact-main h2{font-size:49px}.email-link{font-size:31px}:lang(ko) .hero h1{font-size:38px}:lang(ko) .studio-intro h2{font-size:39px}:lang(ko) .contact-main h2{font-size:38px}}
.status,.footer,.principle-number,.product-facts dt,.feature-number{font-size:12px}
.home-link,.language-link,.theme-toggle{min-width:44px}
.theme-toggle{width:44px}
.masthead nav a{display:inline-block;min-width:44px;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.loft-brand-filter{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.product-wordmark{display:block;flex:none;max-width:100%}
.wordmark-framewise{width:220px;height:60px;background:var(--ink);-webkit-mask:url('/assets/framewise-wordmark.webp') center/114% auto no-repeat;mask:url('/assets/framewise-wordmark.webp') center/114% auto no-repeat}
.wordmark-offscene{width:190px;height:60px;background:var(--ink);-webkit-mask:url('/assets/offscene-wordmark.svg') center/100% auto no-repeat;mask:url('/assets/offscene-wordmark.svg') center/100% auto no-repeat}
.wordmark-loft{width:105px;aspect-ratio:1.9;overflow:hidden;border-radius:20px}
.wordmark-loft img{display:block;width:100%;height:100%;object-fit:cover}
[data-theme=dark] .wordmark-loft{border-radius:0}
[data-theme=dark] .wordmark-loft img{filter:url(#loft-dark-wordmark)}
.project-card-heading h3{display:flex;align-items:center;flex:1;min-width:0;min-height:60px}
.product-hero h1{display:flex;align-items:center;min-height:98px}
.product-hero .wordmark-framewise{width:330px;height:78px}
.product-hero .wordmark-offscene{width:300px;height:80px}
.product-hero .wordmark-loft{width:156px}
@media(max-width:760px){.product-hero h1{min-height:86px}.product-hero .wordmark-framewise{width:290px;height:70px}.product-hero .wordmark-offscene{width:280px;height:72px}.product-hero .wordmark-loft{width:138px}}
@media(max-width:1100px){.art-large{min-height:0}.product-hero>*{min-width:0}}
@media(max-width:760px){.masthead-inner{gap:16px}.masthead nav{gap:13px}.header-tools{padding-left:12px;gap:4px}.footer>a:last-child{font-size:12px}}
@media(max-width:480px){.masthead-inner{display:grid;grid-template-columns:1fr auto;gap:0;min-height:120px;padding-top:8px;padding-bottom:8px}.home-link{margin-right:0;min-height:56px}.header-tools{border-left:0;padding-left:0;gap:8px}.masthead nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:16px}.masthead nav a{font-size:13px;min-width:64px}.language-link{font-size:12px}.footer-brand{gap:10px}.footer{gap:6px 10px}.next-project>a{gap:20px}.next-name{font-size:clamp(36px,9vw,43px)}.next-art{gap:12px}.next-art .app-icon{width:64px;height:64px}.next-art>svg{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.project-card-link:hover .app-icon,.project-art .app-icon{transform:none}}