:root{--paper:#f7f5ef;--ink:#171916;--muted:#61625d;--accent:#b93e28;--rule:#d88873;--font:"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;color-scheme:light;font-family:var(--font);background:var(--paper);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 10% 35%,#fffaf833,transparent 60%),var(--paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{cursor:pointer}.page{max-width:1536px;margin:auto;padding:0 46px}.masthead{min-height:99px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:30px}.masthead h1{font-size:52px;line-height:1.2;font-weight:700;letter-spacing:-2px;margin:0}.masthead p{margin:0;font-size:21px;color:var(--accent);font-weight:500}.layout{display:grid;grid-template-columns:313px minmax(0,1fr);gap:55px;padding:48px 0 27px}.about{border-right:1px solid #dfb6a8;padding-right:27px;display:flex;flex-direction:column;min-width:0}.section-heading .number{display:flex;align-items:center;gap:14px;color:var(--accent);font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums}.number:after{content:"";display:block;width:46px;height:1px;background:var(--accent)}.section-heading h2{margin:15px 0 0;font-size:32px;line-height:1.3;font-weight:700;letter-spacing:-.6px}.bio{margin-top:67px;font-size:19px;line-height:1.75;color:#444642}.bio p{margin:0 0 43px}.contact-links{display:flex;gap:42px;margin-top:auto;padding-top:100px;font-size:17px}.contact-links a{display:inline-flex;gap:10px;align-items:center;min-height:44px}.contact-links span{color:var(--accent);font-size:23px}.contact-links a:hover{color:var(--accent)}.gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.image-note{font-size:13px;color:var(--muted);margin:0 0 2px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 23px}.project{min-width:0;border-bottom:1px solid var(--rule)}.project:nth-last-child(-n+2){border-bottom:0}.project-link{border:0;background:none;padding:0;width:100%;text-align:left;display:block;padding-bottom:18px}.cover{aspect-ratio:16/9;overflow:hidden;position:relative;background:#e1ded5}.cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}.play{position:absolute;right:19px;bottom:17px;display:grid;place-items:center;width:36px;height:36px;border:2px solid #fff;border-radius:50%;color:#fff;background:#181b1960;font-size:16px;padding-left:2px;transition:background .2s,transform .2s}.project-link:hover .cover img{transform:scale(1.025)}.project-link:hover .play{background:var(--accent);transform:scale(1.07)}.project h3{font-size:25px;line-height:1.35;margin:13px 0 6px;font-weight:700;letter-spacing:-.4px}.project p{font-size:16px;line-height:1.6;color:#555751;margin:0}footer{border-top:1px solid var(--rule);padding:17px 0 25px;color:#777971;font-size:14px}dialog{width:min(660px,calc(100% - 32px));max-height:90dvh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid #ddcfc1;padding:0;box-shadow:0 24px 90px #17191633}dialog::backdrop{background:#1517139c;backdrop-filter:blur(4px)}.dialog-inner{padding:30px;position:relative}.close{position:absolute;z-index:1;right:38px;top:38px;border:0;border-radius:50%;background:var(--paper);font-size:29px;line-height:1;width:44px;height:44px}.dialog-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.dialog-kicker{font-size:13px;color:var(--accent);margin:27px 0 9px}dialog h2{font-size:29px;margin:0 0 10px;line-height:1.4}.dialog-role{color:var(--muted);font-size:14px}#dialog-description{line-height:1.9;font-size:16px;margin:22px 0}.availability{font-size:14px;color:var(--muted);line-height:1.7}.action{display:inline-flex;align-items:center;gap:18px;min-height:44px;border-bottom:1px solid var(--accent);color:var(--accent);margin-top:5px}.dialog-note{font-size:12px;color:var(--muted);margin-bottom:0;margin-top:25px}.skip{position:absolute;top:-100px;background:var(--paper);padding:12px;z-index:5}.skip:focus{top:5px}body.dialog-open{overflow:hidden}@media(min-width:1450px){.page{padding:0 48px}.layout{grid-template-columns:315px minmax(0,1fr)}}@media(max-width:1100px){.page{padding:0 30px}.masthead h1{font-size:43px}.masthead p{font-size:17px}.layout{grid-template-columns:245px minmax(0,1fr);gap:30px}.about{padding-right:23px}.bio{font-size:16px;margin-top:54px}.section-heading h2{font-size:28px}.project h3{font-size:21px}.project p{font-size:13px}.contact-links{gap:22px;font-size:15px}.image-note{font-size:11px}.play{width:31px;height:31px;right:12px;bottom:12px}}@media(max-width:720px){.page{padding:0 22px}.masthead{min-height:105px;display:block;padding:23px 0 20px}.masthead h1{font-size:34px;letter-spacing:-1px}.masthead p{font-size:14px;margin-top:9px}.layout{display:flex;flex-direction:column;gap:40px;padding:32px 0 23px}.works{order:0}.about{order:1;border-right:0;border-top:1px solid #dfb6a8;padding:30px 0 0}.section-heading .number{font-size:16px}.section-heading h2{font-size:25px;margin-top:10px}.gallery-heading{margin-bottom:22px;gap:8px}.gallery{gap:21px 16px}.project h3{font-size:17px;margin-top:10px;letter-spacing:0}.project p{font-size:12px;line-height:1.7}.project-link{padding-bottom:14px}.image-note{font-size:10px}.play{height:27px;width:27px;font-size:11px;right:8px;bottom:8px;border-width:1.5px}.bio{margin-top:26px;font-size:16px;max-width:43ch;line-height:1.9}.bio p{margin:0 0 20px}.contact-links{padding-top:6px;margin-top:0;gap:32px;font-size:15px}.dialog-inner{padding:22px}.close{right:29px;top:29px}footer{font-size:12px}}@media(max-width:430px){.gallery{grid-template-columns:1fr}.project:nth-last-child(2){border-bottom:1px solid var(--rule)}.project h3{font-size:21px}.project p{font-size:14px}.play{height:34px;width:34px;font-size:15px;right:13px;bottom:13px}.gallery-heading{margin-bottom:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

[hidden]{display:none!important}#dialog-video{width:100%;max-height:60dvh;aspect-ratio:16/9;object-fit:contain;background:#111;display:block}dialog:has(#dialog-video:not([hidden])){width:min(960px,calc(100% - 32px))}
