@font-face{font-family:Pretendard;src:url('assets/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#1b1d1f;--text:#26282b;--muted:#72787f;--light:#9ea4aa}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--text);font-family:Pretendard,Arial,sans-serif;font-size:16px;line-height:1.6}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #454c53;outline-offset:5px}h1,h2,h3,p{margin:0;font-weight:400}button{border:0;background:none;padding:0}img{display:block}.portfolio{display:grid;grid-template-columns:minmax(0,1250fr) 28px minmax(0,578fr);max-width:1920px;padding:0 32px;margin:0 auto;min-height:1528px}.works{display:flex;flex-direction:column;min-width:0}.section-header{height:58px;position:relative;display:flex;align-items:center;padding:12px 16px}.section-header h1,.section-header h2{font-size:24px;line-height:1.4;color:var(--ink)}.rule{position:absolute;bottom:0;left:0;width:100%;height:1px}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:80px;padding:24px 16px 0}.project{text-align:left;min-width:0;display:flex;flex-direction:column;gap:24px;align-self:start}.thumbnail{width:100%;height:auto;aspect-ratio:599/337;object-fit:cover;transition:opacity .2s}.project:hover .thumbnail{opacity:.88}.project-info{display:flex;gap:36px;align-items:flex-start;width:100%}.number{width:32px;flex-shrink:0;font-size:24px;line-height:1.4}.project-copy{min-width:0;display:flex;flex-direction:column;gap:16px}.project-heading{display:flex;align-items:center;gap:8px;font-size:24px;line-height:1.4;color:var(--ink);flex-wrap:wrap}.year{font-size:16px;font-weight:300;line-height:1.4;color:var(--muted)}.description{font-weight:300;color:var(--muted);line-height:1.4;display:block;font-size:16px}.description>span{display:block;margin-top:4px}footer{margin-top:auto;padding:16px 0;color:var(--light);font-size:14px;font-weight:300;display:flex;gap:6px}.column-divider{position:relative}.column-divider>img{position:absolute;top:0;left:0;width:28px;height:100%;object-fit:fill}.about-column{min-width:0;padding-bottom:82px}.about-header{justify-content:space-between;padding-right:0}.signature{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:16px;line-height:normal}.biography{padding:23px 16px 0;display:flex;flex-direction:column;gap:28px}.biography h3{font-size:20px;line-height:1.6}.profile{display:flex;flex-direction:column;align-items:flex-start}.email,.external-link{display:inline-flex;gap:4px;align-items:center;text-align:left;line-height:1.6}.email{color:var(--light)}.profile>.external-link{margin-top:8px}.bio-rule{height:1px;width:100%;object-fit:fill}.bio-section{display:flex;flex-direction:column;gap:16px}.entries{display:flex;flex-direction:column;gap:8px}.date{font-size:14px;font-weight:300;color:var(--light);margin-left:8px;white-space:nowrap}.note{font-size:14px;color:var(--light)}.sides{margin-top:71px}.side-content{padding:22px 16px 0}.video-placeholder{height:280px;background:#d9d9d9}.side-content h3{font-size:24px;line-height:1.4;margin-top:24px;margin-bottom:16px}.side-content p{font-weight:300;color:var(--muted);line-height:1.4}.side-content p+p{margin-top:8px}dialog{border:0;padding:0;width:90vw;max-width:1728px;height:calc(100dvh - 62px);max-height:none;color:var(--ink);overscroll-behavior:contain}dialog::backdrop{background:rgb(0 0 0 / .65)}body:has(dialog[open]){overflow:hidden}.dialog-header{position:sticky;top:0;z-index:1;height:71px;display:flex;align-items:center;gap:8px;padding:16px 32px 17px;background:white}.dialog-header h2{font-size:24px;line-height:1.4}.dialog-header button{margin-left:auto;flex-shrink:0}.project-pages{padding:0 48px}.project-pages img{width:100%;height:auto;aspect-ratio:16/9}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);background:var(--ink);color:white;padding:12px 20px;font-size:14px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;max-width:calc(100vw - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1921px){.portfolio{min-height:1528px}}
@media(max-width:1400px){.portfolio{padding:0 24px;grid-template-columns:minmax(0,2fr) 28px minmax(340px,1fr)}.project-info{gap:20px}.project-heading{font-size:21px}.number{font-size:21px}.date{display:inline-block;margin-left:4px}.side-content h3{font-size:21px}}
@media(max-width:1050px){.portfolio{display:flex;flex-direction:column;padding:0 24px;min-height:0}.column-divider{display:none}.works{min-height:0}footer{order:3;margin-top:64px;padding:20px 16px}.about-column{margin-top:48px;padding-bottom:48px}.about-header{padding-right:16px}.biography{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.bio-rule{display:none}.profile{grid-column:1/-1;padding-bottom:28px;border-bottom:1px solid #c9cdd2}.sides{margin-top:48px}.video-placeholder{width:100%;height:auto;aspect-ratio:546/280}.side-content{max-width:650px}.project-info{gap:24px}.project-heading{font-size:24px}.number{font-size:24px}}
@media(max-width:600px){.portfolio{padding:0 16px}.section-header{height:58px;padding-left:0;padding-right:0}.section-header h1,.section-header h2{font-size:22px}.projects{grid-template-columns:1fr;padding:24px 0 0;row-gap:40px}.project{gap:18px}.project-info{gap:20px}.project-heading{font-size:22px}.number{font-size:22px;width:28px}.project-copy{gap:12px}.description{font-size:14px}.year{font-size:14px}.signature{font-size:14px}.biography{display:flex;padding:24px 0 0;gap:28px}.bio-rule{display:block}.profile{padding-bottom:0;border:0}.date{font-size:12px}.entries p{font-size:14px}.note{font-size:13px!important}.biography h3{font-size:20px}.about-column{margin-top:28px;padding-bottom:40px}.side-content{padding:22px 0 0}.side-content h3{font-size:20px}.side-content p{font-size:14px}footer{padding:16px 0;margin-top:40px;font-size:12px}.sides{margin-top:40px}dialog{width:100vw;max-width:none;height:100dvh;margin:0}.dialog-header{height:64px;padding:12px 16px 14px}.dialog-header h2{font-size:19px}.project-pages{padding:0}.toast{bottom:20px}}
.thumbnail-frame{display:block;width:100%;aspect-ratio:599/337;overflow:hidden;flex-shrink:0}
.project-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
.side-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
.thumbnail-frame .thumbnail{display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1);transform:scale(1);transform-origin:center}
.project:hover .thumbnail{opacity:1}
@media(hover:hover) and (pointer:fine){.thumbnail-frame:hover .thumbnail{transform:scale(1.035)}}
.description{font-size:14px}
a.external-link{color:inherit;text-decoration:none}
.side-title-link{line-height:1.4;max-width:100%}
.side-title-link span{min-width:0}
.side-title-link img{flex-shrink:0}
a.external-link:focus-visible{outline:2px solid #454c53;outline-offset:5px}
@media(min-width:1051px){.project-heading .year{font-size:14px}}
.project{transition:filter .3s ease}
@media(hover:hover) and (pointer:fine){.projects:has(.thumbnail-frame:hover) .project:not(:has(.thumbnail-frame:hover)){filter:blur(var(--project-blur,3px))}}
/* Native tracks are replaced with an overlay thumb that fades while idle. */
@media(max-width:1050px){.portfolio>footer{order:3;align-self:flex-start;margin-top:48px;padding:16px;}.about-column{padding-bottom:0}}
@media(max-width:600px){.portfolio>footer{margin-top:64px;padding:16px 0 24px}}
@media(min-width:1051px){
  html,body{height:100%;overflow:hidden}
  .portfolio{height:100dvh;min-height:0}
  .works,.about-column{height:100%;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
  .works>.section-header,.works>.projects,.works>footer{flex-shrink:0}
  .works>footer{margin-top:clamp(80px,20vw,394px)}
}
html,dialog,.works,.about-column{scrollbar-width:none}
html::-webkit-scrollbar,dialog::-webkit-scrollbar,.works::-webkit-scrollbar,.about-column::-webkit-scrollbar{display:none}
.scroll-thumb{position:fixed;right:4px;top:0;width:4px;min-height:24px;border-radius:2px;background:rgba(114,120,127,.65);opacity:0;transition:opacity .25s ease-in;z-index:20;pointer-events:none;touch-action:none}
.scroll-thumb.is-scrolling{opacity:1;pointer-events:auto}
.scroll-thumb[hidden]{display:none}
.scroll-rail{position:fixed;width:14px;z-index:20}
.scroll-rail[hidden]{display:none}
.scroll-rail .scroll-thumb{position:absolute;right:4px;top:0}
.column-scroll-rail{width:14px}
.column-scroll-rail .scroll-thumb{right:2px}
dialog[open]{display:flex;flex-direction:column;overflow:hidden}
@media(min-width:1051px){#project-dialog{width:calc(90vw - 80px);max-width:1648px}}
dialog .dialog-header{position:relative;flex-shrink:0}
.project-pages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none}
.project-pages::-webkit-scrollbar{display:none}
.scroll-thumb:hover,.scroll-thumb.is-dragging{background:rgba(69,76,83,.85)}
.works>.section-header{justify-content:space-between}
.dialog-header{height:clamp(48px,3.7vw,71px);padding:clamp(8px,.84vw,16px) clamp(16px,1.67vw,32px);gap:clamp(6px,.42vw,8px)}
.dialog-header h2{font-size:clamp(16px,1.25vw,24px);min-width:0}
.dialog-header .year{font-size:clamp(12px,.84vw,16px);flex-shrink:0}
.dialog-header button{display:grid;place-items:center;width:clamp(32px,2vw,38px);height:clamp(32px,2vw,38px)}
.dialog-header button img{width:clamp(20px,1.98vw,38px);height:clamp(20px,1.98vw,38px)}
@media(max-width:600px){.works>.section-header h1{font-size:clamp(18px,5.64vw,22px)}.works>.section-header .signature{font-size:13px}.dialog-header{height:48px;padding:8px 12px}.dialog-header h2{font-size:16px}.dialog-header button img{width:20px;height:20px}.scroll-thumb{width:3px;right:3px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.droplet-cursor{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:10000;mix-blend-mode:difference;opacity:0;transition:opacity .25s ease-in}
.droplet-cursor.visible{opacity:1}
.droplet-enabled,.droplet-enabled *{cursor:none!important}
.droplet-enabled .scroll-rail,.droplet-enabled .scroll-rail *{cursor:default!important}
.responsive-icon{display:flex;flex-shrink:0;align-items:center}
@media(min-width:1051px){
  .biography{font-size:14px;gap:28px;padding-top:23px}
  .biography h3{font-size:16px;line-height:1.6}
  .biography .email{font-size:14px;font-weight:300;gap:2px}
  .profile>.external-link{font-size:14px;gap:2px;margin-top:12px}
  .biography .external-link{gap:2px}
  .bio-section{gap:16px}
  .bio-section .entries{gap:8px}
  .bio-section p:not(.note){display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .biography .date{font-size:12px;margin-left:0}
  .biography .note{font-size:12px;line-height:1.6;margin-top:2px}
  .side-content h3{font-size:20px;margin-top:24px;margin-bottom:16px}
  .side-content p{font-size:14px;line-height:1.4}
  .side-title-link{gap:4px}
}