@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
@import url('/portfolio/portfolio.css');
:root{--paper:#f1ede5;--ink:#252925;--muted:#666a60;--line:#25292530;--red:#9d3e2f;--accent:var(--red);--ease:cubic-bezier(.19,1,.22,1);font-family:'Noto Sans KR','Malgun Gothic',sans-serif;background:var(--paper)}
html{scroll-padding-top:110px}body{isolation:isolate}::selection{background:var(--red);color:#fff}[hidden]{display:none!important}.shell{padding-top:0}.paper-grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.12;background-image:url('/portfolio/ink-grain.svg');mix-blend-mode:multiply}.ink-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.ink-cloud{position:absolute;right:-250px;top:120px;width:700px;height:700px;background:radial-gradient(ellipse,#5960571a,transparent 65%);border-radius:50%;transform:translate3d(0,var(--drift,0px),0)}.ink-cloud:nth-child(2){left:-350px;top:45vh;background:radial-gradient(ellipse,#63544815,transparent 66%);transform:translate3d(0,calc(var(--drift,0px)*-.6),0)}.ink-cursor{position:fixed;width:44px;height:44px;border:1px solid #9d3e2f66;border-radius:50%;pointer-events:none;z-index:100;left:0;top:0;opacity:0;transition:width .3s,height .3s,opacity .2s;background:#9d3e2f05}.ink-cursor.is-hover{width:64px;height:64px;background:#9d3e2f0c}
.masthead{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:inherit;display:flex;align-items:baseline;gap:20px;margin:0;font:32px Georgia,serif;letter-spacing:-1.5px}.brand span{font:11px 'Noto Sans KR',sans-serif;letter-spacing:2.5px;margin:0}.masthead-note{font-size:12px;letter-spacing:.08em;color:var(--muted)}.page-header{position:relative;padding:35px 0 30px;isolation:isolate;border:0}.title-line{display:flex;align-items:center;gap:24px}.eyebrow{font-size:11px;letter-spacing:.24em;margin:0 0 12px;color:var(--red);font-weight:600}.page-header h1{font:500 clamp(30px,3.6vw,48px)/1.5 'Noto Serif KR',Batang,serif;letter-spacing:-2px;margin:0}.seal{display:flex;align-items:center;justify-content:center;width:40px;height:46px;border:1.5px solid var(--red);outline:1px solid #9d3e2f55;outline-offset:3px;font:500 16px/1.1 'Noto Serif KR',serif;writing-mode:vertical-rl;letter-spacing:3px;color:var(--red);transform:rotate(-7deg)}.header-stroke{position:absolute;right:0;top:20px;width:290px;height:110px;z-index:-1;opacity:.1;overflow:visible}.header-stroke path{fill:none;stroke:var(--ink);stroke-width:18;stroke-dasharray:900;stroke-dashoffset:0;animation:ink-write 1.9s var(--ease) both}.header-stroke path+path{stroke-width:2;animation-delay:.15s}
.navigation{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;min-height:64px;background:#f1ede5f2;backdrop-filter:blur(14px);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.navigation nav{display:flex;gap:28px;flex-wrap:wrap;align-items:center;padding:18px 0;flex:1}.navigation nav a{font-size:14px;text-decoration:none;position:relative;color:var(--muted);transition:color .25s}.navigation nav a:after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.navigation nav a:hover,.navigation nav a[aria-current]{color:var(--red)}.navigation nav a:hover:after,.navigation nav a[aria-current]:after{transform:scaleX(1)}.reading-meter{display:flex;gap:7px;align-items:center;font:12px Georgia,serif;color:var(--muted);font-variant-numeric:tabular-nums}.reading-meter span{color:var(--red);min-width:3ch;text-align:right}.reading-line{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--red);transform:scaleX(var(--progress,0));transform-origin:left}
.section{position:relative;padding-top:42px;margin-top:0;scroll-margin-top:0}.section h2{font:500 24px/1.5 'Noto Serif KR',Batang,serif;letter-spacing:-.7px;align-items:center;gap:20px;margin:0 0 40px}.section h2>span{font:italic 38px Georgia,serif;color:var(--red)}.section+.section{margin-top:50px;padding-top:42px}.project{position:relative;margin:0 0 72px;padding:0 0 36px;border-bottom:1px solid var(--line)}.project:last-child{border-bottom:0}.project-number{display:block;font:11px Georgia,serif;letter-spacing:2px;color:var(--red);margin-bottom:14px}.project h3{font-size:21px;font-weight:600;line-height:1.6;margin:0 0 12px;letter-spacing:-.5px;word-break:keep-all}.description{max-width:850px;line-height:1.95;margin-bottom:26px}.project:has(.gallery.single figure){display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start;grid-template-rows:auto 1fr}.project:has(.gallery.single figure)>h3{grid-column:1;grid-row:1;padding-top:20px}.project:has(.gallery.single figure)>.description{grid-column:1;grid-row:2;padding-right:26px}.project:has(.gallery.single figure)>.gallery{grid-column:2;grid-row:1/4;max-width:none}.gallery{gap:36px 26px}figure{perspective:1200px}.thumbnail{background:#e8e3d9;border:1px solid #262b2425;box-shadow:0 3px 10px #262b2406;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:center;transition:transform .6s var(--ease),box-shadow .6s var(--ease);text-decoration:none;overflow:visible}.thumbnail:after{content:'↗';position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--red);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease);font-size:22px}.thumbnail[data-image]:after{content:'+'}.thumbnail:hover:after,.thumbnail:focus-visible:after{opacity:1;transform:none}.thumbnail:hover{box-shadow:0 18px 36px #262b2417}.thumbnail:hover img{filter:none}figcaption{padding-top:15px;line-height:1.7}small{font-size:11px;letter-spacing:.02em}.file-link{padding:18px 0;transition:color .3s,background .3s}.file-link:hover{color:var(--red)}.file-link small{transition:transform .35s var(--ease)}.file-link:hover small{transform:translateX(3px)}.file-list .file-link{padding:22px 12px}.file-list .file-link:hover{background:#e8e1d4}.file-list .file-link:nth-child(odd){background:#e8e1d444}.video-poster{background:#222622;overflow:hidden}.video-poster:after{display:none}.play{display:grid;place-items:center;width:68px;height:68px;border:1px solid #ffffffa0;border-radius:50%;background:#20282070;backdrop-filter:blur(5px);font-size:22px;padding:0 0 0 3px;transition:transform .6s var(--ease),background .3s}.play:before{content:'';position:absolute;inset:-9px;border:1px solid #ffffff60;border-radius:50%;transition:inset .6s var(--ease),opacity .6s}.video-poster:hover .play{transform:translate(-50%,-50%) scale(1.12);background:var(--red)}.video-poster:hover .play:before{inset:-20px;opacity:0}
footer{padding:38px 0 50px;align-items:center}footer>a{font:500 22px 'Noto Serif KR',serif;text-decoration:none}footer>span{font-size:11px;letter-spacing:1px}.back-top{position:fixed;right:22px;bottom:24px;z-index:25;width:44px;height:44px;border:1px solid var(--line);background:var(--paper);font-size:20px;color:var(--ink);transition:opacity .3s,transform .5s var(--ease);opacity:0;transform:translateY(15px);pointer-events:none}.back-top.is-visible{opacity:1;transform:none;pointer-events:auto}.skip{z-index:100}
.motion-ready .reveal{opacity:0;transform:translateY(38px);filter:blur(3px);transition:opacity .9s var(--ease),transform 1.25s var(--ease),filter 1s var(--ease);transition-delay:var(--delay,0ms)}.motion-ready .reveal.is-visible,.motion-ready .reveal:focus-within{opacity:1;transform:none;filter:none}.motion-ready .section h2:after{content:'';height:1px;background:linear-gradient(90deg,var(--ink),transparent);flex:1;margin-left:10px;transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease) .2s}.motion-ready .section h2.is-visible:after{transform:scaleX(1)}.page-header .eyebrow,.title-line{animation:title-arrive 1.2s var(--ease) both}.title-line{animation-delay:.12s}
dialog{border:1px solid #ffffff20;background:#1f2420;color:#eeeae2;max-width:1500px;box-shadow:0 30px 100px #0005}dialog[open]{animation:viewer-open .45s var(--ease)}dialog::backdrop{background:#0c130ed9;backdrop-filter:blur(8px)}.viewer-toolbar{background:#1f2420f5;border-bottom:1px solid #ffffff20}.viewer-toolbar a{font-size:13px;color:#eeeae2}.viewer-toolbar button,.viewer-navigation button{background:transparent;color:#eeeae2;border:1px solid #ffffff40;padding:9px 13px;white-space:nowrap;min-height:42px}.viewer-toolbar button:hover,.viewer-navigation button:hover{background:#ffffff18}.viewer-stage{padding:20px;overflow:auto}.viewer-stage img{width:auto;height:auto;max-height:calc(100dvh - 205px);object-fit:contain;cursor:zoom-in}.viewer-stage.is-zoomed img{max-width:none;max-height:none;cursor:zoom-out}.viewer-navigation{display:flex;justify-content:center;align-items:center;gap:20px;padding:0 20px 20px}.viewer-navigation span{font:13px Georgia,serif;letter-spacing:2px}.viewer-navigation button:disabled{opacity:.3;cursor:default}
@keyframes ink-write{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}@keyframes title-arrive{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes viewer-open{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@media(min-width:1500px){.section:before{content:'NIALAB / SELECTED WORKS';position:absolute;left:-65px;top:175px;writing-mode:vertical-rl;font-size:10px;letter-spacing:3px;color:#666a6077}}
@media(max-width:900px){.shell{padding:0 30px}.project:has(.gallery.single figure){column-gap:28px}.project:has(.gallery.single figure)>.description{padding-right:0}.project h3{font-size:19px}.masthead-note{display:none}.ink-cursor{display:none}.header-stroke{width:180px}.navigation nav{gap:22px}}
@media(max-width:640px){html{scroll-padding-top:105px}.shell{padding-inline:22px}.masthead{height:72px}.brand{font-size:28px}.brand span{font-size:10px;letter-spacing:1.5px}.page-header{padding:28px 0}.page-header h1{font-size:29px;letter-spacing:-1.5px}.title-line{gap:16px}.seal{width:28px;height:35px;font-size:12px}.eyebrow{font-size:10px}.header-stroke{width:125px;top:0}.navigation{min-height:60px;gap:12px}.navigation nav{gap:14px;padding:16px 0}.navigation nav a{font-size:12px}.reading-meter{font-size:11px}.section{padding-top:32px}.section h2{font-size:20px;margin-bottom:26px;gap:14px}.section h2>span{font-size:30px}.section+.section{margin-top:30px}.project{margin-bottom:40px;padding-bottom:24px}.project:has(.gallery.single figure){display:block}.project:has(.gallery.single figure)>h3{padding-top:0}.project h3{font-size:19px}.description{line-height:1.9}.gallery{grid-template-columns:1fr;gap:26px}.gallery.single{max-width:100%}.nanami-gallery>figure:first-child{width:100%}small{font-size:11px}figcaption{font-size:13px}footer{margin-top:40px;padding-bottom:70px}footer>a{font-size:19px}.back-top{right:14px;bottom:14px;width:40px;height:40px}.viewer-stage{padding:12px}.viewer-stage img{max-height:calc(100dvh - 260px)}.viewer-navigation{gap:14px}.ink-cloud{opacity:.5}.motion-ready .reveal{transform:translateY(24px);filter:none}.project-number{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none;filter:none}.ink-cursor{display:none}.ink-cloud{transform:none}.thumbnail{transform:none!important}.motion-ready .section h2:after{transform:scaleX(1)}}