:root{--paper:#f4f4f0;--bg:#fafaf7;--ink:#141414;--muted:#62625e;--line:#c8c8c3;--accent:#3568e8;--accent-ink:#2755c5;--accent-surface:#a9c5fa;--gutter:clamp(22px,4vw,76px);--font:'Manrope','Noto Sans KR',sans-serif;--mono:'IBM Plex Mono',monospace;--display:'Anton','Arial Narrow',sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent-ink);outline-offset:5px}p,h1,h2,h3,figure{margin:0}p,h1,h2,h3{word-break:keep-all;overflow-wrap:break-word}p{font-family:'DM Sans','Noto Sans KR',sans-serif;text-wrap:pretty}h1,h2,h3{text-wrap:balance}.heading-line{display:block}.accent{color:var(--accent-ink)}.skip{position:fixed;top:-100px;left:20px;z-index:100;padding:16px;background:white}.skip:focus{top:10px}.word-logo{font-size:44px;line-height:1;letter-spacing:-3px;font-weight:800}.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.2px;line-height:1.7}.small-link{font-size:14px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}.text-link{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;min-height:48px;padding:12px 0 8px;border-bottom:1px solid currentColor;font-size:14px;font-weight:600}.text-link:hover{color:var(--accent-ink)}
/* Editorial compositions also work in normal flow without JavaScript. */
.scroll-chapter{--progress:0;position:relative;min-height:100svh;padding:20px;background:var(--ink)}.chapter-pin{min-height:calc(100svh - 40px)}.opening-panel,.note-panel{position:relative;min-height:calc(100svh - 40px);overflow:hidden;background:#e4e4e1}.opening-panel{display:flex;flex-direction:column;justify-content:space-between;padding:28px 34px}.opening-top,.opening-bottom{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:24px}.opening-top p{font-size:12px;line-height:1.5;letter-spacing:1px;margin-right:auto;margin-left:12px}.opening-top .small-link{border-bottom:1px solid var(--ink)}.opening-bottom{font-size:11px;letter-spacing:.7px;line-height:1.5;margin-top:28px}.opening-bottom a{display:inline-flex;align-items:center;gap:20px;min-height:44px;font-size:12px;font-weight:600}.type-composition{position:absolute;inset:15% 5% 10%;pointer-events:none;display:flex;flex-direction:column;justify-content:center;font-family:var(--display);font-size:clamp(65px,10.8vw,186px);line-height:.88;letter-spacing:-.025em;user-select:none}.type-composition>span{display:block;will-change:transform}.type-one{align-self:center;transform:translateX(calc(var(--progress)*-90px))}.type-two{align-self:flex-end;padding-right:12%;transform:translateX(calc(var(--progress)*120px))}.type-three{padding-left:8%;transform:translateX(calc(var(--progress)*-160px))}.type-four{align-self:center;transform:translateX(calc(var(--progress)*80px))}.opening-card{z-index:3;position:relative;align-self:center;width:clamp(285px,26vw,380px);margin:clamp(110px,17vh,220px) 0;min-height:280px;padding:28px;background:var(--accent);display:flex;flex-direction:column;justify-content:space-between;gap:24px;transform:translate(calc(var(--progress)*60px),calc(var(--progress)*-36px)) rotate(calc(-3deg + var(--progress)*6deg));box-shadow:0 14px 42px #00000012}.card-label{font-size:11px;font-weight:800;letter-spacing:.6px}.opening-card h1{font-size:clamp(24px,2.1vw,31px);font-weight:700;line-height:1.5;letter-spacing:-.06em}.opening-card p{font-size:14px;line-height:1.8}.opening-card a{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;min-height:44px;border-top:1px solid #14141455;padding-top:14px}.opening-card a span{font-size:24px}
.note-panel{padding:28px 34px;display:flex;flex-direction:column;justify-content:space-between;background:#e9e9e6}.note-top{display:flex;justify-content:space-between;position:relative;z-index:2}.note-art{position:relative;height:clamp(240px,44vh,540px);margin:10px -34px 0;overflow:hidden}.note-word{position:absolute;left:0;bottom:-.11em;font-family:var(--display);font-size:clamp(270px,47vw,750px);line-height:.95;letter-spacing:-.02em;color:var(--accent);white-space:nowrap;transform:translateX(calc(-3% + var(--progress)*9%));user-select:none}.note-word>span{font-family:var(--font);font-size:.4em;vertical-align:top}.note-image{position:absolute;object-fit:cover;object-position:top;filter:grayscale(1);border:5px solid #e9e9e6;box-shadow:0 8px 24px #0001}.note-image-one{top:6%;left:9%;width:22%;aspect-ratio:16/9;transform:translateY(calc(var(--progress)*-25px)) rotate(-4deg)}.note-image-two{top:19%;right:15%;width:18%;aspect-ratio:4/3;transform:translateY(calc(var(--progress)*35px)) rotate(5deg)}.note-copy{position:relative;border-top:1px solid #14141477;display:grid;grid-template-columns:.6fr 1.3fr 1.1fr;gap:32px;padding-top:28px;padding-bottom:12px;margin-top:18px}.note-copy h2{font-size:clamp(24px,2.7vw,42px);letter-spacing:-.055em;line-height:1.45;font-weight:600}.note-copy p{font-size:16px;line-height:1.85}.note-copy p+p{margin-top:14px}.note-copy .text-link{margin-top:12px}

/* Main editorial landing. */
.landing{position:relative;background:var(--bg);z-index:5}.header{position:sticky;top:0;z-index:15;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:82px;padding:14px var(--gutter);background:#fafaf7f5;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}nav a{display:flex;align-items:center;min-height:44px}nav a:hover{color:var(--accent-ink)}.nav-contact{gap:24px;border-bottom:1px solid var(--ink)}.landing-opening{min-height:calc(100svh - 82px);padding:24px var(--gutter) 48px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.landing-kicker{display:flex;justify-content:space-between;gap:24px;font-size:11px;letter-spacing:.8px}.landing-billboard{position:relative;isolation:isolate;margin:36px calc(var(--gutter)*-1) 0;min-height:32vw;display:flex;align-items:flex-end}.landing-word{position:relative;z-index:2;font-family:var(--display);font-size:29.2vw;line-height:.9;letter-spacing:-.027em;color:var(--accent);white-space:nowrap;transform:translateX(calc(-2% + var(--landing-progress,0)*3%))}.landing-word>span{font-family:var(--font);font-size:.65em;vertical-align:top}.masthead-echo{position:absolute;z-index:0;left:3%;top:-10%;font-family:var(--display);font-size:30vw;line-height:1;color:var(--accent);opacity:.22;filter:blur(12px);white-space:nowrap;letter-spacing:-.02em;transform:translateY(calc(var(--landing-progress,0)*-45px))}.landing-image{position:absolute;z-index:3;right:14%;top:4%;width:19%;transform:rotate(-5deg)}.landing-image img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;filter:grayscale(1);border:6px solid var(--bg)}.landing-image figcaption{font-size:10px;letter-spacing:.8px;padding-top:8px;text-align:right}.landing-caption{display:grid;grid-template-columns:1.15fr 1fr 68px;gap:36px;align-items:end;position:relative;z-index:3;padding-top:34px;margin-top:30px;border-top:1px solid var(--line)}.landing-caption h2{font-size:clamp(28px,3vw,46px);line-height:1.4;letter-spacing:-.05em;font-weight:600}.landing-caption p{font-size:16px;line-height:1.9}.square-link{display:flex;align-items:center;justify-content:center;width:68px;height:68px;background:var(--accent);font-size:36px;transition:background .2s,transform .2s}.square-link:hover{background:var(--ink);color:var(--bg);transform:translateY(3px)}
.section{scroll-margin-top:82px;padding:104px var(--gutter);border-top:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:48px;margin-bottom:48px}.section-heading h2{font-size:clamp(32px,3.5vw,52px);line-height:1.4;letter-spacing:-.055em;font-weight:600;margin-top:20px}.section-heading h2.display-title{font-family:var(--display);font-size:clamp(76px,10vw,160px);font-weight:400;letter-spacing:-.035em;line-height:.94;margin-top:24px}.work-count{font-family:var(--font);font-size:18px;letter-spacing:-1px;display:inline-block;vertical-align:top;margin:8px 0 0 20px}.section-heading>p{font-size:16px;line-height:1.9;color:var(--muted)}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:66px 26px;align-items:stretch}.project-card{min-width:0;display:flex;flex-direction:column;position:relative}.project{display:flex;flex:1;flex-direction:column;align-items:stretch;min-width:0;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}.project-visual{position:relative;width:100%;aspect-ratio:16/11;display:flex;align-items:center;padding:6%;overflow:hidden;background:#e1e6e7}.project-screen{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;box-shadow:0 12px 30px #0002;transition:transform .6s var(--ease)}.project-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.project-visual.oddest{background:#1b1b1b}.project-visual.moapick{background:#e5e9ef}.project-visual.hangwang{background:#e0e4e5}.project-visual.duksoo{background:#e6e3de}.view-project{position:absolute;right:0;bottom:0;display:flex;align-items:center;min-height:48px;padding:14px 20px;background:var(--accent);font-size:14px;font-weight:600;transition:background .2s,color .2s}.project-caption{display:block;padding-top:22px}.project-caption strong{display:block;font-size:clamp(26px,2.5vw,38px);font-weight:700;letter-spacing:-.04em;line-height:1.4}.project-caption>span>span{display:block;margin-top:8px;color:var(--muted);font-size:16px;line-height:1.8;word-break:keep-all}.project-type{display:block;font-size:12px;letter-spacing:.7px;margin-top:16px;line-height:1.7}.project-visit{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:20px;padding:14px 0;border-top:1px solid var(--line);margin-top:22px;font-size:14px;font-weight:600}.project-visit span{font-size:22px;transition:transform .3s var(--ease)}.project-visit:hover span{transform:translate(3px,-3px)}
.about{background:#e9e9e5}.approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:32px}.approach-item{min-width:0;border-top:1px solid var(--ink)}.approach-item.is-animating{overflow:hidden}.approach-item summary{position:relative;display:block;list-style:none;padding:24px 44px 24px 0;cursor:pointer}.approach-item summary::-webkit-details-marker{display:none}.approach-item summary:focus-visible{outline-offset:-3px}.approach-number{display:block;font-family:var(--display);color:var(--accent-ink);font-size:28px;line-height:1;margin-bottom:30px}.approach-item h3{font-size:clamp(24px,2vw,30px);line-height:1.5;letter-spacing:-.05em;font-weight:600}.approach-toggle{position:absolute;right:0;top:22px;width:32px;height:32px;background:var(--accent)}.approach-toggle:before,.approach-toggle:after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}.approach-toggle:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .28s var(--ease)}.approach-item[open] .approach-toggle:after{transform:translate(-50%,-50%) rotate(0)}.approach-body{padding-bottom:24px}.approach-body p{font-size:16px;line-height:1.9;color:#53534f}.approach-note{display:block;margin-top:20px;font-size:14px;line-height:1.8;color:var(--muted);word-break:keep-all}
.contact{background:var(--accent);border-top:0;padding-top:36px;padding-bottom:64px;overflow:hidden}.contact-word{font-family:var(--display);font-size:clamp(90px,17.4vw,290px);line-height:1;letter-spacing:-.03em;white-space:nowrap;margin-bottom:48px}.contact-word>span{font-family:var(--font);font-size:.75em;display:inline-block;margin-left:.08em}.contact-top{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #14141480;padding-top:24px}.contact-top>span{font-size:12px;letter-spacing:.6px}.contact h2{font-size:clamp(34px,4.2vw,64px);line-height:1.4;font-weight:600;letter-spacing:-.05em;margin-top:48px}.contact-desc{font-size:16px;line-height:1.9;margin-top:24px;max-width:46em}.contact-steps{display:flex;flex-wrap:wrap;list-style:none;gap:18px 32px;padding:0;margin:28px 0 0;font-size:14px;line-height:1.8}.contact-steps li span{margin-right:10px;font-size:12px}.contact-links{margin-top:42px;border-top:1px solid #14141470}.contact-links>a,.contact-pending{display:grid;grid-template-columns:1fr 2fr 28px;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid #14141470;transition:padding .25s}.contact-links>a>span:first-child,.contact-pending>span:first-child{font-size:14px}.contact-links strong{font-size:clamp(20px,2.5vw,36px);font-weight:500;line-height:1.6;overflow-wrap:anywhere}.contact-links>a>span:last-child{font-size:28px}.contact-links>a:hover{padding-left:12px;padding-right:12px}.contact-pending strong{font-size:16px;font-weight:400}.contact-pending{color:#38302e}footer{overflow:hidden;background:var(--ink);color:var(--paper);padding:42px var(--gutter) 24px}.footer-brand{font-family:var(--display);display:block;font-size:17vw;line-height:1.1;letter-spacing:-.025em;white-space:nowrap}.footer-brand span{color:var(--accent)}.footer-bottom{border-top:1px solid #ffffff50;padding-top:24px;margin-top:24px;display:flex;justify-content:space-between;gap:24px;font-size:12px;letter-spacing:.7px;line-height:1.8}.footer-bottom a{min-height:44px}
/* Existing project detail flow. */
dialog{border:0;padding:0;width:calc(100% - 64px);max-width:1100px;max-height:90dvh;background:var(--bg);color:var(--ink);overscroll-behavior:contain}dialog::backdrop{background:#141414bb;backdrop-filter:blur(8px)}.dialog-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;background:var(--bg);border-bottom:1px solid var(--line);font-size:12px;letter-spacing:1px}.dialog-toolbar button{min-height:44px;border:0;background:var(--ink);color:white;padding:10px 16px;cursor:pointer;font-size:14px}.dialog-toolbar button span{margin-left:16px}.detail-intro{padding:48px}.detail-intro h2{font-size:44px;letter-spacing:-.04em;line-height:1.4;margin:18px 0}.detail-intro p{max-width:42em;font-size:16px;line-height:1.95;color:var(--muted)}.detail-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.detail-tags span{border:1px solid var(--line);padding:8px 14px;font-size:14px}.detail-flow{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}.detail-flow h3{font-size:14px;margin-bottom:12px}.detail-flow ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 22px}.detail-flow li{font-size:14px;line-height:1.8}.detail-flow li span{font-size:12px;color:var(--muted);margin-right:8px}.detail-intro .text-link{margin-top:24px}.detail-image{display:block;width:100%}.detail-bottom{padding:30px 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:14px;line-height:1.8}
@media(hover:hover) and (pointer:fine){.project:hover .project-screen{transform:translateY(-5px) scale(1.025)}.project:hover .view-project{background:var(--ink);color:var(--paper)}}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.reveal-enter{animation:enter .7s var(--ease) both}dialog[open]{animation:dialog-in .25s var(--ease)}}
@media(min-width:1800px){:root{--gutter:max(76px,calc((100vw - 1680px)/2))}}
@media(max-width:1000px){.opening-bottom>span:last-child{display:none}.note-copy{grid-template-columns:.35fr 1fr 1fr;gap:24px}.note-copy h2{font-size:28px}.note-copy p{font-size:15px}.landing-caption{grid-template-columns:1fr 1fr 56px;gap:24px}.square-link{width:56px;height:56px}.section{padding-top:76px;padding-bottom:76px}.approach-grid{gap:24px}.approach-item h3{font-size:24px}.contact-word{margin-bottom:36px}}
@media(max-width:800px){.opening-top{gap:14px}.opening-top p{display:none}.opening-panel,.note-panel{padding:24px}.opening-card{width:300px;min-height:300px}.type-composition{font-size:15vw;inset:17% 0 14%}.type-two{padding-right:1%}.type-three{padding-left:1%}.note-art{margin-left:-24px;margin-right:-24px;height:38vh}.note-word{font-size:56vw}.note-copy{grid-template-columns:1fr 1fr;gap:24px}.note-copy>.word-logo{display:none}.note-copy h2{font-size:28px}.note-copy p{font-size:16px}.header{min-height:76px}.word-logo{font-size:38px}nav{gap:24px}.landing-opening{min-height:75svh}.landing-billboard{margin-top:54px}.landing-image{width:23%;right:12%}.landing-caption{grid-template-columns:1fr 56px}.landing-caption h2{font-size:34px}.landing-caption p{grid-row:2;grid-column:1}.landing-caption .square-link{grid-column:2;grid-row:1 / 3}.section-heading{grid-template-columns:1fr;gap:24px}.section-heading h2.display-title{font-size:100px}.approach-grid{grid-template-columns:1fr;gap:18px}.approach-item summary{display:grid;grid-template-columns:40px 1fr 32px;gap:24px;padding:24px 0;align-items:start}.approach-number{margin:3px 0 0}.approach-toggle{position:relative;top:0}.approach-body{padding-left:64px;max-width:44em}.contact-links>a,.contact-pending{grid-template-columns:100px 1fr 24px}.footer-bottom>span:nth-child(2){display:none}}
@media(max-width:600px){html{scroll-padding-top:0}.scroll-chapter{padding:10px}.chapter-pin{min-height:calc(100svh - 20px)}.opening-panel,.note-panel{min-height:calc(100svh - 20px);padding:20px}.opening-top .small-link{font-size:12px}.opening-top .word-logo{font-size:36px}.type-composition{font-size:19vw;line-height:1.03;inset:19% -4% 17%;justify-content:space-between}.type-one{align-self:flex-start;margin-left:12%}.type-two{align-self:flex-end}.type-three{align-self:flex-start}.type-four{align-self:flex-end;font-size:.88em}.opening-card{width:260px;min-height:280px;padding:22px;gap:18px;margin:150px 0;transform:translate(calc(var(--progress)*12px),calc(var(--progress)*-18px)) rotate(calc(-3deg + var(--progress)*5deg))}.opening-card h1{font-size:24px;letter-spacing:-.065em}.opening-card p{font-size:14px}.card-label{font-size:10px}.opening-bottom>span{max-width:115px;font-size:10px}.opening-bottom a{font-size:10px;gap:10px}.opening-bottom{gap:16px}.note-top .eyebrow{font-size:10px;letter-spacing:.6px}.note-art{height:30vh;min-height:200px;margin:22px -20px 0}.note-word{font-size:65vw;left:-2%;bottom:-.08em}.note-image-one{width:31%;left:8%;top:8%;border-width:3px}.note-image-two{width:27%;right:8%;top:16%;border-width:3px}.note-copy{grid-template-columns:1fr;gap:18px;padding-top:22px;margin-top:0;padding-bottom:0}.note-copy h2{font-size:28px;line-height:1.4}.note-copy h2 br:nth-of-type(2){display:none}.note-copy p{font-size:16px;line-height:1.85}.note-copy p+p{margin-top:10px}.note-copy .text-link{margin-top:6px}.note-copy .text-link{font-size:14px}.header{padding:12px var(--gutter);gap:16px;min-height:74px}.header .word-logo{font-size:34px}nav{gap:16px;font-size:13px}.nav-contact{gap:8px}.landing-opening{padding-top:20px;padding-bottom:38px;min-height:70svh}.landing-kicker{font-size:10px;line-height:1.6;gap:16px}.landing-kicker>span{max-width:48%}.landing-kicker>span:last-child{text-align:right}.landing-billboard{min-height:40vw;margin-top:80px}.landing-image{width:30%;top:-24%;right:10%;transform:rotate(-5deg)}.landing-image img{border-width:3px}.landing-image figcaption{font-size:8px;padding-top:5px}.masthead-echo{filter:blur(7px);opacity:.23}.landing-word{font-size:30vw}.landing-caption{margin-top:28px;padding-top:24px;gap:20px;grid-template-columns:1fr 48px}.landing-caption h2{font-size:28px}.landing-caption p{font-size:15px;line-height:1.9}.square-link{width:48px;height:48px;font-size:28px}.section{scroll-margin-top:74px;padding-top:58px;padding-bottom:58px}.section-heading{margin-bottom:32px;gap:20px}.section-heading h2{font-size:30px}.section-heading h2.display-title{font-size:84px;letter-spacing:-.025em}.section-heading>p{font-size:16px}.section-heading>p br{display:none}.work-count{font-size:16px;margin-left:16px}.work-grid{grid-template-columns:1fr;gap:40px}.project-caption{padding-top:18px}.project-caption strong{font-size:28px}.view-project{font-size:13px;min-height:44px;padding:11px 16px}.project-type{font-size:11px}.project-visit{margin-top:18px}.approach-item summary{grid-template-columns:28px 1fr 30px;gap:14px;padding:22px 0}.approach-number{font-size:24px}.approach-item h3{font-size:24px}.approach-toggle{width:30px;height:30px}.approach-body{padding-left:42px}.contact-word{font-size:18vw;margin-bottom:28px}.contact-top>span{display:none}.contact h2{font-size:34px;margin-top:32px}.contact-desc br{display:none}.contact-steps{display:grid;gap:10px}.contact-links>a,.contact-pending{grid-template-columns:70px minmax(0,1fr) 20px;gap:10px;padding:22px 0}.contact-links strong{font-size:clamp(14px,4.1vw,19px);letter-spacing:-.025em}.contact-links>a>span:last-child{font-size:24px}.contact-pending strong{font-size:14px}.contact-links>a:hover{padding-left:0;padding-right:0}footer{padding-top:30px}.footer-brand{font-size:16.5vw}.footer-bottom{font-size:10px;gap:16px;margin-top:20px;padding-top:20px}dialog{width:calc(100% - 24px);max-height:94dvh}.dialog-toolbar{padding:12px 16px;letter-spacing:.4px}.detail-intro{padding:28px 24px}.detail-intro h2{font-size:32px}.detail-flow ol{display:grid;gap:10px}.detail-bottom{padding:24px}}
@media(max-width:360px){:root{--gutter:18px}.opening-panel,.note-panel{padding:16px}.opening-card{width:240px;padding:20px}.opening-card h1{font-size:23px}.opening-top .small-link{font-size:11px}.opening-bottom{gap:10px}.opening-bottom>span{max-width:95px}.note-copy h2{font-size:25px}.note-copy p{font-size:16px}.note-art{min-height:170px}.header{gap:12px}nav{gap:12px;font-size:12px}.nav-contact span{display:none}.landing-caption h2{font-size:25px}.landing-caption{gap:14px}.approach-item summary{gap:12px;grid-template-columns:24px 1fr 28px}.approach-item h3{font-size:22px}.approach-body{padding-left:36px}.contact-links>a,.contact-pending{grid-template-columns:1fr 22px;gap:6px 12px}.contact-links>a>span:first-child,.contact-pending>span:first-child{grid-column:1}.contact-links strong{grid-column:1;font-size:18px}.contact-links>a>span:last-child,.contact-pending>span:last-child{grid-column:2;grid-row:1 / 3}.contact-pending strong{font-size:14px}}
@media(max-height:650px) and (min-width:601px){.opening-card{min-height:230px;padding:20px;gap:12px}.opening-card h1{font-size:25px}.opening-card p{font-size:13px}.opening-panel,.note-panel{padding-top:18px;padding-bottom:18px}.note-art{height:35vh;min-height:180px}.note-copy{padding-top:18px}.note-copy h2{font-size:25px}.note-copy p{font-size:16px}.note-copy p+p{margin-top:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.type-composition>span,.opening-card,.note-word,.note-image,.landing-word,.masthead-echo{transform:none!important}}

/* One pinned viewport, three distinct typographic scenes. */
.scroll-story{position:relative;background:var(--bg)}
.story-pin{padding:20px}
.story-stage{position:relative;background:#e4e4e1}
.story-scene{position:relative;min-height:calc(100svh - 40px);background:#e4e4e1}
.story-scene.landing-opening{background:var(--bg)}
.scene-three-top{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:4}
.scene-three-top .small-link{border-bottom:1px solid var(--ink)}
.landing-kicker{margin-top:24px}
html.story-motion .scroll-story{height:420svh}
html.story-motion .story-pin{position:sticky;top:0;height:100svh}
html.story-motion .story-stage{height:100%;overflow:hidden;isolation:isolate}
html.story-motion .story-scene{position:absolute;inset:0;min-height:0;height:100%;pointer-events:none;will-change:clip-path,transform}
html.story-motion .story-scene.is-current{pointer-events:auto}
html.story-motion .opening{z-index:1}
html.story-motion .studio-note{z-index:2}
html.story-motion .landing-opening{z-index:3}
html.story-motion .opening-panel,html.story-motion .note-panel{height:100%;min-height:0}
html.story-motion .opening-card{margin:0}
html.story-motion .landing-opening{padding:26px 34px 32px}
html.story-motion .landing-billboard{min-height:0;flex:1;margin-top:18px;align-items:center}
html.story-motion .landing-caption{padding-top:24px;margin-top:12px}
html.story-motion .landing-image{top:9%;width:19%;right:14%}
/* Broad, varied sentence-case type echoes the first reference. */
.type-composition{font-family:var(--font);font-size:clamp(64px,9.6vw,160px);line-height:.99;letter-spacing:-.075em;inset:16% 7% 12%}
.type-one{font-weight:600;align-self:center;margin-right:20%}
.type-two{font-weight:800;align-self:flex-end;padding-right:10%;letter-spacing:-.08em}
.type-three{font-family:'DM Sans',sans-serif;font-style:italic;font-weight:400;color:#555550;padding-left:7%}
.type-four{font-weight:500;align-self:flex-end;letter-spacing:-.075em;font-size:.9em}
.opening-card{box-shadow:none;transform:translate(calc(var(--progress,0)*24px),calc(var(--progress,0)*-24px)) rotate(calc(-2deg + var(--progress,0)*4deg))}
.opening-card h1{font-weight:600;letter-spacing:-.055em}
.opening-card p{font-weight:400}
/* The introduction is heavy and wide; the landing is large and light. */
.note-word{font-family:var(--font);font-weight:800;font-size:clamp(260px,45vw,740px);letter-spacing:-.09em;line-height:.86}
.note-copy h2{font-weight:500;letter-spacing:-.045em}
.landing-word{font-family:var(--font);font-weight:400;font-size:27vw;line-height:.96;letter-spacing:-.075em}
.landing-word>span{font-weight:300;font-size:.75em}
.landing-caption h2{font-weight:500;letter-spacing:-.045em}
.masthead-echo{font-family:var(--display);opacity:.17;filter:blur(14px)}
.section-heading h2.display-title,.contact-word{font-family:var(--display);font-weight:400;letter-spacing:-.03em}
.project-caption strong{font-weight:600;letter-spacing:-.035em}
.eyebrow,.card-label,.opening-top p,.opening-bottom,.landing-kicker,.landing-image figcaption,.project-type,.work-count,.footer-bottom{font-family:var(--mono);font-weight:400}
.card-label{font-size:12px;letter-spacing:-.4px;line-height:1.6}
.eyebrow{font-size:12px;letter-spacing:.8px}
.landing-kicker,.opening-bottom{font-size:12px;letter-spacing:0}
.opening-top p{font-size:12px;letter-spacing:0}
.landing-image figcaption{font-size:12px;letter-spacing:-.3px}
.project-type{font-size:12px;color:var(--muted)}
.project-screen img{filter:none}
@media(max-width:1000px){
  .type-composition{font-size:12vw;inset:19% 5% 13%}
  .note-word{font-size:49vw}
  html.story-motion .landing-caption h2{font-size:30px}
}
@media(max-width:800px){
  .type-composition{font-size:14vw;line-height:1.08}
  .note-word{font-size:54vw}
  html.story-motion .landing-image{width:24%;top:16%}
  html.story-motion .landing-opening{padding:24px}
  .landing-word{font-size:28vw}
}
@media(max-width:600px){
  .story-pin{padding:10px}
  .story-scene{min-height:calc(100svh - 20px)}
  html.story-motion .scroll-story{height:390svh}
  html.story-motion .landing-opening{padding:20px}
  .type-composition{font-size:20vw;inset:20% -1% 16%;line-height:1.1;justify-content:space-between}
  .type-one{align-self:flex-start;margin:0 0 0 5%;font-weight:600}
  .type-two{padding-right:0;font-weight:800}
  .type-three{padding-left:0;font-weight:400}
  .type-four{font-size:.82em;align-self:flex-end}
  .opening-card{width:260px;min-height:280px}
  .card-label{font-size:12px;letter-spacing:-.55px}
  .opening-bottom>span{font-size:12px;max-width:125px}
  .opening-bottom a{font-size:12px;max-width:134px;line-height:1.5}
  .note-word{font-size:62vw}
  .note-top .eyebrow{font-size:12px;letter-spacing:-.4px}
  .landing-kicker{font-size:12px;line-height:1.6;gap:12px;margin-top:20px}
  .landing-kicker>span{max-width:47%}
  .landing-word{font-size:29vw}
  html.story-motion .landing-image{top:16%;right:9%;width:30%}
  html.story-motion .landing-caption{margin-top:12px;padding-top:20px}
  html.story-motion .landing-caption h2{font-size:26px}
  html.story-motion .landing-caption p{font-size:15px;line-height:1.8}
  .landing-image figcaption{font-size:10px;line-height:1.4}
  .scene-three-top .small-link{font-size:13px}
  .footer-bottom{font-size:12px}
}
@media(max-width:360px){
  .opening-card{width:238px}
  .card-label{font-size:11px}
  .note-top{gap:16px}
  .note-top .eyebrow{font-size:11px}
  .opening-bottom>span{max-width:110px;font-size:11px}
  .opening-bottom a{font-size:11px;max-width:116px}
  .landing-kicker{font-size:10px}
  html.story-motion .landing-caption h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.project-screen img{transition:none}}

/* One continuous set: the red card grows into the studio, then a paper sheet
   travels across it. All three scenes stay opaque; geometry makes the cuts. */
.story-ink{display:none}
html.story-motion .story-stage{--unfurl:0;--arrive:0;--depart:0;--paper:0;--settle:0;--card-away:0}
html.story-motion .story-ink{display:block;position:absolute;inset:0;z-index:2;background:var(--accent);clip-path:inset(var(--ink-top,50%) var(--ink-right,50%) var(--ink-bottom,50%) var(--ink-left,50%));will-change:clip-path;pointer-events:none}
html.story-motion .opening-card{transform:none;clip-path:inset(0);background:var(--accent)}
html.story-motion .opening-card>*{transform:translateY(calc(var(--card-away)*-420px));will-change:transform}
html.story-motion .opening-top{transform:translateY(calc(var(--unfurl)*-150px))}
html.story-motion .opening-bottom{transform:translateY(calc(var(--unfurl)*150px))}
html.story-motion .type-composition{transform:scale(calc(1 + var(--unfurl)*.28));transform-origin:center}
html.story-motion .type-one{transform:translateX(calc(var(--unfurl)*-38vw))}
html.story-motion .type-two{transform:translateX(calc(var(--unfurl)*44vw))}
html.story-motion .type-three{transform:translateX(calc(var(--unfurl)*-52vw))}
html.story-motion .type-four{transform:translateX(calc(var(--unfurl)*34vw))}
html.story-motion .studio-note{background:transparent;clip-path:inset(var(--ink-top,50%) var(--ink-right,50%) var(--ink-bottom,50%) var(--ink-left,50%));visibility:var(--note-visible,hidden)}
html.story-motion .note-panel{background:transparent;transform:translateY(calc(var(--depart)*-32%))}
html.story-motion .note-top{transform:translateY(calc((1 - var(--arrive))*140px))}
html.story-motion .note-art{flex:1;min-height:0;height:auto;overflow:visible}
html.story-motion .note-word{color:var(--ink);left:-2%;bottom:0;font-size:clamp(240px,44vw,780px);transform:translate(calc((1 - var(--arrive))*28% - var(--depart)*20%),calc((1 - var(--arrive))*100%)) scale(calc(1 + var(--depart)*.4));transform-origin:0 100%;will-change:transform}
html.story-motion .note-image{border-color:var(--accent);box-shadow:none}
html.story-motion .note-image-one{top:13%;transform:translate(calc((1 - var(--arrive))*-240px),calc((1 - var(--arrive))*180px - var(--depart)*100px)) rotate(calc(-8deg + var(--arrive)*4deg - var(--depart)*12deg))}
html.story-motion .note-image-two{top:8%;transform:translate(calc((1 - var(--arrive))*160px),calc((1 - var(--arrive))*300px - var(--depart)*180px)) rotate(calc(14deg - var(--arrive)*9deg + var(--depart)*10deg))}
html.story-motion .note-copy{transform:translateY(calc((1 - var(--arrive))*560px));will-change:transform}
html.story-motion .note-copy .text-link:hover{color:var(--ink)}
html.story-motion .landing-opening{clip-path:polygon(0 var(--paper-left,100%),100% var(--paper-right,100%),100% 100%,0 100%)}
html.story-motion .scene-three-top,html.story-motion .landing-kicker{transform:translateY(calc((1 - var(--settle))*90px))}
html.story-motion .landing-word{transform:translateX(calc(-2% + (1 - var(--settle))*48%));will-change:transform}
html.story-motion .masthead-echo{transform:translateX(calc((1 - var(--settle))*-30%));filter:blur(calc(6px + (1 - var(--settle))*18px))}
html.story-motion .landing-image{transform:translate(calc((1 - var(--settle))*-16vw),calc((1 - var(--settle))*32vh)) rotate(calc(-5deg - (1 - var(--settle))*20deg)) scale(calc(1.0 + (1 - var(--settle))*.65));will-change:transform}
html.story-motion .landing-caption{transform:translateY(calc((1 - var(--settle))*210px));will-change:transform}
@media(max-width:800px){html.story-motion .note-word{font-size:55vw}}
@media(max-width:600px){
  html.story-motion .note-word{font-size:63vw;bottom:8%}
  html.story-motion .note-art{margin-top:22px;min-height:150px}
  html.story-motion .note-copy{gap:16px;padding-top:20px}
  html.story-motion .note-image-one{top:6%}
  html.story-motion .note-image-two{top:0}
}
@media(max-width:360px){
  html.story-motion .note-copy h2{font-size:24px}
  html.story-motion .note-copy p{font-size:14px;line-height:1.75}
  html.story-motion .note-art{min-height:130px;margin-top:12px}
}

/* Short reading blocks keep the supporting copy distinct from display type. */
.note-copy{grid-template-columns:1.12fr 1fr;gap:clamp(32px,5vw,80px);align-items:start;padding-top:30px;padding-bottom:16px}
.note-copy h2{font-size:clamp(26px,2.55vw,38px);font-weight:500;line-height:1.48;letter-spacing:-.045em;text-wrap:initial}
.note-description{max-width:34ch;justify-self:start}
.note-copy p,.landing-caption .landing-description{font-family:'Noto Sans KR',sans-serif;font-size:16px;line-height:1.8;letter-spacing:-.025em;font-weight:400;text-wrap:initial}
.note-copy p.story-lead{font-weight:600;line-height:1.6;letter-spacing:-.035em}
.note-copy p+p{margin-top:10px}
.note-copy .text-link{margin-top:22px;font-size:14px;font-weight:500;gap:32px;min-height:44px;padding-top:4px;padding-bottom:9px}
.landing-caption{align-items:center;grid-template-columns:1.12fr 1fr 68px;gap:clamp(28px,4vw,64px)}
.landing-caption h2{font-size:clamp(28px,2.8vw,42px)}
.landing-description strong{display:block;font-size:17px;font-weight:600;line-height:1.6;letter-spacing:-.035em;margin-bottom:10px}
.landing-description>span{display:block;color:#484844}
@media(min-width:1001px){.note-description{padding-top:6px}}
@media(max-width:1000px) and (min-width:801px){.note-copy{gap:32px}.note-copy h2{font-size:29px}.landing-caption{gap:24px;grid-template-columns:1fr 1fr 56px}}
@media(max-width:800px){
  .note-copy{gap:28px;grid-template-columns:1fr 1fr}
  .note-copy h2{font-size:27px}
  .landing-caption{grid-template-columns:1fr 56px;gap:24px}
  .landing-caption .landing-description{grid-column:1;grid-row:2}
}
@media(max-width:600px){
  .note-copy,html.story-motion .note-copy{grid-template-columns:1fr;gap:22px;padding-top:24px;padding-bottom:4px}
  .note-copy h2{font-size:27px;line-height:1.45}
  .note-copy p,html.story-motion .note-copy p{font-size:15px;line-height:1.8}
  .note-copy p.story-lead{font-weight:600;line-height:1.6}
  .note-copy .text-link{margin-top:16px}
  .landing-caption{gap:20px 14px}
  .landing-caption h2{grid-column:1 / -1}
  .landing-caption .landing-description,html.story-motion .landing-caption .landing-description{font-size:15px;line-height:1.8;grid-column:1;grid-row:2}
  .landing-description strong{font-size:16px;margin-bottom:8px}
  .landing-caption .square-link{grid-row:2;grid-column:2;align-self:end}
}
@media(max-width:360px){
  .note-copy h2,html.story-motion .note-copy h2{font-size:24px}
  .note-copy,html.story-motion .note-copy{gap:18px;padding-top:20px}
  .note-copy p,html.story-motion .note-copy p{font-size:14px;line-height:1.8}
  .note-copy .text-link{font-size:13px;margin-top:12px}
  .landing-caption .landing-description,html.story-motion .landing-caption .landing-description{font-size:14px}
  .landing-description strong{font-size:15px}
  .landing-caption{grid-template-columns:1fr 44px}
  .landing-caption .square-link{width:44px;height:44px;font-size:28px}
}

/* A quiet studio note: the message owns the page, the signature stays small. */
.studio-note .note-panel{background:#f2f1ed;padding:30px clamp(26px,4vw,64px);gap:28px}
.studio-note .note-top{align-items:center;flex-shrink:0;color:#5d5d58}
.studio-note .note-top .eyebrow:first-child::before{content:"";display:inline-block;width:24px;height:4px;background:var(--accent);vertical-align:middle;margin-right:14px}
.studio-note .note-copy,html.story-motion .studio-note .note-copy{display:grid;grid-template-columns:1.1fr 1fr;align-content:center;align-items:start;gap:34px 40px;flex:1;width:100%;max-width:1100px;align-self:center;border:0;margin:0;padding:24px 0}
.studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{grid-column:1 / -1;font-size:clamp(40px,4.9vw,74px);font-weight:500;line-height:1.3;letter-spacing:-.055em}
.note-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.note-line>span{display:block}
.note-line-soft{color:#73736d;font-weight:400}
.note-line-last{font-weight:650}
.note-dot{color:var(--accent)}
.studio-note .note-description{grid-column:2;max-width:38ch;padding:0;justify-self:start}
.studio-note .note-copy p{color:#50504b}
.studio-note .note-copy .story-lead{color:var(--ink)}
.note-footer{display:flex;align-items:end;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:11px;color:#73736d;flex-shrink:0}
.note-signature{font-family:var(--font);font-size:36px;font-weight:700;letter-spacing:-2.5px;line-height:1;color:var(--ink)}
html.story-motion .story-ink,html.story-motion .opening-card{background:var(--surface-color,var(--accent-surface))}
html.story-motion .studio-note .note-panel{background:transparent}
html.story-motion .studio-note .note-copy{transform:translateY(calc((1 - var(--arrive))*150px));will-change:transform}
html.story-motion .note-line>span{transform:translateY(calc((1 - var(--arrive))*110%));will-change:transform}
html.story-motion .note-line:nth-child(2)>span{transform:translateY(calc((1 - var(--arrive))*150%))}
html.story-motion .note-line:nth-child(3)>span{transform:translateY(calc((1 - var(--arrive))*190%))}
html.story-motion .studio-note .note-description{transform:translateY(calc((1 - var(--arrive))*360px));will-change:transform}
html.story-motion .note-footer{transform:translateY(calc((1 - var(--arrive))*120px))}
@media(max-width:800px){
  .studio-note .note-panel{padding:24px;gap:24px}
  .studio-note .note-copy,html.story-motion .studio-note .note-copy{grid-template-columns:1fr;gap:30px;padding:30px 0;max-width:640px}
  .studio-note .note-description{grid-column:1;justify-self:start}
  .studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{font-size:clamp(32px,5.5vw,44px)}
}
@media(max-width:600px){
  .studio-note .note-panel{padding:24px 20px;gap:20px}
  .studio-note .note-top .eyebrow{font-size:10px;letter-spacing:0}
  .studio-note .note-top .eyebrow:first-child::before{width:16px;margin-right:9px;height:3px}
  .studio-note .note-copy,html.story-motion .studio-note .note-copy{gap:32px;padding:24px 0}
  .studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{font-size:clamp(28px,7.7vw,43px);line-height:1.45;letter-spacing:-.055em}
  .note-footer{font-size:9px;gap:16px}
  .note-signature{font-size:30px}
}
@media(max-height:700px) and (min-width:801px){
  .studio-note .note-copy,html.story-motion .studio-note .note-copy{gap:20px 40px;padding:10px 0;grid-template-columns:1.3fr 1fr;align-items:end}
  .studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{grid-column:1;font-size:clamp(34px,4vw,56px)}
  .studio-note .note-description{grid-column:2}
}
@media(prefers-reduced-motion:reduce){.note-line>span{transform:none!important}}

/* A single continuous canvas from the pinned opening to the final contact. */
:root{--frame:0px;--bg:#f2f1ed;--paper:#f2f1ed;--line:#d4d3cd;--gutter:clamp(24px,4vw,64px)}
.story-pin{padding:var(--frame) var(--frame) 0}
.story-scene{min-height:calc(100svh - var(--frame))}
.landing,body>footer{margin-inline:var(--frame)}
.opening-panel,.studio-note .note-panel{padding-left:var(--gutter);padding-right:var(--gutter)}
.landing-opening,html.story-motion .landing-opening{padding-left:var(--gutter);padding-right:var(--gutter)}
.header{padding:18px var(--gutter);min-height:84px;background:#f2f1edf5;border-bottom:1px solid var(--line)}
.header .word-logo{font-size:38px}
.header nav{font-weight:500}
.landing .section{background:var(--bg);padding:112px var(--gutter);border-color:var(--line)}
.landing .work{border-top:0;padding-top:80px}
.section-heading{grid-template-columns:1.12fr 1fr;gap:48px;margin-bottom:56px}
.section-heading .eyebrow,.contact-top .eyebrow{color:#65655f}
.section-heading .eyebrow::before,.contact-top .eyebrow::before{content:"";display:inline-block;width:20px;height:3px;background:var(--accent);vertical-align:middle;margin-right:12px}
.section-heading h2{font-weight:500;font-size:clamp(32px,3.6vw,54px);line-height:1.4;letter-spacing:-.05em}
.section-heading h2.display-title{font-family:var(--font);font-size:clamp(60px,7vw,104px);font-weight:400;line-height:1.05;letter-spacing:-.065em;margin-top:32px;text-wrap:initial}
.work-title-soft,.work-title-main{display:block}
.work-title-soft,.tone-soft{color:#73736d;font-weight:400}
.work-title-main{font-weight:500}
.work-count{font-family:var(--mono);font-size:13px;letter-spacing:0;color:#73736d;margin:14px 0 0 20px}
.section-heading>p{font-size:16px;line-height:1.85;max-width:34em;margin-bottom:6px}
.work-grid{gap:68px 36px}
.project-visual,.project-visual.oddest,.project-visual.moapick,.project-visual.hangwang,.project-visual.duksoo{background:#e8e7e2;aspect-ratio:16/10;padding:5.5%;border:1px solid #ddddd5}
.project-screen{box-shadow:0 5px 18px #1414140b}
.view-project{min-height:40px;background:var(--bg);font-size:12px;font-weight:500;padding:10px 16px;border-top:1px solid #ddddd5;border-left:1px solid #ddddd5}
.project-caption{padding-top:24px}
.project-caption strong{font-size:clamp(25px,2.15vw,32px);font-weight:500;letter-spacing:-.04em}
.project-caption>span>span{font-size:15px;margin-top:7px;line-height:1.75}
.project-type{font-size:11px;margin-top:14px;letter-spacing:.3px}
.project-visit{font-size:13px;font-weight:500;margin-top:20px;padding:12px 0;min-height:46px}
.project-visit span{color:var(--accent-ink)}
.approach-grid{grid-template-columns:1fr;gap:0}
.approach-item{border-color:var(--line)}
.approach-item:last-child{border-bottom:1px solid var(--line)}
.approach-item summary{display:grid;grid-template-columns:56px 1fr 36px;align-items:center;gap:32px;padding:30px 0}
.approach-number{font-family:var(--mono);font-size:13px;font-weight:400;margin:0;color:var(--accent-ink)}
.approach-item h3{font-size:clamp(24px,2.1vw,32px);font-weight:500;line-height:1.5;letter-spacing:-.04em}
.approach-item .heading-line{display:inline}
.approach-toggle{position:relative;inset:auto;width:36px;height:36px;background:transparent;border:1px solid #bebeb6;border-radius:50%}
.approach-toggle:before,.approach-toggle:after{background:var(--accent-ink)}
.approach-body{padding:0 68px 32px 88px;max-width:800px}
.approach-body p{font-size:16px;line-height:1.9}
.approach-note{font-size:13px;margin-top:18px}
.contact-top{border:0;padding:0;align-items:center}
.contact-top>span{font-family:var(--mono);font-size:10px;letter-spacing:.2px;color:#73736d}
.contact h2{font-weight:500;font-size:clamp(38px,4.6vw,68px);line-height:1.4;letter-spacing:-.05em;margin-top:48px}
.contact-desc{color:#50504b;font-size:16px;line-height:1.85;max-width:40em;margin-top:28px}
.contact-steps{gap:14px 32px;margin-top:30px;color:#62625b;font-size:13px}
.contact-steps li span{font-family:var(--mono);font-size:11px;color:var(--accent-ink)}
.contact-links{margin-top:58px;border-color:var(--line)}
.contact-links>a,.contact-pending{border-color:var(--line);padding:26px 0;grid-template-columns:1fr 2fr 32px}
.contact-links>a>span:first-child,.contact-pending>span:first-child{font-family:var(--mono);font-size:12px;color:#62625b}
.contact-links strong{font-family:var(--font);font-size:clamp(22px,2.6vw,38px);font-weight:400;letter-spacing:-.04em}
.contact-links>a>span:last-child{color:var(--accent-ink)}
.contact-pending{color:#73736d}.contact-pending strong{font-size:16px;font-family:'Noto Sans KR',sans-serif;letter-spacing:0}
body>footer{background:var(--bg);color:var(--ink);border-top:1px solid var(--line);padding:52px var(--gutter) 28px}
.footer-brand{font-family:var(--font);font-size:clamp(50px,9vw,136px);font-weight:400;letter-spacing:-.07em;line-height:1.2}
.footer-brand span{font-weight:300}
.footer-bottom{border-color:var(--line);font-size:11px;letter-spacing:0;margin-top:44px;padding-top:22px;color:#62625b;align-items:center}
.footer-bottom a{display:flex;align-items:center;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.project:hover .view-project{background:var(--ink);color:var(--bg)}.contact-links>a:hover{padding-left:6px;padding-right:6px}}
@media(max-width:800px){
  .section-heading{grid-template-columns:1fr;gap:24px}
  .work-grid{gap:50px 24px}
  .landing .section{padding-top:84px;padding-bottom:84px}
  .landing .work{padding-top:56px}
  .contact-links>a,.contact-pending{grid-template-columns:110px minmax(0,1fr) 28px}
}
@media(max-width:600px){
  :root{--frame:0px;--gutter:20px}
  .story-pin{padding:var(--frame) var(--frame) 0}
  .header{padding:14px var(--gutter);min-height:74px;gap:18px}
  .header .word-logo{font-size:32px}
  .header nav{gap:14px;font-size:12px}
  .landing .section{padding:72px var(--gutter)}
  .landing .work{padding-top:48px}
  .section-heading{gap:24px;margin-bottom:32px}
  .section-heading h2.display-title{font-size:clamp(52px,13vw,72px);margin-top:24px}
  .work-count{font-size:11px;margin:9px 0 0 14px}
  .section-heading>p{font-size:15px}
  .work-grid{gap:44px}
  .project-caption{padding-top:18px}
  .project-caption strong{font-size:25px}
  .project-caption>span>span{font-size:14px}
  .project-type{font-size:10px}
  .view-project{font-size:11px;min-height:36px;padding:8px 12px}
  .section-heading h2{font-size:31px;line-height:1.45}
  .approach-item summary{grid-template-columns:24px 1fr 30px;gap:16px;padding:25px 0}
  .approach-item h3{font-size:23px}
  .approach-item .heading-line{display:block}
  .approach-toggle{width:30px;height:30px}
  .approach-body{padding:0 0 26px 40px}
  .approach-body p{font-size:15px;line-height:1.85}
  .approach-note{font-size:13px}
  .contact h2{font-size:34px;margin-top:32px}
  .contact-desc{font-size:15px;margin-top:24px}
  .contact-steps{display:grid;gap:12px;font-size:13px}
  .contact-links{margin-top:40px}
  .contact-links>a,.contact-pending{grid-template-columns:1fr 24px;gap:8px 12px;padding:24px 0}
  .contact-links>a>span:first-child,.contact-pending>span:first-child{grid-column:1;font-size:11px}
  .contact-links strong{grid-column:1;font-size:clamp(17px,5vw,24px);line-height:1.6}
  .contact-links>a>span:last-child,.contact-pending>span:last-child{grid-column:2;grid-row:1 / 3}
  .contact-pending strong{font-size:14px}
  body>footer{padding:36px var(--gutter) 22px}
  .footer-brand{font-size:clamp(44px,12vw,68px)}
  .footer-bottom{font-size:10px;gap:12px;margin-top:28px;padding-top:18px}
}
@media(max-width:360px){
  :root{--gutter:16px}
  .header{gap:14px}
  .header nav{gap:11px;font-size:11px}
  .header .word-logo{font-size:30px}
  .section-heading h2{font-size:28px}
  .approach-item summary{gap:12px;grid-template-columns:22px 1fr 28px}
  .approach-item h3{font-size:21px}
  .approach-body{padding-left:34px}
}

/* Reading rhythm: intentional sentences and paragraphs at every width. */
.copy-sentence{display:block}
.copy-unit{display:inline-block;white-space:nowrap}
.section-heading>p,.contact-desc,.approach-body p,.detail-description p{text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word;line-height:1.85}
.section-heading>p .copy-sentence+.copy-sentence{margin-top:4px}
.approach-body p+p{margin-top:16px}
.approach-body p.approach-lead{font-weight:500;color:var(--ink);line-height:1.8}
.approach-note{margin-top:24px;max-width:40em;line-height:1.8}
.detail-description p+p{margin-top:18px}
.contact-desc .copy-sentence+.copy-sentence{margin-top:4px}
.contact-links>a{grid-template-columns:1fr 2fr 28px;gap:20px}
.contact-links>a>span:first-child{font-family:'Noto Sans KR',sans-serif}
.contact-links strong{white-space:nowrap;overflow-wrap:normal}
@media(max-width:600px){
  .approach-body{padding-left:0;max-width:100%}
  .approach-body p{font-size:15px;line-height:1.9}
  .approach-body p+p{margin-top:14px}
  .approach-note{font-size:13px;margin-top:20px;line-height:1.8}
  .section-heading>p .copy-sentence+.copy-sentence{margin-top:6px}
  .contact-desc .copy-sentence+.copy-sentence{margin-top:10px}
  .contact-links>a{grid-template-columns:52px minmax(0,1fr) 18px;gap:8px;padding:24px 0}
  .contact-links>a>span:first-child{grid-column:1;grid-row:1;font-size:12px}
  .contact-links strong{grid-column:2;grid-row:1;font-size:clamp(14px,4.2vw,18px);letter-spacing:-.035em}
  .contact-links>a>span:last-child{grid-column:3;grid-row:1;font-size:20px}
  .detail-description p+p{margin-top:16px}
}
@media(max-width:360px){.approach-body{padding-left:0}.approach-body p{font-size:14px}}

/* Number first, personal name as a secondary signature. */
.contact-phone strong{display:flex;align-items:baseline;gap:18px;min-width:0}
.contact-phone .phone-number{font-weight:500}
.contact-phone .contact-name{font-family:'Noto Sans KR',sans-serif;font-size:16px;font-weight:400;letter-spacing:-.02em;color:var(--muted)}
@media(max-width:600px){
  .contact-phone strong{gap:8px}
  .contact-phone .contact-name{font-size:11px;font-weight:400;flex-shrink:0}
  .contact-links .contact-phone>span:first-child{font-size:11px;white-space:nowrap}
}

/* One wordmark, scaled consistently from navigation to the closing signature. */
.word-logo,.header .word-logo,.opening-top .word-logo,.note-signature{font-family:var(--font);font-weight:400;font-size:32px;line-height:1.2;letter-spacing:-.07em;white-space:nowrap;flex-shrink:0}
.word-logo>span,.note-signature>span{color:var(--accent);font-weight:300}
@media(max-width:600px){
  .word-logo,.header .word-logo,.opening-top .word-logo,.note-signature{font-size:26px}
  .header{display:grid;grid-template-columns:1fr;gap:6px;padding-top:14px;padding-bottom:8px}
  .header nav{width:100%;justify-content:space-between;gap:18px;font-size:13px}
  .section{scroll-margin-top:114px}
  .note-footer{flex-wrap:wrap;gap:12px}
}
@media(max-width:360px){.opening-top,.scene-three-top{gap:12px}.opening-top .small-link,.scene-three-top .small-link{font-size:10px}.word-logo,.opening-top .word-logo{font-size:24px}}

/* Blue surfaces retain dark readable copy; saturated blue marks use white icons. */
.opening-card{background:var(--accent-surface)}
.square-link{color:#fff}

/* The portfolio hands off to a paper panel, paced by native scrolling. */
.approach-transition{position:relative;background:var(--bg)}
.approach-line-ink{display:block}
html.approach-motion .approach-transition{isolation:isolate;--approach-panel:0;--approach-line-one:0;--approach-line-two:0;--approach-copy:0;--approach-row-1:0;--approach-row-2:0;--approach-row-3:0}
html.approach-motion .approach-transition .about{position:sticky;top:var(--approach-top,84px);z-index:1;border-top:0;background:var(--approach-paper,var(--bg));clip-path:polygon(0 calc((1 - var(--approach-panel))*72px),100% 0,100% 100%,0 100%);transform:translateY(calc((1 - var(--approach-panel))*36px));transform-origin:50% 0}
html.approach-motion #about-title>.heading-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
html.approach-motion #about-title>.heading-line:first-child .approach-line-ink{transform:translateY(calc((1 - var(--approach-line-one))*112%))}
html.approach-motion #about-title>.heading-line:last-child .approach-line-ink{transform:translateY(calc((1 - var(--approach-line-two))*112%))}
html.approach-motion .about .section-heading .eyebrow{clip-path:inset(0 calc((1 - var(--approach-panel))*100%) 0 0)}
html.approach-motion .about .section-heading>p{transform:translateY(calc((1 - var(--approach-copy))*40px));clip-path:inset(0 0 calc((1 - var(--approach-copy))*100%) 0)}
html.approach-motion .about .approach-item{transform:translateY(calc((1 - var(--row-arrival))*60px));clip-path:inset(0 0 calc((1 - var(--row-arrival))*100%) 0)}
html.approach-motion .about .approach-item:nth-child(1){--row-arrival:var(--approach-row-1)}
html.approach-motion .about .approach-item:nth-child(2){--row-arrival:var(--approach-row-2)}
html.approach-motion .about .approach-item:nth-child(3){--row-arrival:var(--approach-row-3)}
@media(prefers-reduced-motion:reduce){.approach-transition{padding-bottom:0!important}.approach-transition .about{position:relative!important;top:auto!important;clip-path:none!important;transform:none!important}.about .approach-line-ink,.about .section-heading>p,.about .approach-item{transform:none!important;clip-path:none!important}}

html.approach-motion .approach-transition::after{content:"";display:block;height:clamp(160px,28svh,280px)}
@media(prefers-reduced-motion:reduce){html.approach-motion .approach-transition::after{display:none}}

/* Local lime poster study; production is unchanged. */
body[data-theme=lime]{--accent:#89f336;--accent-ink:#376a12;--accent-surface:#89f336}
.opening-card{color:#141414}
.opening-card p,.opening-card .card-label,.opening-card a{color:inherit}
.opening-card a{border-top-color:#14141440}
.square-link{color:#141414}
.studio-note .note-panel{background:var(--accent);gap:24px;padding:28px var(--gutter) 40px;overflow:hidden}
.studio-note .note-top{color:var(--ink)}
.studio-note .note-top .eyebrow:first-child::before{display:none}
.note-arc{display:flex;align-items:center;flex:1;min-height:0;overflow:visible;color:var(--ink);font-family:var(--font);font-size:min(46vw,58svh);font-weight:800;letter-spacing:-.09em;line-height:.88;margin-left:-.035em}
.note-arc>span{display:block;white-space:nowrap;transform-origin:left center}
.note-arc .arc-star{font-weight:600;font-size:.43em;vertical-align:top;display:inline-block;margin-left:.1em;line-height:.9;letter-spacing:0}
.studio-note .note-copy,html.story-motion .studio-note .note-copy{grid-template-columns:1.2fr 1fr;gap:30px 80px;max-width:none;flex:0;align-items:start;align-content:start;border-top:1px solid #14141440;padding:24px 0 0;margin:0}
.studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{grid-column:1;font-size:clamp(26px,2.6vw,42px);line-height:1.5;font-weight:600;letter-spacing:-.05em}
.studio-note .note-line-soft,.studio-note .note-dot{color:var(--ink)}
.studio-note .note-line-soft{font-weight:500}
.studio-note .note-description{grid-column:2;align-self:start;padding:0}
.studio-note .note-copy p{color:#252b1f}
.studio-note .note-copy .text-link{margin-top:18px}
.note-footer{display:none}
html.story-motion .note-arc>span{transform:translate(calc(var(--depart)*-38vw),calc((1 - var(--arrive))*70%)) scale(calc(.92 + var(--arrive)*.08));will-change:transform}

@media(max-width:800px){
 .studio-note .note-panel{padding-bottom:100px;gap:24px}
 .note-arc{font-size:45vw;min-height:190px}
 .studio-note .note-copy,html.story-motion .studio-note .note-copy{grid-template-columns:1fr;gap:24px;padding-top:22px}
 .studio-note .note-description{grid-column:1}
 .studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{font-size:clamp(24px,4.5vw,32px)}
}
@media(max-width:600px){
 .studio-note .note-panel{padding:24px 20px 100px;gap:20px}
 .note-arc{font-size:44vw;min-height:150px}
 .studio-note .note-copy,html.story-motion .studio-note .note-copy{gap:22px;padding-top:20px}
 .studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{font-size:clamp(21px,5.4vw,28px);line-height:1.5}
 .studio-note .note-copy .text-link{margin-top:14px}
}
@media(max-height:720px) and (min-width:801px){
 .studio-note .note-panel{padding-top:20px;padding-bottom:28px;gap:16px}
 .note-arc{font-size:min(40vw,49svh)}
 .studio-note .note-copy,html.story-motion .studio-note .note-copy{padding-top:16px;gap:20px 40px}
 .studio-note .note-copy h2,html.story-motion .studio-note .note-copy h2{font-size:28px}
 .studio-note .note-copy .text-link{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.note-arc>span{transform:none!important}}

/* A graphic composition, with one continuous line leading into the work. */
.landing-billboard{position:relative;isolation:isolate}
.studio-orbit{position:absolute;inset:9% 5%;z-index:0;transform:rotate(-14deg);pointer-events:none}
.studio-orbit svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#14141445;stroke-width:1;vector-effect:non-scaling-stroke}
.orbit-dot{position:absolute;left:5%;top:24%;width:12px;height:12px;border:3px solid var(--bg);background:var(--ink);border-radius:50%}
.landing-word{position:relative;z-index:1;font-weight:500}
.landing-word>span{display:inline-block;transform-origin:50% 42%}
.studio-label{position:absolute;right:10%;top:8%;z-index:2;background:var(--ink);color:var(--paper);padding:14px 18px;font:11px/1.6 var(--mono);letter-spacing:.3px;transform:rotate(6deg)}
.studio-label strong{font-weight:400;color:var(--accent)}
.studio-index{display:flex;align-items:center;gap:18px;font:10px/1.6 var(--mono);color:#62625b;margin-top:8px}
.studio-track{height:1px;background:#14141425;flex:1;position:relative;overflow:hidden}
.studio-track::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.18)}
html.story-motion .studio-orbit{transform:translateX(calc((1 - var(--settle))*-12vw)) rotate(calc(-14deg + (1 - var(--settle))*22deg + var(--work-handoff,0)*24deg))}
html.story-motion .studio-label{transform:translateY(calc((1 - var(--settle))*-80px - var(--work-handoff,0)*60px)) rotate(calc(6deg - var(--work-handoff,0)*12deg))}
html.story-motion .studio-index{transform:translateY(calc((1 - var(--settle))*80px))}
html.story-motion .landing-word{transform:translate(calc(-2% + (1 - var(--settle))*48% - var(--work-handoff,0)*14%),calc(var(--work-handoff,0)*-60px)) scale(calc(1 - var(--work-handoff,0)*.08))}
html.story-motion .landing-word>span{transform:rotate(calc(var(--work-handoff,0)*100deg))}
html.work-motion .studio-track::after{transform:scaleX(calc(.18 + var(--work-handoff,0)*.82))}
.work-title-ink{display:block}
html.work-motion .work-title-soft,html.work-motion .work-title-main{overflow:clip;padding-bottom:.07em;margin-bottom:-.07em}
html.work-motion .work-title-soft .work-title-ink{transform:translateY(calc((1 - var(--work-title-one,0))*110%))}
html.work-motion .work-title-main .work-title-ink{transform:translateY(calc((1 - var(--work-title-two,0))*110%))}
html.work-motion .work .section-heading>.section-heading-copy,html.work-motion .work .section-heading>p{transform:translateY(calc((1 - var(--work-copy,0))*36px));clip-path:inset(0 0 calc((1 - var(--work-copy,0))*100%) 0)}
html.work-motion .work .section-heading .eyebrow{clip-path:inset(0 calc((1 - var(--work-title-one,0))*100%) 0 0)}
html.work-motion .work .project-card:nth-child(-n+2){transform:translateY(calc((1 - var(--work-card,0))*54px));clip-path:inset(0 0 calc((1 - var(--work-card,0))*22%) 0)}
html.work-motion .work .project-card:focus-within{transform:none;clip-path:none}
@media(max-width:600px){
 .studio-label{font-size:9px;padding:10px 12px;top:9%;right:4%;line-height:1.5}
 .studio-orbit{inset:14% 1%}
 .studio-index{font-size:8px;gap:10px;margin-top:6px}
 .orbit-dot{width:9px;height:9px;border-width:2px}
 html.story-motion .landing-caption{padding-top:18px;margin-top:16px}
}
@media(prefers-reduced-motion:reduce){
 .studio-orbit,.studio-label,.studio-index,.landing-word,.landing-word>span,.work-title-ink{transform:none!important}
 .work .section-heading>p,.work .section-heading .eyebrow,.work .project-card{transform:none!important;clip-path:none!important}
}
/* The preview tray leaves the caption readable on small screens. */
.studio-label{color:#f2f1ed}
html.work-motion .header::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(var(--work-handoff,0));transform-origin:left;pointer-events:none}
@media(max-width:600px){html.story-motion .landing-opening{padding-bottom:100px}}

/* Full-color portfolio: the website itself lifts, its frame stays aligned. */
.work .project-screen img{filter:none;transition:none}
.work .project-screen{transform:translateY(0) scale(1);transform-origin:center;transition:transform .65s var(--ease),box-shadow .65s var(--ease);box-shadow:0 5px 18px #1414140b}
.work .project-visual::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);pointer-events:none}
.work .view-project{z-index:2;background:var(--accent);color:var(--ink);border:0;transition:transform .4s var(--ease);min-height:40px}
@media(hover:hover) and (pointer:fine){
 .work .view-project{transform:translateY(105%)}
 .work .project:hover .project-screen,.work .project:focus-visible .project-screen{transform:translateY(-6px) scale(1.035);box-shadow:0 18px 32px #14141419}
 .work .project:hover .view-project,.work .project:focus-visible .view-project{transform:translateY(0);background:var(--accent);color:var(--ink)}
 .work .project:hover .project-visual::after,.work .project:focus-visible .project-visual::after{transform:scaleX(1)}
}
@media(max-width:800px),(hover:none),(pointer:coarse){
 .work .view-project{transform:none;font-size:11px;min-height:36px}
 .work .project-card.is-in-view .project-screen{transform:translateY(-4px) scale(1.018);box-shadow:0 14px 24px #14141415}
 .work .project-card.is-in-view .project-visual::after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
 .work .project-screen,.work .project-visual::after,.work .view-project{transition:none!important;transform:none!important}
}

/* Full viewport composition without the local preview toolbar. */
@media(max-width:800px){.studio-note .note-panel{padding-bottom:32px}}
@media(max-width:600px){.studio-note .note-panel{padding-bottom:32px}html.story-motion .landing-opening{padding-bottom:24px}}