/* A portfolio opening built from the designer's own work. */
:root{--accent:#e8c994;--ink:#f8f4eb;--muted:#bbcad5}
body{background:#101e2c}
.page-fireworks{display:none}
.hero-night{background:#102231;overflow:hidden;isolation:isolate}
.hero-night:before{background:linear-gradient(90deg,#102231aa,transparent 72%);z-index:0}
.hero-night:after{background:linear-gradient(0deg,#101e2c,transparent 24%);z-index:0}
.hero-landscape{position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;background:radial-gradient(ellipse at 76% 37%,#759aab55,transparent 39%),radial-gradient(ellipse at 19% 70%,#5c897631,transparent 43%),conic-gradient(from 215deg at 72% 36%,transparent 0deg,#d8e7ea0c 24deg,transparent 55deg);animation:studio-light 24s ease-in-out infinite alternate;opacity:1;object-fit:unset}
@keyframes studio-light{to{transform:translate3d(-2%,3%,0) rotate(4deg)}}
.hero-night .hero{min-height:820px;min-height:max(820px,100svh);padding-top:130px;grid-template-columns:1.02fr 1fr;gap:0 45px;position:relative;z-index:1}
.hero-night .hero-copy{padding-bottom:38px;z-index:3}
.hero-night .hero-headline{font-size:clamp(56px,5.7vw,86px);line-height:1.24;letter-spacing:-.025em}
.hero-night .hero-description{color:#d1dde5;font-size:14px;max-width:470px}
.hero-night .hero-copy>.eyebrow{color:#b7d9e2}
.hero-cta{color:#f5d6a0}.hero-cta b{background:#e6c995;color:#172837;border:0}
.hero-art{position:relative;align-self:center;height:590px;margin:20px -20px 25px 0;isolation:isolate}
.hero-art:before{content:'';position:absolute;inset:7% 2% 10%;border:1px solid #d5e6ee2b;border-radius:50%;transform:rotate(-20deg)}
.hero-art:after{content:'';position:absolute;width:70%;height:22%;left:18%;bottom:4%;background:#0006;filter:blur(35px);z-index:-1}
.hero-print{position:absolute;display:block;overflow:hidden;box-shadow:0 30px 65px #040e1b65;border:1px solid #e5eef65c;border-radius:3px;transition:transform .6s ease}
.hero-print img{display:block;width:100%;height:100%;object-fit:cover}
.hero-print-one{width:55%;height:83%;left:24%;top:2%;z-index:3;transform:rotate(6deg)}
.hero-print-two{width:39%;height:62%;left:-3%;top:20%;z-index:2;transform:rotate(-12deg)}
.hero-print-three{width:37%;height:62%;right:-7%;top:24%;z-index:1;transform:rotate(13deg)}
.hero-art:hover .hero-print-one{transform:translateY(-7px) rotate(4deg)}
.hero-art-label{position:absolute;left:3%;bottom:2%;right:0;display:flex;align-items:center;justify-content:space-between;color:#d2e2ea;font:10px/1.7 var(--sans);letter-spacing:.14em}
.hero-art-label span:last-child{color:#e3c596;font-family:var(--serif);letter-spacing:.07em}
.hero-night .hero-bottom{grid-column:1/-1;color:#b5c7d5}

/* The portrait shares the site navy, lifted by a soft blue light. */
.personal-intro{background:#101e2c;color:#f2f0e9;margin-top:0;border:0}
.personal-intro:before{inset:0;background:radial-gradient(ellipse at 76% 41%,#52778d55,transparent 58%),radial-gradient(ellipse at 24% 53%,#31596630,transparent 57%);mask-image:linear-gradient(transparent,#000 16%,#000 79%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 79%,transparent)}
.personal-intro .refine-ambient{opacity:.35}
.intro-layout{min-height:760px;padding-top:77px;padding-bottom:30px}
.intro-wordmark{top:55px;height:135px;opacity:.8}
.intro-wordmark text{fill:#638699}
.intro-copy{width:49%;padding:150px 0 45px;max-width:560px}
.intro-greeting,.intro-name,.intro-name>span{color:#e8f0f2}.intro-name{font-size:30px}
.intro-kicker{color:#9cb9c9}
.intro-role{color:#f7f3eb;font-size:clamp(42px,4.4vw,59px);margin-top:25px}
.intro-role>span{color:#9fc8d7}
.intro-experience{color:#e4c998;border-block:1px solid #a3c3d330;padding-block:15px;margin-block:24px 20px;width:fit-content}
.intro-bio{color:#c0d0da;font-size:14px;line-height:2.05}
.intro-skills{color:#adc7d6}.intro-skills>span+span:before{color:#6d8b9d}
.intro-actions>a:first-child{background:#e4c998;border-color:#e4c998;color:#142b3b;box-shadow:0 9px 22px #00000018}
.intro-actions>a:first-child:hover{background:#f0dcba;color:#142b3b;border-color:#f0dcba}
.intro-actions>a:last-child,.intro-actions>a:last-child:hover{color:#bdd4df}
.intro-portrait{top:117px;right:25px;width:49%;height:calc(100% - 183px);max-width:605px}
.intro-portrait:before{content:'';position:absolute;inset:15% 2% 7%;border-radius:48% 48% 5% 5%;background:radial-gradient(ellipse at 50% 40%,#8bb0c026,transparent 72%);z-index:-1}
.intro-caption{color:#9cb6c5;bottom:-4px}.intro-caption>span:last-child{color:#b4cbd7}
.intro-bottom{color:#9db7c7;border-top:1px solid #7191a52b;padding-top:19px}.intro-bottom>a,.intro-bottom>a>span{color:#d4c19f}
.section-heading h2,.about h2{color:#f5f1e9}.section-heading h2 em{color:#acd0da}
.section-heading>p,.project-description,.about-body>p:not(.about-statement){color:#b9cad5}
.section-heading .eyebrow,.gallery-heading>span{color:#b6d6de}
.project-lead{color:#e1e9eb}.feature-caption h3{color:#f8f1e5}
.featured-grid{gap:48px 36px}.cinema-card{border-color:#c8dce13d;box-shadow:0 20px 60px #020b1619}
.poster-image{box-shadow:0 14px 32px #020a1629}.poster-meta strong{color:#e9f0f3}
.gallery-card{border-color:#bfd5dc35}.contact-grid{border-color:#bed3dc36}
.contact-title h2 em{color:#b6d6df}

@media(min-width:1600px){.intro-layout{min-height:850px}.intro-wordmark{height:170px}.intro-copy{padding-top:190px}.intro-portrait{top:140px;height:calc(100% - 210px)}}
@media(max-width:1100px){.hero-night .hero{gap:0 26px;grid-template-columns:1fr 1fr}.hero-art{height:470px;margin-right:0}.hero-night .hero-headline{font-size:clamp(50px,6.1vw,68px)}.hero-print-three{right:-3%}.intro-layout{min-height:760px}.intro-copy{padding-top:130px}.intro-wordmark{height:115px}.intro-portrait{top:153px;height:calc(100% - 210px)}.intro-bio{font-size:13px}.intro-role{font-size:43px}}
@media(max-width:720px){
 .hero-night .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:125px;min-height:0;gap:0}
 .hero-night .hero-copy{padding-bottom:0;max-width:550px}.hero-night .hero-headline{font-size:clamp(52px,11.7vw,74px);margin-block:24px}.hero-night .hero-description{font-size:13px;line-height:2}
 .hero-art{width:89%;max-width:450px;height:auto;aspect-ratio:.96;justify-self:center;margin:42px 0 18px}
 .hero-print-one{left:24%;height:84%}.hero-print-two{left:-4%;top:18%}.hero-print-three{right:-7%;top:23%}.hero-art-label{left:-3%;bottom:0;font-size:8px}.hero-art-label span:last-child{font-size:11px}
 .hero-night .hero-bottom{margin-top:18px;font-size:8px;padding-block:23px}
 .personal-intro{margin-top:0}.intro-layout{min-height:0;padding-top:50px;padding-bottom:26px}.intro-wordmark{top:39px;height:auto;aspect-ratio:5;opacity:1}
 .intro-portrait{position:relative;top:auto;right:auto;width:95%;max-width:470px;height:auto;margin:5px auto -35px}.intro-portrait:before{inset:16% 0 12%}
 .intro-copy{width:100%;max-width:520px;padding:0 0 34px;align-self:center}.intro-greeting{font-size:18px}.intro-name{font-size:28px}.intro-role{font-size:39px;margin-top:23px}.intro-experience{font-size:15px}.intro-bio{font-size:14px}.intro-skills{font-size:10px}.intro-actions>a{font-size:12px}.intro-bottom{font-size:9px}
 .intro-caption{display:none}
}
@media(max-width:360px){.hero-night .hero-headline{font-size:49px}.hero-art{width:88%;margin-top:36px}.hero-art-label{font-size:7px}.hero-art-label span:last-child{font-size:9px}.intro-role{font-size:35px}.intro-bio{font-size:13px}.intro-experience{font-size:13px}.intro-bottom{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-landscape{animation:none}.hero-print{transition:none}}

/* Name, role and biography read as one compact identity block. */
.intro-layout{min-height:730px;padding-top:76px;padding-bottom:30px}
.intro-copy{padding-top:65px;padding-bottom:44px}
.intro-kicker{display:flex;align-items:center;gap:12px;margin-top:9px;font-size:10px;letter-spacing:.2em;color:#a6c3d2}
.intro-kicker:before{content:'';width:27px;height:1px;background:#91b1bf80}
.intro-portrait{top:70px;height:calc(100% - 134px)}
.personal-intro .refine-ambient{opacity:.92}
.studio-contours{position:absolute;inset:-5%;width:110%;height:110%;fill:none;stroke:#a6c6d3;stroke-width:.7;opacity:.19;animation:contour-drift 28s ease-in-out infinite alternate;animation-play-state:paused}
.studio-contours path:nth-child(2){opacity:.42}.studio-contours path:nth-child(3){opacity:.23}.studio-contours path:last-child{stroke:#e5c89b;opacity:.56}
.studio-float{position:absolute;display:block;border:1px solid #c5e5ed38;border-radius:50%;background:radial-gradient(circle at 28% 24%,#d9f2f521,transparent 53%),linear-gradient(135deg,#7ca5b208,transparent 63%);box-shadow:inset 1px 1px 5px #d9edf20d;animation:glass-drift 21s ease-in-out infinite alternate;animation-play-state:paused}
.studio-float-1{width:74px;height:74px;left:6%;top:13%;opacity:.65}
.studio-float-2{width:38px;height:38px;right:8%;top:69%;opacity:.5;animation-delay:-9s;animation-duration:26s}
.personal-intro .studio-contours{opacity:.31}
.personal-intro .studio-float-1{left:49%;top:21%;width:62px;height:62px}
.personal-intro .studio-float-2{right:5%;top:72%;width:36px;height:36px}
.ambient-visible>.refine-ambient .studio-contours,.ambient-visible>.refine-ambient .studio-float{animation-play-state:running}
.motion-paused .studio-contours,.motion-paused .studio-float{animation-play-state:paused!important}
@keyframes contour-drift{to{transform:translate3d(2%,-2%,0) rotate(3deg)}}
@keyframes glass-drift{to{transform:translate3d(16px,-28px,0) rotate(12deg)}}
@media(hover:hover) and (pointer:fine){
 html,body,body a,body button,body summary,body [role=button],body label,body canvas,body .poster-card{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%0A%20%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22metal%22%20x1%3D%2214%22%20y1%3D%2217%22%20x2%3D%2239%22%20y2%3D%2238%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff9de%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23becacf%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23f9faf4%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%238b999d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d7c3a4%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3CradialGradient%20id%3D%22light%22%3E%3Cstop%20stop-color%3D%22%23fffef6%22%2F%3E%3Cstop%20offset%3D%22.12%22%20stop-color%3D%22%23fff5d0%22%20stop-opacity%3D%22.95%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23ffdf94%22%20stop-opacity%3D%22.45%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f1c883%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22spark%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%23fff2c5%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe6a3%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%3C%2Fdefs%3E%0A%20%3Cpath%20d%3D%22M14%2014L39%2040%22%20stroke%3D%22%2304111d%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%3Cpath%20d%3D%22M14%2014L39%2040%22%20stroke%3D%22url%28%23metal%29%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%3Cpath%20d%3D%22M17%2017L34%2035%22%20stroke%3D%22%23fffef1%22%20stroke-opacity%3D%22.7%22%20stroke-width%3D%22.45%22%2F%3E%0A%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22url%28%23light%29%22%2F%3E%0A%20%3Cpath%20d%3D%22M12%204V20M4%2012H20%22%20stroke%3D%22%23fff6d8%22%20stroke-width%3D%22.55%22%20stroke-opacity%3D%22.68%22%2F%3E%0A%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.65%22%20fill%3D%22%23fffef8%22%2F%3E%0A%20%3Ccircle%20cx%3D%2223%22%20cy%3D%227%22%20r%3D%222.4%22%20fill%3D%22url%28%23spark%29%22%2F%3E%0A%20%3Ccircle%20cx%3D%225%22%20cy%3D%2224%22%20r%3D%221.5%22%20fill%3D%22url%28%23spark%29%22%2F%3E%0A%3C%2Fsvg%3E%0A") 12 12,auto}
 body input,body textarea,body [contenteditable=true]{cursor:text}
}
@media(min-width:1600px){.intro-layout{min-height:820px}.intro-copy{padding-top:92px}.intro-portrait{top:85px;height:calc(100% - 150px)}}
@media(min-width:721px) and (max-width:1100px){.intro-layout{min-height:715px;padding-top:64px}.intro-copy{padding-top:70px}.intro-portrait{top:120px;height:calc(100% - 170px)}}
@media(max-width:720px){
 .intro-layout{min-height:0;padding-top:35px;padding-bottom:27px}
 .intro-portrait{top:auto;height:auto;margin:0 auto -26px;width:91%;max-width:435px}
 .intro-copy{padding:0 0 32px}.intro-kicker{font-size:9px;letter-spacing:.18em}
 .personal-intro .studio-contours{opacity:.25;width:180%;left:-40%}
 .personal-intro .studio-float-1{left:7%;top:26%;width:39px;height:39px}
 .studio-float-1{width:42px;height:42px}.studio-float-2{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){.studio-contours,.studio-float{animation:none!important}}

/* Let the prototypes share the page background without a dark pedestal. */
.project-device{background:transparent;box-shadow:none}
.project-device .device-orbit{display:none}
.project-device .phone-shell{box-shadow:0 10px 24px #02070d14,inset 0 0 0 1px #c8ccd16b}
@media(max-width:760px){
 .project-device .phone-shell{box-shadow:inset 0 0 0 1px #c8ccd16b}
}

/* Keep image tops aligned even when a caption wraps onto a second line. */
.poster-grid{align-items:start}
/* A closer framing of the existing artwork, inside the unchanged card. */
.poster-card[data-title="鉴宝风云之翡翠"] .poster-image img{transform:scale(1.1);transform-origin:50% 50%}
.poster-card[data-title="鉴宝风云之翡翠"]:hover .poster-image img{transform:scale(1.12)}
/* Compact the mobile teaser only; the desktop composition stays as it is. */
@media(max-width:600px){
 .cinema-card{height:354px}
 .cinema-strip{top:194px}
}