@font-face{font-family:'Editorial Medium';src:url('assets/fonts/gallery-noto-sans-sc-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0020-024F,U+2000-206F,U+2190-2199}
@font-face{font-family:'Noto Sans KR';src:url('assets/fonts/gallery-noto-sans-kr-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/gallery-noto-sans-sc-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'Noto Sans KR';src:url('assets/fonts/gallery-noto-sans-kr-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/gallery-noto-sans-sc-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF}
/* Independent monochrome experiment. Latin display only; readable CJK body faces. */
@font-face{font-family:'Gallery Display Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue');size-adjust:65%;ascent-override:110%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:Anton;src:url('assets/fonts/anton-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/gallery-noto-sans-sc-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'Noto Sans KR';src:url('assets/fonts/gallery-noto-sans-kr-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}
:root{--paper:#fff;--ink:#000;--muted:#595959;--line:#e5e5e5;--section-divider:#e5e5e5;--placeholder:#e5e5e5;--accent:#000;--portfolio-font:Arial,'Noto Sans SC','Noto Sans KR','Microsoft YaHei','Malgun Gothic',sans-serif;--work-action-family:var(--portfolio-font);--work-action-size:13px;--work-action-color:#000}
body,body :is(h1,h2,h3,h4,p,a,span,button,input,select,textarea,label,ul,li,dl,dt,dd,nav,footer,div,small,option){font-family:var(--portfolio-font)}
body{color:#000;background:#fff}
body :is(a,button,input,select,textarea){accent-color:#000}
body a:hover{color:#000}
body :is(a,button,input,select,textarea):focus-visible{outline-color:#000}
.shell{width:min(calc(100% - 96px),1328px)}
header.shell{min-height:96px;border-bottom:1px solid #e5e5e5}
header nav{gap:32px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
header .languages button{font-size:12px;color:#595959}
header .languages button[aria-pressed=true]{color:#000;text-decoration-color:#000}
header .navigation-logo{width:118px}
.about{padding-top:64px;padding-bottom:96px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:6%;row-gap:40px;align-items:start}
.about h1{font-family:Anton,'Gallery Display Fallback',Impact,'Arial Narrow',sans-serif;font-size:clamp(76px,10.6vw,160px);font-weight:400;line-height:.97;letter-spacing:-.025em;text-transform:uppercase}
.about h1 .kinetic-line,.about h1 .hero-reveal-line{font-family:inherit;color:#000}
.about .kinetic-line{padding-block:.08em;margin-block:-.08em}
.about .hero{align-self:start;margin-top:6px;grid-row:1/3;position:relative}
.about .intro{max-width:530px}
.about .position{font-size:19px;line-height:1.6;margin-bottom:20px;color:#000}
.about .bio{font-size:15px;line-height:1.8;color:#595959}
.about .bio .name{color:#000;margin-bottom:8px}
.about .location{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#595959;margin-top:24px}
.selected-works{padding-bottom:80px}
.selected-heading{padding-top:32px;padding-bottom:32px}
.selected-heading h2{font-family:Anton,'Gallery Display Fallback',Impact,'Arial Narrow',sans-serif;font-size:clamp(42px,5vw,72px);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:-.015em}
.selected-controls button{border-color:#e5e5e5;border-radius:50%;color:#000;background:#fff}
.selected-controls button:not(:disabled):hover{background:#000;color:#fff;border-color:#000}
.selected-progress{font-size:11px;color:#595959;letter-spacing:.04em}
.selected-project{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(48px,8vw,128px)}
.selected-image{max-width:420px;background:#e5e5e5}
.selected-caption::before{font-family:Anton,'Gallery Display Fallback',Impact,sans-serif;font-size:88px;color:#e5e5e5;margin-bottom:28px}
.selected-caption h3{font-size:clamp(24px,2.5vw,36px);line-height:1.35;letter-spacing:-.035em;font-weight:500;max-width:590px}
.selected-category{font-size:11px;color:#595959;text-transform:uppercase;letter-spacing:.08em}
.selected-project .selected-link{font-size:13px;color:#000;margin-top:20px}
#contact .contact-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;padding:72px 0}
#contact .contact-info h2{font-family:Anton,'Gallery Display Fallback',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:clamp(48px,5.5vw,80px);line-height:1.02;letter-spacing:-.02em;max-width:580px;font-weight:400}
#contact .contact-info>p{font-size:15px;line-height:1.8;color:#595959;margin-top:28px}
#contact .collaboration-tags{font-size:12px;color:#595959;gap:12px 24px;line-height:1.6}
#contact .contact-direct{margin-top:40px;padding-top:24px}
#contact .contact-direct .contact-touch{font-size:14px;color:#000}
#contact .email{font-size:16px;color:#000}
#contact .socials{font-size:12px;color:#000}
#contact .contact-details::before{display:none}
#contact .inquiry-form label{font-size:12px;color:#000}
#contact .inquiry-form :is(input,textarea,select){font-size:15px;border-color:#e5e5e5;background:#fff;color:#000;border-radius:0}
#contact .inquiry-form :is(input,textarea)::placeholder{color:#595959;opacity:1}
#contact .inquiry-form button{background:#000;border-color:#000;color:#fff;font-size:13px;padding:16px 24px}
#contact .inquiry-form button:hover{background:#fff;color:#000}
#contact .inquiry-note{font-size:12px;color:#595959}
#contact footer{font-size:11px;color:#595959}
#project-detail{color:#000;border-color:#e5e5e5}
#project-detail :is(.detail-category,.detail-description,.metrics dt,.details dt,.detail-progress){color:#595959}
#project-detail :is(.detail-original,.metrics dd,.details dd){color:#000}
#project-detail .metrics dd{font-size:22px}
#project-detail .details{display:flex;flex-wrap:wrap;margin:20px 0}
.back-to-top{color:#000;border-color:#000;background:#fff}
@media(max-width:1100px){
 .shell{width:calc(100% - 64px)}
 .about{column-gap:5%;row-gap:32px;padding-top:48px;padding-bottom:72px}
 .about h1{font-size:10.3vw}
 .selected-project{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px}
}
@media(max-width:700px){
 .shell{width:calc(100% - 40px)}
 header.shell{min-height:120px;gap:8px;padding-block:20px}
 header nav{gap:24px;font-size:11px}
 header .navigation-logo{width:106px}
 .about{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:36px;padding-bottom:64px}
 .about h1{font-size:17vw;line-height:1;grid-row:1}
 .about .hero{grid-column:1;grid-row:2;max-width:100%;margin-top:4px}
 .about .intro{grid-column:1;grid-row:3}
 .about .position{font-size:18px}
 .about .bio{font-size:14px}
 .selected-heading{gap:20px;flex-wrap:wrap}
 .selected-heading h2{font-size:44px}
 .selected-controls{margin-left:0}
 .selected-project{grid-template-columns:minmax(0,1fr);gap:28px}
 .selected-image{max-width:100%;justify-self:stretch}
 .selected-caption::before{font-size:48px;float:right;margin:0 0 0 20px}
 .selected-caption h3{font-size:24px;letter-spacing:-.025em}
 .selected-works{padding-bottom:56px}
 #contact .contact-body{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:48px}
 #contact .contact-info h2{font-size:56px}
 #contact .inquiry-row{grid-template-columns:minmax(0,1fr)}
}

/* Shared utilities use the same four neutral tokens, including dialog states. */
.language-divider{background:#e5e5e5}
.copy-email,.email-copy-status,#project-detail .project-sharing button,#project-detail .project-share-status,#project-detail .project-share-url{color:#595959}
.copy-email:hover,#project-detail .project-sharing button:hover{color:#000}

/* Compact archive, sharing display/body families with About and Selected Works. */
#contents{width:min(88%,1240px);padding-top:64px;--work-action-family:var(--portfolio-font);--work-action-size:14px}
#contents,#contents :is(h2,h3,h4,p,a,span,dl,dt,dd,div),.selected-caption :is(h3,p,a,span),#project-detail :is(h2,p,a,span,dt,dd){font-family:var(--portfolio-font);font-weight:400}
#contents>.section-heading h2{font-family:Anton,'Gallery Display Fallback',Impact,sans-serif;font-size:40px;font-weight:400;line-height:1.1;letter-spacing:-.015em;text-transform:uppercase}
#contents .pillar-heading{display:block}
#contents .pillar-heading h3{font-size:20px;font-weight:400;line-height:1.3;letter-spacing:0;margin:0 0 10px}
#contents .pillar-heading>span{display:block;font-size:14px;line-height:1.5;color:#595959}
#contents .work h4{font-weight:400;letter-spacing:0}
#contents .description{color:#595959}
#contents .category:empty{display:none}
#contents .work-link,#contents .brand-website{font-family:var(--portfolio-font)!important;font-size:14px;font-weight:400}
.selected-caption h3{font-weight:400;letter-spacing:0}
header nav{display:flex;gap:4px;padding:5px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
header nav a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:10px 18px;border-radius:999px;color:#000}
header nav a::after{display:none}
header nav a:hover{background:#e5e5e5}
header nav a[aria-current=location]{background:#000;color:#fff}
header nav a:focus-visible{outline-offset:2px}
@media(max-width:767px){header.shell{height:140px;min-height:140px;grid-template-rows:64px 60px;padding-block:8px}header nav{justify-self:center;font-size:12px;gap:2px}header nav a{padding:8px 16px}}
@media(max-width:600px){#contents{padding-top:42px}#contents>.section-heading h2{font-size:32px}#contents .pillar-heading h3{font-size:19px}}

/* Contents category capsules remain independent of the main navigation capsule. */
#category-nav{display:flex;flex-wrap:wrap;overflow:visible;gap:8px;padding:12px 0;margin:0 0 32px;background:#fff;border-bottom:1px solid #e5e5e5}
#category-nav a{font-family:var(--portfolio-font);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:0;min-height:40px;padding:9px 16px;border:1px solid #e5e5e5;border-radius:999px;color:#595959;white-space:normal;transition:background .2s,color .2s,border-color .2s}
#category-nav a:hover{background:#e5e5e5;color:#000}
#category-nav a[aria-current=location]{background:#000;color:#fff;border-color:#000}
#contents .work h4{font-size:20px;line-height:1.45}
#contents .description{font-size:14px;line-height:1.75}
#contents .metrics dt,#contents .details dt{font-size:12px}
#contents .metrics dd{font-size:20px}
@media(max-width:600px){#category-nav a{font-size:11px;padding:8px 12px;min-height:38px}#contents .work h4{font-size:22px}#contents .description{font-size:15px}}

/* Selected Works: five visible covers, with six originals circulating horizontally. */
#selected-works{width:min(88%,1240px);padding-bottom:48px;container-type:inline-size}
#selected-works .selected-heading{width:100%;margin-inline:auto;padding-block:28px}
#selected-works .selected-heading h2{font-size:clamp(38px,4.5vw,64px)}
#selected-grid{--cover-width:24%;position:relative;display:block;width:100%;height:32cqw;overflow:hidden;padding:0;touch-action:pan-y;scroll-snap-type:none}
#selected-grid .selected-project{position:absolute;left:calc(50% - var(--cover-width)/2);top:0;width:var(--cover-width);height:100%;display:block;visibility:visible;pointer-events:none;border-inline:1px solid #fff;will-change:transform}
#selected-grid .selected-project.is-current{pointer-events:auto;z-index:1}
#selected-grid .selected-image{width:100%;max-width:none;height:100%;aspect-ratio:3/4;margin:0}
#selected-grid .selected-image img{width:100%;height:100%;object-fit:contain;transform:none}
#selected-grid .selected-number{position:absolute;left:16px;top:16px;font-family:Anton,var(--portfolio-font);font-size:16px;color:#fff;text-shadow:0 1px 4px #000}
#selected-grid .selected-caption{position:absolute;left:12px;right:12px;bottom:12px;padding:14px;background:#fff;border:1px solid #e5e5e5;border-radius:16px;opacity:0;visibility:hidden;transition:opacity .3s ease;box-shadow:0 4px 16px #00000014}
#selected-grid .is-current .selected-caption{opacity:1;visibility:visible}
#selected-grid .selected-caption::before{display:none}
#selected-grid .selected-category{font-size:10px;line-height:1.4;letter-spacing:.02em;margin:0 0 8px;color:#595959}
#selected-grid .selected-caption h3{font-family:Anton,var(--portfolio-font);font-size:clamp(18px,1.7cqw,22px);font-weight:400;line-height:1.15;letter-spacing:0;white-space:normal;margin:0 0 10px;height:auto;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
html:not([lang=en]) #selected-grid .selected-caption h3{font-family:var(--portfolio-font);font-weight:400;line-height:1.3}
#selected-grid .selected-summary{font-size:12px;line-height:1.5;color:#595959;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#selected-grid .selected-link{display:flex;justify-content:flex-end;align-items:center;gap:4px;min-height:32px;text-align:right;font-size:11px;font-weight:400;line-height:1.5;margin:8px 0 0;color:#000}
#selected-works>.selected-controls{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;margin:24px 0 0}
#selected-prev{order:0}#selected-progress{order:1;margin:0;min-width:62px;text-align:center;font-size:14px;color:#000}#selected-next{order:2}#selected-toggle{order:3}
#selected-works .selected-controls button{width:44px;height:44px;border:1px solid #e5e5e5;border-radius:50%}
@media(max-width:1100px){
 #selected-works .selected-heading{width:100%}
 #selected-grid .selected-caption{left:8px;right:8px;bottom:8px;padding:14px}
 #selected-grid .selected-caption h3{font-size:20px}
}
@media(max-width:900px){#selected-grid{--cover-width:38%;height:50.6667cqw}}
@media(max-width:600px){
 #selected-works .selected-heading{width:100%;padding-block:24px}
 #selected-works .selected-heading h2{font-size:clamp(32px,8.5vw,44px)}
 #selected-grid{--cover-width:78%;height:104cqw}
 #selected-grid .selected-caption{left:12px;right:12px;bottom:12px;padding:18px;border-radius:14px}
 #selected-grid .selected-caption h3{font-size:20px}
 #selected-works>.selected-controls{gap:16px}
}
@media(prefers-reduced-motion:reduce){#selected-grid .selected-caption{transition:none}}



/* One alignment reference; keep the existing gallery width and image proportions. */
main>.shell{width:min(88%,1240px);padding-inline:0}
html[lang="zh-CN"]{--portfolio-font:'Noto Sans SC',Arial,'Noto Sans KR','Microsoft YaHei',sans-serif;--copy-size:14px;--copy-leading:1.8;--project-title-size:18px;--project-title-leading:1.5}
html[lang="ko"]{--portfolio-font:'Noto Sans KR',Arial,'Noto Sans SC','Malgun Gothic',sans-serif;--copy-size:14px;--copy-leading:1.85;--project-title-size:18px;--project-title-leading:1.5}
html[lang="en"]{--copy-size:14px;--copy-leading:1.75;--project-title-size:20px;--project-title-leading:1.4}
html:not([lang=en]) :is(.about .bio,#contact .contact-info>p){font-weight:400;line-height:1.8}
#selected-grid .selected-caption{display:flex;flex-direction:column;gap:8px}
#selected-grid .selected-caption :is(.selected-category,h3,.selected-summary,.selected-link){margin:0}
html[lang="zh-CN"] #selected-grid .selected-caption h3{font-family:var(--portfolio-font);font-size:19px;font-weight:500;line-height:1.4;word-break:normal;white-space:pre-line}
html[lang="ko"] #selected-grid .selected-caption h3{font-family:var(--portfolio-font);font-size:19px;font-weight:400;line-height:1.5;word-break:keep-all;white-space:normal;overflow-wrap:anywhere}
html[lang="ko"] #selected-grid .selected-summary{word-break:keep-all;overflow-wrap:anywhere}
html:not([lang=en]) #selected-grid .selected-summary{font-family:var(--portfolio-font);font-size:13px;font-weight:400;line-height:1.6}
/* Remove old optical offsets so both columns start at the same grid line. */
#contents .work{align-items:start}
#contents .cover{align-self:start}
#contents .work-info{align-self:start;transform:none;aspect-ratio:auto;min-height:0;justify-content:flex-start;gap:0;padding-top:0}
#contents .work h4{font-size:var(--project-title-size);line-height:var(--project-title-leading);margin:0;min-height:0;text-indent:0}
html:not([lang=en]) #contents .work h4{font-family:var(--portfolio-font);font-weight:400}
#contents .description{font-size:var(--copy-size);font-weight:400;line-height:var(--copy-leading);margin:12px 0 0;min-height:0}
#contents .metrics{margin:16px 0 0;padding-top:12px}
#contents .link-row{top:auto;margin:12px 0 0;padding:0;gap:8px 16px}
@media(max-width:600px){
 html[lang="zh-CN"]{--copy-size:15px;--project-title-size:18px}
 html[lang="ko"]{--copy-size:15px;--project-title-size:20px}
 #contents .work-info{padding-top:18px}
}
#contents .work h4 span,#selected-grid .selected-caption h3 span{font:inherit}

/* CJK editorial copy uses genuine Regular outlines, never synthesized bold. */
html:not([lang=en]) :is(#contents,#selected-grid){font-synthesis:none}
html:not([lang=en]) #contents .work h4{letter-spacing:normal}
html:not([lang=en]) #selected-grid .selected-caption h3{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;letter-spacing:normal}
html:not([lang=en]) #selected-grid .selected-caption{text-align:left}
html:not([lang=en]) #selected-grid .selected-link{justify-content:flex-start;text-align:left}

html[lang="zh-CN"] #contents .work h4{font-weight:500}
html[lang="zh-CN"] #selected-grid .selected-caption h3{margin-bottom:2px}
/* Keep the original semantic lines readable on narrow covers, without shrinking type. */
html[lang="zh-CN"] #selected-grid .selected-caption{left:50%;right:auto;width:calc(100% - 24px);min-width:252px;transform:translateX(-50%)}
@media(max-width:1100px){
 #selected-grid .selected-caption{left:50%;right:auto;width:calc(100% - 24px);min-width:252px;transform:translateX(-50%)}
}

/* Reference card: condensed brand name, brief factual copy, fixed visual rhythm. */
#selected-works #selected-grid .selected-caption{display:grid;grid-template-rows:12px 32px 36px 20px;gap:6px;padding:16px;height:152px;box-sizing:border-box}
#selected-works #selected-grid .selected-category{font-size:10px;font-weight:400;line-height:12px;min-height:0;letter-spacing:0;margin:0}
#selected-works #selected-grid .selected-brand{font-family:Anton,'Gallery Display Fallback',Impact,sans-serif;font-size:30px;font-weight:400;line-height:32px;letter-spacing:0;white-space:normal;word-break:normal;overflow-wrap:normal;text-wrap:balance;display:block;height:auto;margin:0;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
#selected-works #selected-grid .selected-summary{font-family:var(--portfolio-font);font-size:12px;font-weight:400;line-height:18px;letter-spacing:0;margin:0;display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;word-break:normal}
html[lang="ko"] #selected-works #selected-grid .selected-summary{word-break:keep-all;overflow-wrap:anywhere}
#selected-works #selected-grid .selected-link{justify-content:flex-end;align-self:end;text-align:right;font-size:11px;line-height:20px;min-height:20px;margin:0}

/* Actual Medium outlines for the archive hierarchy and main navigation only. */
html[lang] #contents :is(#category-nav a,.pillar-heading h3,.pillar-heading>span,.work h4,.metrics dd){font-family:'Editorial Medium',var(--portfolio-font);font-weight:500;font-synthesis:none}
#contents{font-synthesis:none}
header nav,header nav a{font-family:'Editorial Medium',var(--portfolio-font);font-weight:500;font-synthesis:none}
header nav{flex-wrap:nowrap}
header nav a{white-space:nowrap}
@media(max-width:767px){header nav{font-size:11px;gap:2px;max-width:100%}header nav a{padding-inline:8px}}