:root{color-scheme:light;--bg:#f2f2f2;--surface:#dedede;--text:#000;--muted:rgba(0,0,0,.4);--line:#bababa;--page:1520px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;font-weight:300}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}.page-width{width:min(var(--page),calc(100% - 80px));margin-inline:auto}.site-header{height:90px;padding:0 max(5.2vw,40px);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}.brand{font-family:Inter,Arial,sans-serif;font-weight:400;letter-spacing:.02em;white-space:nowrap}.desktop-nav{display:flex;align-items:center;gap:20px}.desktop-nav a{white-space:nowrap}.desktop-nav .active,.filters .active{font-weight:500}.divider{width:.5px;height:16px;background:var(--line)}.nav-gap{width:20px}.theme-button{width:34px;height:34px;padding:5px;border:0;background:transparent;cursor:pointer}.theme-button img{display:block;width:24px;height:24px}.menu-button,.mobile-menu{display:none}.intro{margin-top:150px}.intro-line{height:80px;border-bottom:.5px solid var(--line);display:flex;align-items:center;justify-content:space-between}.intro h1,.detail-copy h1{margin:0;font-size:34px;line-height:34px;font-weight:400}.intro-line p{margin:0;line-height:16px}.intro-line p a{text-decoration:underline;text-underline-offset:2px}.filters{height:90px;display:flex;justify-content:center;align-items:center;gap:40px;overflow-x:auto;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters button{border:0;background:none;padding:0;white-space:nowrap;cursor:pointer;font-weight:300}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:120px 60px;align-items:start}.work-card{display:flex;flex-direction:column;gap:40px;min-width:0}.work-card img{display:block;width:100%;height:auto;object-fit:cover;background:var(--surface)}.work-card h2{margin:0;font-size:16px;line-height:16px;font-weight:500}.work-meta{display:flex;flex-direction:column;gap:20px;line-height:16px}.work-meta p{margin:0}.pagination{height:120px;border-top:.5px solid var(--line);margin-top:120px;display:flex;align-items:center;justify-content:space-between}.pagination>div{display:flex;gap:20px;align-items:center}.pagination>div:last-child{gap:40px}.pagination button{padding:0;border:0;background:none;cursor:pointer}.pagination button:disabled{color:var(--muted)}.pagination i{width:1px;height:14px;background:#d9d9d9}.site-footer{min-height:301px;border-top:.5px solid rgba(186,186,186,.73);padding:60px 0;display:flex;justify-content:space-between;align-items:flex-start}.footer-info{display:flex;flex-direction:column;gap:60px}.contact{display:flex;flex-direction:column;gap:20px;line-height:24px}.contact p,.copyright p{margin:0}.contact p{display:flex;gap:10px}.contact strong{font-weight:500}.copyright{display:flex;flex-direction:column;gap:20px;line-height:16px}.socials{display:flex;align-items:center;gap:30px}.socials span{width:24px;height:24px;display:grid;place-items:center}.socials span:first-child{width:29px}.socials img{display:block;max-width:100%;max-height:24px}.detail-main{position:relative;margin-top:40px}.back-link{position:absolute;top:0;left:0;line-height:16px}.detail-content{height:910px;display:grid;grid-template-columns:390px 1fr;gap:100px}.detail-copy{align-self:center}.detail-copy h1{height:80px;display:flex;align-items:center;border-bottom:.5px solid var(--line)}.detail-copy>div{margin-top:80px;display:flex;flex-direction:column;gap:20px;line-height:16px}.detail-copy p{margin:0}.detail-visual{background:var(--surface);display:grid;place-items:center}.detail-visual img{display:block;max-width:min(700px,72%);max-height:78%;object-fit:contain}.detail-page .site-footer{margin-top:40px}
:root[data-theme="dark"]{color-scheme:dark;--bg:#111;--surface:#242424;--text:#f2f2f2;--muted:rgba(255,255,255,.4);--line:#555}:root[data-theme="dark"] .site-header img,:root[data-theme="dark"] .site-footer img{filter:invert(1)}
@media (min-width:721px) and (max-width:1300px){:root{--page:calc(100vw - 96px)}.intro{margin-top:100px}.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:88px 40px}.detail-content{grid-template-columns:300px 1fr;gap:48px}.detail-visual img{max-width:76%}}
@media (max-width:720px){:root{--bg:#fff;--page:calc(100% - 48px)}.page-width{width:var(--page)}.site-header{height:90px;padding:0 24px}.desktop-nav{display:none}.menu-button{display:flex;width:20px;height:18px;padding:0;border:0;background:transparent;flex-direction:column;justify-content:space-between;cursor:pointer}.menu-button span{display:block;width:20px;height:1px;background:var(--text);transition:transform .25s,opacity .25s}.menu-open .menu-button span:first-child{transform:translateY(8.5px) rotate(45deg)}.menu-open .menu-button span:nth-child(2){opacity:0}.menu-open .menu-button span:last-child{transform:translateY(-8.5px) rotate(-45deg)}.mobile-menu{display:grid;visibility:hidden;opacity:0;position:fixed;inset:0;background:rgba(255,255,255,.96);z-index:15;place-items:center;transition:opacity .2s,visibility .2s}.menu-open{overflow:hidden}.menu-open .mobile-menu{visibility:visible;opacity:1}.mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:20px}.mobile-menu nav>a{font-size:16px}.mobile-menu nav>span{height:.5px;width:64px;background:var(--line)}.mobile-themes{margin-top:80px;display:flex;flex-direction:column;align-items:center;gap:20px}.mobile-themes button{width:34px;height:34px;border:0;background:transparent;padding:5px}.mobile-themes span{width:16px;height:.5px;background:var(--line)}.mobile-themes img{width:24px;height:24px}.intro{width:100%;margin-top:40px}.intro-line{height:124.5px;margin:0 24px;display:block}.intro h1{height:34px}.intro-line p{height:90px;display:flex;align-items:center;flex-wrap:wrap;line-height:28px}.filters{justify-content:flex-start;padding:0 24px;gap:40px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 25px}.work-card{gap:20px}.work-card h2{line-height:16px}.work-meta{gap:10px;line-height:24px}.gallery .work-card:nth-child(even){transform:translateY(0)}.pagination{width:100%;height:85px;padding:0 24px;margin-top:80px}.pagination>div:last-child{gap:20px}.site-footer{width:100%;min-height:309px;padding:40px 24px;display:flex;flex-direction:column;gap:40px}.footer-info{gap:40px}.contact{gap:10px}.contact p:nth-child(2){align-items:flex-start}.contact p:nth-child(2) span{display:block}.contact p:nth-child(2) span+span{margin-left:-209px;margin-top:24px}.copyright{gap:10px}.socials{order:-1;gap:29px}.detail-main{width:100%;margin-top:20px}.back-link{left:24px}.detail-content{height:auto;display:flex;flex-direction:column;gap:0;padding-top:36px}.detail-visual{order:-1;height:394px}.detail-visual img{width:calc(100% - 48px);max-width:none;max-height:345px}.detail-copy{padding:40px 24px 36px}.detail-copy h1{height:80px}.detail-copy>div{margin-top:20px;gap:20px}.detail-page .site-footer{margin-top:0}.detail-page .socials{order:0}:root[data-theme="dark"] .mobile-menu{background:rgba(17,17,17,.97)}}
@media (max-width:390px){.gallery{gap-inline:20px}.socials{gap:22px}.contact{font-size:15px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.gallery{gap:60px;margin-top:60px}.gallery-column{display:flex;flex-direction:column;gap:120px}
@media (min-width:721px) and (max-width:1300px){.gallery{gap:40px}.gallery-column{gap:88px}}
@media (max-width:720px){.gallery{gap:25px;margin-top:40px}.gallery-column{gap:40px}}
@media (max-width:720px){.detail-main{margin-top:0}.detail-copy{align-self:stretch}.detail-page .footer-info{display:contents}.detail-page .contact{order:0}.detail-page .socials{order:1}.detail-page .copyright{order:2}}
.external-arrow{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300}.artwork-image{display:block;position:relative;width:100%;isolation:isolate}.artwork-image img{display:block;width:100%;height:100%;object-fit:cover}.artwork-blur{position:absolute;inset:0;z-index:-1;opacity:0;filter:blur(25px);transition:opacity .28s ease,inset .28s ease}.artwork-main{position:relative;z-index:1}.desktop-nav a,.filters button,.intro-line a,.pagination button,.contact p span{transition:font-weight .18s ease,color .18s ease,opacity .18s ease}.socials img{opacity:.66;transition:opacity .2s ease,filter .2s ease,transform .2s ease}
@media (hover:hover) and (pointer:fine){.desktop-nav a:hover,.filters button:hover,.intro-line a:hover,.pagination button:not(:disabled):hover,.contact p:hover span{font-weight:500}.socials span:hover img{opacity:1;filter:brightness(.45);transform:translateY(-1px)}.work-card--featured{transition:transform .28s ease,width .28s ease,gap .28s ease}.work-card--featured:hover{width:calc(100% + 30px);transform:translateX(-15px);gap:20px}.work-card--featured:hover .artwork-image{padding:0 15px 30px}.work-card--featured:hover .artwork-blur{inset:5px 0 0;opacity:.6}.work-card--featured:hover h2,.work-card--featured:hover .work-meta{padding-inline:15px}}
:root[data-theme="dark"] .socials span:hover img{filter:invert(1) brightness(1.35)}
@media (max-width:720px),(hover:none){.work-card:hover .artwork-blur{opacity:0}}
.to-top,.external-arrow{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif}.intro-line a:hover .external-arrow{font-weight:600}.contact a{display:inline-block}.contact a:hover{font-weight:500}.theme-button img,.mobile-themes button img{opacity:.48;transition:opacity .18s ease,filter .18s ease}.theme-button:hover img,.mobile-themes button:hover img,:root[data-theme="light"] [data-theme="light"] img,:root[data-theme="dark"] [data-theme="dark"] img{opacity:1;filter:drop-shadow(.45px 0 0 #000) drop-shadow(-.45px 0 0 #000) drop-shadow(0 .45px 0 #000) drop-shadow(0 -.45px 0 #000)}:root[data-theme="dark"] .theme-button:hover img,:root[data-theme="dark"] .mobile-themes button:hover img,:root[data-theme="dark"] [data-theme="dark"] img{filter:invert(1) drop-shadow(.45px 0 0 #fff) drop-shadow(-.45px 0 0 #fff) drop-shadow(0 .45px 0 #fff) drop-shadow(0 -.45px 0 #fff)}
@media (hover:hover) and (pointer:fine){.work-card .artwork-image{transition:filter .28s ease}.work-card:hover .artwork-blur{inset:-15px;opacity:.6}.work-card:hover .artwork-main{transform:none}.work-card:hover h2,.work-card:hover .work-meta{padding:0}.work-card:hover{width:100%;transform:none;gap:40px}}
@media (max-width:720px){.contact p:nth-child(2) a{display:block}.contact p:nth-child(2) a+a{margin-left:-209px;margin-top:24px}.work-card:hover{gap:20px}}
.artwork-main{transition:transform .65s cubic-bezier(.22,.61,.36,1)}.artwork-blur{transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1),inset .65s ease}.contact a{font-weight:300;transition:color .2s ease,text-shadow .2s ease}.contact a:hover{font-weight:300;text-shadow:.35px 0 0 currentColor,-.35px 0 0 currentColor}
@media (hover:hover) and (pointer:fine){.work-card:hover .artwork-main{transform:translateY(-10px)}.work-card:hover .artwork-blur{inset:-15px;opacity:.6;transform:translateY(10px)}}
:root[data-theme="dark"] .theme-button[data-theme="light"] img,:root[data-theme="dark"] .mobile-themes button[data-theme="light"] img{opacity:.48;filter:invert(1)}:root[data-theme="light"] .theme-button[data-theme="dark"] img,:root[data-theme="light"] .mobile-themes button[data-theme="dark"] img{opacity:.48;filter:none}
.theme-button[data-theme="light"] img,.mobile-themes button[data-theme="light"] img{content:url("/assets/icons/sun-thin.svg")}.theme-button[data-theme="dark"] img,.mobile-themes button[data-theme="dark"] img{content:url("/assets/icons/moon.svg")}:root[data-theme="light"] [data-theme="light"] img,:root[data-theme="dark"] [data-theme="dark"] img,.theme-button:hover img,.mobile-themes button:hover img{opacity:1}:root[data-theme="light"] [data-theme="light"] img,.theme-button[data-theme="light"]:hover img,.mobile-themes button[data-theme="light"]:hover img{content:url("/assets/icons/sun.svg")}:root[data-theme="dark"] [data-theme="dark"] img,.theme-button[data-theme="dark"]:hover img,.mobile-themes button[data-theme="dark"]:hover img{content:url("/assets/icons/moon-bold.svg")}
@media (hover:hover) and (pointer:fine){.work-card:hover .artwork-blur{opacity:.68}}
.detail-visual{position:relative;overflow:hidden;cursor:grab;touch-action:none;user-select:none}.detail-visual.is-dragging{cursor:grabbing}.detail-visual img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;object-fit:contain;transform-origin:center;will-change:transform;pointer-events:none}
@media (max-width:720px){.detail-visual img{width:auto;max-width:none;max-height:none}}
.back-link{display:inline-flex;align-items:center;gap:5px;transition:font-weight .18s ease,text-shadow .18s ease}.back-arrow{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif}@media (hover:hover) and (pointer:fine){.back-link:hover{font-weight:500}.back-link:hover .back-arrow{font-weight:600}}
@media (max-width:720px){.site-header{position:sticky;top:0;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%)}.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;background:linear-gradient(to bottom,rgba(255,255,255,.28),transparent);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);pointer-events:none}.intro-line p{display:block;height:90px;line-height:28px}.intro-line p a{display:inline-flex;white-space:nowrap;align-items:baseline}.mobile-menu{z-index:19;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(26px) saturate(115%);backdrop-filter:blur(26px) saturate(115%)}.filters.is-docked{position:fixed;top:90px;left:0;width:100%;z-index:18;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .2s ease}.filters.is-docked::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none}.filters.is-docked.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}.intro.filters-docked{padding-bottom:90px}:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .filters.is-docked{background:rgba(17,17,17,.72)}:root[data-theme="dark"] .site-header::after,:root[data-theme="dark"] .filters.is-docked::after{background:linear-gradient(to bottom,rgba(17,17,17,.3),transparent)}:root[data-theme="dark"] .mobile-menu{background:rgba(17,17,17,.6)}}
@media (max-width:720px){body:has(.filters.is-docked.is-visible)::before{content:"";position:fixed;z-index:17;inset:0 0 auto;height:180px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);pointer-events:none}body:has(.filters.is-docked.is-visible) .site-header,body:has(.filters.is-docked.is-visible) .filters.is-docked{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}body:has(.filters.is-docked.is-visible) .site-header::after{display:none}.filters.is-docked{top:89px;padding-top:1px}.menu-open .site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.menu-open .site-header::after{display:none}.site-footer .footer-info{display:contents}.site-footer .contact{order:0}.site-footer .socials{order:1}.site-footer .copyright{order:2}.site-footer{gap:40px}.socials img{opacity:.58}:root[data-theme="dark"] body:has(.filters.is-docked.is-visible)::before{background:rgba(17,17,17,.72)}}
@media (hover:hover) and (pointer:fine){.socials span:hover img{opacity:1;filter:brightness(.25);transform:translateY(-1px)}:root[data-theme="dark"] .socials span:hover img{filter:invert(1) brightness(1.5)}}
@media (max-width:720px){.intro-line{height:134.5px}.intro h1{margin-bottom:10px}.site-header{transition:background-color .2s ease,-webkit-backdrop-filter .2s ease,backdrop-filter .2s ease}body::before{content:"";position:fixed;z-index:17;inset:0 0 auto;height:180px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);opacity:0;transform:translateY(-50%);transition:transform .28s ease,opacity .2s ease;pointer-events:none}body:has(.filters.is-docked.is-visible)::before{opacity:1;transform:translateY(0)}.filters.is-docked{transition:transform .28s ease,opacity .2s ease}.mobile-menu nav>a{transition:font-weight .18s ease,text-shadow .18s ease}.mobile-menu nav>a.active{font-weight:500}:root[data-theme="dark"] body::before{background:rgba(17,17,17,.72)}:root[data-theme="dark"] body.menu-open .site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}:root[data-theme="dark"] body.menu-open .site-header::after{display:none}}
@media (hover:hover) and (pointer:fine){.mobile-menu nav>a:hover{font-weight:500}}
@media (max-width:720px){.filters{cursor:grab;touch-action:pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.filters.is-dragging{cursor:grabbing}.filters button{user-select:none}}
@media (max-width:720px){.detail-main{margin-top:20px}}
@media (min-width:721px) and (max-width:840px){.intro-line{height:110px;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px}.intro-line h1,.intro-line p{white-space:nowrap}.intro-line p{width:100%}}
.detail-copy{display:flex;flex-direction:column;justify-content:center}.detail-meta{width:100%}.work-description{max-width:390px;line-height:24px;white-space:pre-line;overflow-wrap:anywhere}
.work-card img,.detail-visual img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.work-card.will-reveal{opacity:0;translate:0 20px;transition:opacity .65s ease var(--reveal-delay,0ms),translate .8s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms)}.work-card.will-reveal.is-revealed{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.work-card.will-reveal{opacity:1;translate:none}}
@media (max-width:720px){.work-description{max-width:none}}
.contact-emails{display:flex;flex-wrap:wrap;gap:0 12px;min-width:0}
.contact .contact-emails a{margin:0;overflow-wrap:anywhere}
@media(max-width:720px){.contact p{min-width:0}.contact strong{flex-shrink:0}.contact p:nth-child(2) .contact-emails{display:flex;flex-direction:column;gap:0;min-width:0}.contact p:nth-child(2) .contact-emails a+a{margin:0}}