:root{scrollbar-gutter:stable;font-family:"Bodoni Moda","Jeju Myeongjo",serif;color:#39372f;background:#eeebe7;font-synthesis:none;--home-width:min(100vw,70.079636svh)}
*{box-sizing:border-box}body{font-size:16px;line-height:1.5;text-rendering:auto;-webkit-font-smoothing:antialiased;margin:0;min-width:280px;background:#eeebe7 url('/assets/paper-grain.svg') 0 0/256px 256px repeat}body.night{background:#000;color:#deddd2}body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}img{display:block;width:100%;height:auto}p,h1,h2,figure{margin:0}h1,h2{font-weight:400}main:focus{outline:none}.sr-only{position:absolute!important;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link{position:fixed;top:8px;left:8px;padding:12px;background:#fff;color:#111;transform:translateY(-150%);z-index:100}.skip-link:focus{transform:none}
.site-header{position:fixed;z-index:5;top:0;left:0;right:0;height:72px;pointer-events:none;background:transparent}.site-header>*{pointer-events:auto}.menu-toggle,.close-menu{position:absolute;width:44px;height:44px;left:12px;top:12px;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:5px}.menu-toggle{position:fixed;z-index:6;display:block;padding:0}.menu-toggle span{position:absolute;left:10px;top:14px;width:24px;height:2px;opacity:1}.menu-toggle span:nth-child(2){top:21px}.menu-toggle span:nth-child(3){top:28px}.menu-toggle span,.close-menu span{background:currentColor}.close-menu span{height:1px;width:24px}.night .menu-toggle{color:#aaa}.logo-link{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:60px;height:44px;display:grid;place-items:center}.brand-mark{display:block;width:100%;height:100%;background:currentColor;mask:url('/assets/pdf-logo.png') center/contain no-repeat;-webkit-mask:url('/assets/pdf-logo.png') center/contain no-repeat}

.home-stage{position:relative;min-height:100svh;display:grid;place-items:center}.home-canvas{position:relative;width:var(--home-width);aspect-ratio:616/879;container-type:inline-size}.home-photo{position:absolute;inset:0;padding:0;width:100%;height:100%;text-align:initial}.home-image{position:absolute;opacity:0;transition:opacity .45s ease;pointer-events:none}.home-image.active{opacity:1}.home-image img{width:100%;height:100%}.vase-image{left:28.77%;top:28.636%;width:42.294%;height:52.462%}.box-image{left:13.68%;top:14.394%;width:67.807%;height:77.727%}.tray-image{left:9.989%;top:15.341%;width:85.342%;height:77.348%}.home-tagline{position:absolute;top:92.49%;left:0;width:100%;text-align:center;font-size:clamp(14px,2.435cqw,18px);line-height:1.4;font-weight:400;letter-spacing:normal;pointer-events:none}.night .home-tagline{display:none}
.archive-page{background:transparent;min-height:100svh;padding-top:72px;padding-bottom:60px}.archive{width:min(100% - 48px,1180px);margin:auto}.archive-group{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,1.6vw,24px);padding:4vh 0 3vh}.project-card{margin:0;min-width:0}.project-visual{position:relative;display:block}.project-visual img{width:100%;height:auto}.project-wash{position:absolute;inset:0;background:rgba(245,244,243,.529);opacity:0;transition:opacity .2s}.project-visual:hover .project-wash,.project-visual:focus-visible .project-wash{opacity:1}.project-name{position:absolute;bottom:4.35%;left:0;width:100%;text-align:center;white-space:pre-line;font-family:"Bodoni Moda","Jeju Myeongjo",serif;font-size:clamp(16px,1.5vw,26px);line-height:1.3}.project-intro{margin-top:0;background:rgba(220,219,216,.32);padding:32px;font-family:"Bodoni Moda","Jeju Myeongjo",serif;font-size:16px;line-height:1.5;color:#514d45;align-self:center}.project-intro p{width:100%}.project-intro span{display:inline}
/* 12-project archive: three staggered two-row compositions on a shared 12-column grid.
   Covers are capped by viewport height (--cover-cap), never cropped: width follows each photo's
   own ratio, so about four covers fit one desktop screen; the intro shares row 2 with cards 3/4. */
@media(min-width:901px){.archive-page{padding-top:96px}.archive-group{--cover-cap:clamp(220px,calc((100svh - 72px)*.34),540px);--step:clamp(28px,5svh,64px);grid-template-rows:auto auto;row-gap:var(--step);padding:var(--step) 0 calc(var(--step)*1.5)}.archive-group>.project-card{width:fit-content;max-width:100%;align-self:start}.archive-group>.project-card img{width:auto;max-width:100%;max-height:var(--cover-cap)}.archive-group>.project-intro{align-self:center;padding:28px}
.archive-group[data-group="1"]>.slot-0{grid-area:1/2/2/6}
.archive-group[data-group="1"]>.slot-1{grid-area:1/7/2/13;justify-self:end;margin-top:calc(var(--step)*1.6)}
.archive-group[data-group="1"]>.project-intro{grid-area:2/1/3/5}
.archive-group[data-group="1"]>.slot-2{grid-area:2/5/3/9;justify-self:center;margin-top:calc(var(--step)*.4)}
.archive-group[data-group="1"]>.slot-3{grid-area:2/9/3/13;justify-self:end;margin-top:calc(var(--step)*2)}
.archive-group[data-group="2"]>.slot-0{grid-area:1/1/2/8;margin-top:calc(var(--step)*.8)}
.archive-group[data-group="2"]>.slot-1{grid-area:1/9/2/12;justify-self:center}
.archive-group[data-group="2"]>.slot-2{grid-area:2/1/3/6;justify-self:end;margin-top:calc(var(--step)*1.2)}
.archive-group[data-group="2"]>.slot-3{grid-area:2/6/3/9;justify-self:center}
.archive-group[data-group="2"]>.project-intro{grid-area:2/9/3/13}
.archive-group[data-group="3"]>.slot-0{grid-area:1/3/2/7;justify-self:center;margin-top:calc(var(--step)*.6)}
.archive-group[data-group="3"]>.slot-1{grid-area:1/8/2/13;justify-self:start;margin-top:calc(var(--step)*2)}
.archive-group[data-group="3"]>.project-intro{grid-area:2/1/3/5}
.archive-group[data-group="3"]>.slot-2{grid-area:2/5/3/9;justify-self:end}
.archive-group[data-group="3"]>.slot-3{grid-area:2/10/3/13;justify-self:start;margin-top:calc(var(--step)*1.4)}}
.reveal-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}.reveal-on .reveal.in{opacity:1;transform:none}
dialog{color:#171717;border:0;border-radius:0}dialog::backdrop{background:rgba(0,0,0,.2)}.menu-dialog{position:fixed;inset:0 auto 0 0;margin:0;width:min(400px,calc(100vw - 32px));height:100dvh;max-width:none;max-height:none;overflow:auto;background:transparent;color:inherit;box-shadow:none;padding:0}.menu-dialog::backdrop{background:transparent}.close-menu{left:auto;right:12px;z-index:2}.close-menu span{position:absolute;transform:rotate(45deg)}.close-menu span+span{transform:rotate(-45deg)}.menu-dialog nav{display:flex;flex-direction:column;gap:16px;padding:88px 36px 40px;font-family:"Bodoni Moda","Jeju Myeongjo",serif}.menu-dialog nav>a{display:flex;align-items:center;min-height:44px;width:fit-content;font-size:23px;line-height:1.2;letter-spacing:normal}.menu-logo{display:none}


.detail-page{height:100dvh;padding:88px 24px 24px;display:grid;place-items:center;background:transparent}.detail-hero{position:relative;aspect-ratio:var(--ratio);width:min(900px,calc(100vw - 48px),calc((100dvh - 112px)*var(--ratio)))}.detail-hero img{width:100%;height:100%;object-fit:contain}.detail-hero button{position:absolute;top:0;bottom:0;width:50%;padding:0}.detail-previous{left:0}.detail-next{right:0}.detail-hero button:focus-visible{outline-offset:-4px}.product-page{padding:120px 7vw 60px;min-height:100svh}.product-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:100px 18%;max-width:900px;margin:auto}.product-card{padding:0;text-align:left}.product-card:nth-child(2){margin-top:100px}.product-card img{height:auto}.product-dialog{background:#eeebe7;width:min(90vw,600px);padding:60px 30px 25px;max-height:92svh}.product-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:20px}.product-dialog img{width:auto;max-width:100%;max-height:65svh;object-fit:contain}.close-product{position:absolute;right:10px;top:10px;width:44px;height:44px;font-size:24px}.text-link{font-size:16px;min-height:44px;display:inline-flex;align-items:center}.info-page,.load-error{padding:35svh 24px 80px;text-align:center;font-size:16px}.info-page h1{font-size:16px;letter-spacing:normal;margin-bottom:25px}.loading-note{text-align:center;padding:40svh 20px;font-size:16px;letter-spacing:normal}.noscript{padding:120px 24px}
@media(max-width:900px){.archive-group[data-group]>.slot-0{grid-column:1/7;grid-row:1;margin-top:0}.archive-group[data-group]>.slot-1{grid-column:7/13;grid-row:1;margin-top:5vh}.archive-group[data-group]>.slot-2{grid-column:1/7;grid-row:2;margin-top:4vh}.archive-group[data-group]>.slot-3{grid-column:7/13;grid-row:3;margin-top:5vh}.archive-group[data-group]>.project-intro{grid-column:1/13;grid-row:4;margin-top:5vh;align-self:stretch}.archive-page{padding-bottom:30px}}
@media(max-width:480px){.product-grid{gap:60px 12%}}.project-intro p{position:static;width:100%}.project-name{bottom:3%}
@media(max-width:640px){.archive-group{display:flex;flex-direction:column;padding:4vh 0}.archive-group[data-group]>.project-card{margin-top:6vh}.archive-group[data-group]>.project-card:first-child{margin-top:0}.archive-group[data-group]>.slot-0{margin-right:14%}.archive-group[data-group]>.slot-1{margin-left:14%}.archive-group[data-group]>.slot-2{margin-right:7%}.archive-group[data-group]>.slot-3{margin-left:7%}.archive-group[data-group]>.project-intro{margin-top:5vh;align-self:stretch;padding:28px 22px}.archive-page{padding-bottom:30px}}
@media(max-width:800px){main{transition:opacity .25s ease}body:has(#menu[open]) main{opacity:0}body:has(.about-page){background-color:#e9e6dc}body.night:has(.about-page){background:#020202}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(forced-colors:active){.menu-toggle span,.close-menu span,.brand-mark{forced-color-adjust:none;background:ButtonText}.project-wash{border:1px solid CanvasText}}


@media(max-height:500px){.home-stage{padding-top:72px;--home-width:min(100vw,calc((100svh - 72px)*.70079636))}}

/* Natural font metrics replace the previous PDF typography calibration. */
:root{font-kerning:normal;font-variant-ligatures:common-ligatures}



:root{font-optical-sizing:none;font-variation-settings:"opsz" 6}.menu-dialog nav>a{letter-spacing:.025em}

/* Windows Chrome ignores font-smoothing: composite text to avoid coloured LCD edges without scaling or filters. */
.home-tagline,.project-number,.product-number,.project-intro p,.project-name,.menu-dialog nav,.text-link,.info-page,.loading-note,.load-error{backface-visibility:hidden}

.project-number,.product-number{display:block;width:100%;margin:8px 0 0;padding:0;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:normal;text-align:left;color:inherit}




/* About hierarchy uses text flow and whole-pixel type metrics instead of PDF percentage coordinates. */
.about-page{min-height:100svh;padding:180px 24px 80px;background:#e9e6dc url('/assets/paper-grain.svg') 0 0/256px 256px repeat}
.about-canvas{width:100%;max-width:960px;margin:0 auto;text-align:center;color:#231e18;display:grid;grid-template-rows:48px 1fr;row-gap:64px;min-height:round(nearest,calc(112svh - 472px),2px)}
/* Center the complete content group at 56% of viewport height, allowing short screens to grow. */
.about-content{display:flow-root;align-self:center}
.about-title{font-size:36px;line-height:48px;letter-spacing:.025em;margin:0}
.about-section+.about-section{margin-top:round(nearest,clamp(52px,calc(8svh - 28px),88px),2px)}
.about-section h2{font-size:22px;line-height:32px;letter-spacing:.025em}
.about-section .roman{font-size:14px;line-height:20px;margin-bottom:8px}
.about-section p{font-family:"Jeju Myeongjo",serif;font-size:18px;font-weight:400;line-height:30px;letter-spacing:normal;font-variation-settings:normal;font-kerning:normal;margin:16px 0 0;word-break:keep-all;overflow-wrap:break-word}
.about-signature{font-size:14px;line-height:24px;letter-spacing:.025em;margin-top:64px}
.night .about-page{background:#020202}.night .about-canvas{color:#e9e8e2}
.about-title,.about-section h2,.about-section p,.about-section .roman,.about-signature{backface-visibility:hidden}
@media(max-height:900px){.about-page{padding-top:112px}.about-canvas{min-height:round(nearest,calc(112svh - 336px),2px)}}
@media(max-width:480px){.about-page{padding:112px 20px 56px}.about-title{font-size:32px;line-height:44px;margin-bottom:112px}.about-section+.about-section{margin-top:44px}.about-section h2{font-size:20px;line-height:28px}.about-section p{font-size:17px;line-height:28px;margin-top:12px}.about-signature{margin-top:48px}}
@media(max-width:480px){.about-canvas{display:block;min-height:0}}
/* PDF light About footer center is 1142/1230 (92.85%) of the canvas height. */
@media(min-width:961px) and (min-height:900px){.about-page{position:relative}.about-content{padding-bottom:88px}.about-signature{position:absolute;top:round(nearest,calc(92.85svh - 12px),1px);left:24px;right:24px;max-width:960px;margin:0 auto}}