:root{--ink:#080908;--gold:#b7a18a;--light:#d4c8b4;--muted:#a99c89;--line:rgba(185,165,136,.62);--teal:#315b5b;--inner:1510px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#090a09 url('视觉稿/作品集背景图.jpg') center top / 100% auto repeat-y;color:var(--light);font-family:'PortfolioSong','PortfolioSong','PortfolioSong',serif;letter-spacing:.055em}
body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.13);pointer-events:none;z-index:-1}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
img{object-fit:cover}
figure{margin:0}
h1,h2,h3,p{margin-top:0}
p{line-height:1.72}
button,a,video{outline-offset:4px}
:focus-visible{outline:2px solid #e6d0a8!important}
::selection{background:#807252;color:#fff}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(20px,4vw,70px);font-size:12px;background:linear-gradient(#080908df,#08090800);color:#d9c9b2;letter-spacing:.12em}
.site-header .brand{font-weight:700}.site-header .brand span{font-weight:400;font-size:10px;color:#aa9982}
.site-header nav{display:flex;gap:clamp(16px,2.8vw,42px)}
.site-header nav a{border-bottom:1px solid transparent;padding:5px 0;transition:color .2s,border-color .2s}
.site-header nav a:hover,.site-header nav a.active{color:#f2dfbd;border-color:#bda481}
.page-section{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;scroll-margin-top:40px}
.section-inner{width:min(calc(100% - 9vw),var(--inner));margin-inline:auto}
.section-title{text-align:center;color:#9e8b71;font-size:clamp(40px,4.2vw,70px);font-weight:700;letter-spacing:.15em;line-height:1.2;margin:0 0 clamp(36px,4vw,70px);text-shadow:0 1px 5px #000}
.hero{background:#090a09 url('视觉稿/首页图无字.jpg') center center / cover no-repeat;overflow:hidden;align-items:flex-start}
.hero-content{width:min(100%,1672px);margin:auto;position:relative;min-height:100vh;min-height:100svh}
.hero h1{position:absolute;top:17%;right:3.4%;text-align:right;font-size:clamp(36px,4.3vw,78px);line-height:1.05;color:#d0b396;letter-spacing:.12em;font-weight:700;text-shadow:0 1px 2px #21150e}
.hero h1 span{display:block;font-size:1.04em;letter-spacing:.05em;color:#ac9c8b;font-family:Georgia,serif}
.hero-links{position:absolute;top:31%;left:19%;display:flex;align-items:flex-start;gap:clamp(35px,5.4vw,112px)}
.hero-links a{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:clamp(22px,2.25vw,38px);color:#a79482;text-shadow:0 1px 3px #000;transition:transform .25s,color .25s}
.hero-links a:nth-child(2){transform:translateY(-55px)}
.hero-links a:nth-child(3){transform:translateY(24px)}
.hero-links a:hover,.hero-links a:focus-visible{transform:scale(1.14)}
.hero-links a:nth-child(2):hover,.hero-links a:nth-child(2):focus-visible{transform:translateY(-55px) scale(1.14)}
.hero-links a:nth-child(3):hover,.hero-links a:nth-child(3):focus-visible{transform:translateY(24px) scale(1.14)}
.hero-links span{font-size:.9em}.hero-links strong{font-weight:500;writing-mode:vertical-rl;letter-spacing:.23em}
.scroll-hint{position:absolute;bottom:4%;right:4%;font-size:12px;letter-spacing:.25em;color:#d4c1a3}.scroll-hint span{font-size:22px;vertical-align:middle}
.about{padding:100px 0 70px}.about-layout{display:grid;grid-template-columns:45% 55%;gap:2%;align-items:center}
.portrait-composition{height:min(52vw,640px);min-height:460px;position:relative}
.portrait-bar{position:absolute;background:rgba(34,91,91,.78);box-shadow:inset 0 0 60px #07191878}
.portrait-bar-tall{width:18%;height:80%;left:12%;top:7%}.portrait-bar-wide{width:55%;height:42%;left:34%;top:36%}
.portrait{position:absolute;width:36%;height:49%;left:45%;top:15%;object-position:center 22%;z-index:1}
.portrait-leaf{position:absolute;left:21%;top:61%;width:27%;height:19%;object-fit:contain;z-index:2;opacity:.85;transform:rotate(-25deg);mix-blend-mode:screen}
.portrait-composition h2{position:absolute;left:47%;top:76%;z-index:2;font-size:clamp(34px,3.6vw,65px);font-weight:500;color:#baa387;letter-spacing:.12em}
.framed-copy{border:1px solid var(--line);padding:clamp(22px,2.4vw,42px);background:rgba(8,8,7,.12)}
.about-copy{font-size:clamp(15px,1.22vw,20px);line-height:1.75}
.about-copy p{text-align:justify;text-indent:2em;margin:0 0 .35em}.about-copy p:last-child{margin-bottom:0}
.contact-line{display:flex;justify-content:space-between;gap:15px;font-size:.82em;white-space:nowrap;margin-bottom:2.1em;letter-spacing:.05em}
.contact-line a:hover{text-decoration:underline}
.project{padding:100px 0 80px}.project-layout{display:grid;grid-template-columns:35% 1fr;gap:5%;align-items:center}
.media-frame{border:1px solid var(--line);box-shadow:-24px 28px 0 rgba(94,76,61,.45)}
.overview-feature video{width:100%;aspect-ratio:688/1222;object-fit:cover;background:#050606}
.overview-content h2{font-size:clamp(37px,4.1vw,72px);letter-spacing:.12em;color:#9c896c;margin:0 0 14px;line-height:1.2;text-align:right}
.overview-content h3{font-size:clamp(21px,2vw,33px);font-weight:500;margin:0 0 16px}
.journey-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8vw;margin-bottom:26px}
.journey-grid img{width:100%;aspect-ratio:777/1389;object-fit:cover;border:1px solid var(--line)}
.journey-grid figcaption{font-size:clamp(11px,.88vw,15px);line-height:1.46;margin-top:8px}.journey-grid b{display:block;text-align:center;font-size:1.25em;font-weight:500;color:#d2baa0;margin-bottom:6px}
.journey-grid span{display:block}
.overview-notes{font-size:clamp(12px,1.02vw,16px);line-height:1.55;padding:22px 30px}.overview-notes p{line-height:1.52;margin:0 0 5px}.overview-notes p:first-child{margin-bottom:19px;font-size:1.12em}.overview-notes b{color:#ddc8a9;font-weight:500}
.moodboard{padding:95px 0 90px}.moodboard-layout{display:flow-root;min-height:610px}
.moodboard-collage{position:relative;float:left;width:60%;height:610px;isolation:isolate;shape-outside:polygon(0 0,65% 0,65% 15%,82% 15%,82% 38%,93% 38%,93% 64%,86% 64%,86% 100%,0 100%);margin-right:2%}
.mood{position:absolute;filter:grayscale(1) contrast(1.06) brightness(.82);border:1px solid #8b7757;box-shadow:0 8px 25px #0008}
.m1{left:1%;top:18%;width:43%;height:31%}.m2{left:11%;top:49%;width:27%;height:45%}.m3{left:38%;top:17%;width:29%;height:34%}.m4{left:34%;top:55%;width:17%;height:29%}.m5{left:35%;top:0;width:20%;height:60%;object-position:top;filter:grayscale(1) invert(1) sepia(.7) brightness(.7);mix-blend-mode:screen;border:0;box-shadow:none}
.m6{left:70%;top:52%;width:18%;height:43%;mix-blend-mode:screen}.m7{left:77%;top:45%;width:17%;height:51%;transform:rotate(5deg)}.m8{left:56%;top:43%;width:26%;height:35%;filter:grayscale(1)}.m9{left:62%;top:14%;width:20%;height:27%}.m10{left:40%;top:56%;width:38%;height:37%;object-fit:cover;border-radius:50%;transform:rotate(-12deg);filter:grayscale(1) sepia(.3)}
.moodboard-copy{padding-top:60px;font-size:clamp(15px,1.15vw,19px);text-align:justify}
.moodboard-copy p{text-indent:2em;margin-bottom:1em}.moodboard-copy .quote{font-size:1.14em;color:#bfae94;line-height:1.85;text-indent:0;margin-bottom:2em}
.visual-process{padding:90px 0 100px}.visual-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,38px)}
.visual-stage{display:flex;flex-direction:column;min-width:0}.stage-images{height:clamp(430px,38vw,630px);background:rgba(75,64,48,.38);padding:12px;display:grid;gap:10px;align-content:stretch}
.stage-images img{width:100%;height:100%;min-height:0;object-fit:cover}.four-images{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.three-images{grid-template-rows:repeat(3,minmax(0,1fr));padding:0;background:none}.three-images img{object-fit:cover}.final-image{display:block;padding:0;background:none}
.stage-copy{position:relative;padding-top:35px;text-align:center;flex:1}.stage-copy::before{content:'';position:absolute;top:0;left:50%;height:24px;border-left:1px solid var(--line)}
.stage-copy h3{font-size:clamp(15px,1.25vw,20px);font-weight:500;line-height:1.4;color:#d2baa0;margin:0 0 7px}.stage-copy p{font-size:clamp(12px,.95vw,16px);line-height:1.6;text-align:justify;margin:0}
.modeling{padding:90px 0 110px}.modeling-layout{display:grid;grid-template-columns:minmax(0,1fr) 23%;gap:4%}.modeling-intro{max-width:780px;margin-bottom:20px}.modeling-intro h3{font-size:clamp(20px,1.9vw,31px);font-weight:500;color:#c7ae8e;margin-bottom:15px}.modeling-intro h3 span{font-weight:400;margin-left:14px}.modeling-intro p{font-size:clamp(14px,1.12vw,18px);line-height:1.7;text-align:justify;max-width:690px}
.model-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5vw}.model-item{position:relative;min-width:0}.model-item video{width:100%;aspect-ratio:480/560;object-fit:cover;mix-blend-mode:screen}.model-item figcaption{text-align:center;color:#c8b395;margin-top:-4px;margin-bottom:10px;font-size:clamp(13px,1.1vw,18px)}
.model-process{padding-top:30px}.model-process h3{font-size:clamp(20px,1.65vw,27px);font-weight:500;margin-bottom:24px;color:#c5ad8c}.model-process figure{margin-bottom:23px}.model-process img{width:100%;aspect-ratio:1.25;object-fit:cover;filter:grayscale(.45)}.model-process figcaption{text-align:center;font-size:clamp(12px,.9vw,15px);margin-top:7px;color:#b6a38e}
.interaction{padding:90px 0 110px}.interaction-layout{display:grid;grid-template-columns:.75fr repeat(3,1fr);gap:2.4vw;align-items:start}.interaction-notes article{margin-bottom:20px}.interaction-notes article img{width:100%;aspect-ratio:1.45;object-fit:cover}.interaction h3{font-size:clamp(18px,1.65vw,28px);font-weight:500;color:#c9b08d;text-align:center;margin:8px 0}.interaction p{font-size:clamp(12px,1vw,17px);line-height:1.55;text-align:justify}.interaction-notes .tool-note{border:1px solid var(--line);padding:14px;font-size:clamp(11px,.92vw,15px);color:#c7b59c}.interaction-video video{width:100%;aspect-ratio:688/1222;object-fit:cover;background:#050606}.interaction-video p{margin-top:14px}
.placeholder{min-height:78vh;min-height:78svh;text-align:center;justify-content:center}.placeholder-content{padding:50px 20px}.placeholder-content span{font-size:15px;color:#a39076;letter-spacing:.3em}.placeholder h2{font-size:clamp(48px,6vw,95px);color:#aa9476;margin:12px 0}.placeholder p{font-size:18px;color:#bfb19c}.placeholder a{display:inline-block;border-bottom:1px solid var(--line);padding:8px;margin-top:30px;font-size:14px}
@media (max-width:1100px){.section-inner{width:min(calc(100% - 7vw),var(--inner))}.page-section{min-height:auto}.hero,.hero-content{min-height:100svh}.about-layout{grid-template-columns:40% 58%}.portrait-composition{min-height:400px}.about-copy{font-size:14px}.contact-line{white-space:normal;flex-wrap:wrap;margin-bottom:1.3em}.project-layout{grid-template-columns:35% 1fr;gap:3%}.journey-grid{gap:9px}.overview-content h2{font-size:44px}.moodboard-collage{height:520px}.visual-stages{gap:15px}.stage-images{height:440px}.interaction-layout{gap:12px}}
@media (max-width:760px){body{background-size:auto 100vh;background-repeat:repeat}.site-header{padding:12px 16px;font-size:11px}.site-header .brand span{display:none}.site-header nav{gap:11px}.page-section{scroll-margin-top:42px}.section-inner{width:calc(100% - 34px)}.section-title{font-size:38px;margin-bottom:26px}.hero{background-position:44% center}.hero h1{top:16%;right:5%;font-size:clamp(32px,9vw,54px)}.hero-links{top:36%;left:12%;gap:9vw}.hero-links a{font-size:clamp(20px,5.2vw,28px)}.hero-links a:nth-child(2){transform:translateY(-28px)}.hero-links a:nth-child(3){transform:translateY(16px)}.hero-links a:nth-child(2):hover,.hero-links a:nth-child(2):focus-visible{transform:translateY(-28px) scale(1.12)}.hero-links a:nth-child(3):hover,.hero-links a:nth-child(3):focus-visible{transform:translateY(16px) scale(1.12)}.about,.project,.moodboard,.visual-process,.modeling,.interaction{padding:75px 0}.about-layout{display:block}.portrait-composition{height:490px;min-height:0;max-width:440px;margin:auto}.portrait-bar-tall{left:6%}.portrait-bar-wide{left:27%;width:61%}.portrait{left:38%;width:46%;height:52%}.portrait-composition h2{left:39%;top:77%}.about-copy{font-size:15px}.project-layout{display:block}.overview-feature{width:min(78%,370px);margin:0 auto 50px}.overview-content h2{text-align:center;font-size:38px;margin-bottom:25px}.overview-content h3{font-size:24px}.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;margin-bottom:27px}.journey-grid figcaption{font-size:13px}.overview-notes{font-size:14px;padding:20px}.moodboard-layout{display:block}.moodboard-collage{float:none;width:100%;height:min(103vw,570px);shape-outside:none;margin:0}.moodboard-copy{padding:0;margin-top:25px;font-size:15px}.visual-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 15px}.stage-images{height:clamp(310px,70vw,500px);padding:7px;gap:6px}.three-images,.final-image{padding:0}.stage-copy h3{font-size:15px}.stage-copy p{font-size:12px}.modeling-layout{display:block}.modeling-intro h3{font-size:21px}.modeling-intro h3 span{display:block;margin:7px 0 0;font-size:16px}.modeling-intro p{font-size:14px}.model-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.model-item figcaption{font-size:14px}.model-process{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:35px}.model-process h3{grid-column:1/-1;text-align:center}.model-process figure{margin:0}.model-process figcaption{font-size:11px}.interaction-layout{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.interaction-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}.interaction-notes .tool-note{grid-column:1/-1}.interaction h3{font-size:14px;min-height:42px}.interaction p{font-size:12px}.interaction-video p{margin-top:7px}.placeholder{min-height:65svh}}
@media (max-width:460px){.site-header{font-size:10px}.site-header nav{gap:8px}.hero{background-position:40% center}.hero h1{top:18%;font-size:35px}.hero-links{left:8%;top:40%;gap:9vw}.hero-links a{font-size:19px}.portrait-composition{height:400px}.portrait-composition h2{font-size:35px}.contact-line{font-size:12px}.visual-stages{grid-template-columns:1fr;gap:38px}.stage-images{height:560px;max-width:390px;width:100%;margin:auto}.stage-copy{max-width:390px;margin:auto}.stage-copy h3{font-size:18px}.stage-copy p{font-size:14px}.interaction-layout{grid-template-columns:1fr}.interaction-notes{display:block}.interaction-notes article img{aspect-ratio:2.1}.interaction h3{min-height:0;font-size:20px}.interaction p{font-size:14px}.interaction-video{max-width:400px;margin:0 auto 25px}.interaction-video video{max-height:560px}.moodboard-collage{height:420px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* PSD 对照修订：章节标题使用原稿记录的汇文明朝体。 */
@font-face{font-family:'PortfolioMincho';src:url('fonts/HuiwenMinchoJF-subset.woff2') format('woff2');font-display:swap}
#project-title,#moodboard-title,#visual-title,#modeling-title,#interaction-title{font-family:'PortfolioMincho','PortfolioSong','PortfolioSong',serif;font-weight:400;letter-spacing:.08em}

/* 简介中的色块与叶片来自个人简介 PSD，肖像使用原照片裁切。 */
.about{align-items:flex-start;padding:clamp(90px,8vw,130px) 0 80px}
.about-layout{align-items:start}
.portrait-composition{height:555px;min-height:0}
.portrait-bar,.portrait-leaf{display:none}
.portrait-art{position:absolute;left:16.8%;top:0;width:71.7%;height:auto;object-fit:contain}
.portrait{left:47.2%;top:7.8%;width:32.1%;height:47.2%;object-fit:cover;object-position:center}
.portrait-composition h2{left:49.7%;top:70%;font-size:clamp(34px,3.35vw,58px);font-family:'PortfolioMincho','PortfolioSong','PortfolioSong',serif}
.about-copy{position:relative;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;padding:25px 27px 27px}
.about-copy::before,.about-copy::after{content:'';position:absolute;width:1px;background:var(--line)}
.about-copy::before{left:0;top:0;height:16%}.about-copy::after{right:0;bottom:0;height:30%}

/* 四个流程标题贴在图像上沿，正文保留文字稿的完整表述。 */
.journey-grid figure{position:relative}
.journey-label{position:absolute;z-index:2;top:4px;left:0;right:0;text-align:center;color:#d2baa0;font-weight:400;font-size:clamp(14px,1.2vw,21px);text-shadow:0 1px 4px #000}
.journey-grid figcaption{font-size:clamp(11px,.84vw,14px);line-height:1.4;text-align:justify}

/* 灵感板按 1672×941 的 PSD 画布坐标布置，所有照片仍引用原始素材。 */
.moodboard{padding:0}
.moodboard .section-inner{position:relative;width:min(100%,1672px)}
.moodboard .section-title{position:absolute;z-index:5;top:4.3%;left:0;width:100%;margin:0}
.moodboard-layout{position:relative;display:block;min-height:0;width:100%;aspect-ratio:1672/941}
.moodboard-collage{position:absolute;inset:0;float:none;width:100%;height:100%;margin:0;shape-outside:none;isolation:auto}
.mood{border:0;box-shadow:none}
.m1{left:16.6%;top:30.3%;width:18.2%;height:25.2%;z-index:1}
.m2{left:23.1%;top:53.8%;width:10.9%;height:30%;z-index:3}
.m3{left:34.3%;top:30.3%;width:18.5%;height:25.8%;z-index:2}
.m4{left:32.8%;top:53.2%;width:7.4%;height:21.5%;z-index:3}
.m5{left:31.5%;top:12%;width:15.5%;height:46%;object-fit:contain;filter:none;mix-blend-mode:normal;z-index:6}
.m6{left:58.5%;top:59%;width:8%;height:30%;filter:grayscale(1) brightness(1.4);z-index:5}
.m7{left:65.2%;top:55.8%;width:10%;height:34%;transform:rotate(3deg);clip-path:polygon(3% 0,92% 2%,100% 12%,96% 90%,89% 98%,4% 100%,0 88%);z-index:5}
.m8{left:52.5%;top:49.2%;width:17%;height:32%;filter:grayscale(1) brightness(.9);z-index:3}
.m9{left:39.8%;top:55%;width:13.5%;height:21%;z-index:3}
.m10{left:38.4%;top:61%;width:22.7%;height:27.2%;border-radius:50%;transform:rotate(-12deg);filter:grayscale(1) contrast(1.2);z-index:7}
.m11{left:73%;top:65.3%;width:13%;height:17.5%;filter:grayscale(1) brightness(.7) contrast(1.15);z-index:2}
.moodboard-copy{position:absolute;inset:0;padding:0;pointer-events:none;z-index:8;font-size:clamp(14px,1.15vw,20px)}
.moodboard-copy p{position:absolute;margin:0;line-height:1.55;text-indent:0;text-align:justify}
.moodboard-copy .quote{left:17%;top:18%;width:66%;font-size:clamp(16px,1.3vw,22px);color:#9f9482;line-height:1.7;letter-spacing:.07em}
.moodboard-copy p:nth-child(2){left:51%;top:33%;width:43%}
.moodboard-copy p:nth-child(3){left:70%;top:39%;width:24%;font-size:.9em}
.moodboard-copy p:nth-child(4){left:79%;top:48%;width:15%;font-size:.9em}

/* 视觉稿四组图片共用一条时间线；第二组保持方形原图。 */
.visual-stages{position:relative}
.process-rail{position:absolute;left:0;right:0;top:calc(clamp(430px,38vw,630px) + 27px);height:3px;background:#8f8069;z-index:0}
.three-images{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%}
.three-images img{width:min(62%,200px);height:auto;aspect-ratio:1;object-fit:cover;flex:none}
.stage-copy{padding-top:55px}
.stage-copy::before{top:21px;left:calc(50% - 6px);width:12px;height:12px;border:0;border-radius:50%;background:#9f8a69}

/* 3D 植物依据参考稿错落散布，视频黑底以滤色方式融入背景。 */
.modeling-main{position:relative}
.modeling-intro{position:relative;z-index:2}
.model-gallery{display:block;position:relative;height:1600px;margin-top:-145px}
.model-item{position:absolute;min-width:0}
.model-item video{width:calc(100% - 24px);height:auto;aspect-ratio:480/560;object-fit:contain;mix-blend-mode:screen}
.model-item figcaption{position:absolute;right:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;margin:0;font-size:14px;letter-spacing:.08em;color:#bda687}
.model-item:nth-child(1){left:0;top:27%;width:35%}
.model-item:nth-child(2){left:49%;top:8%;width:30%}
.model-item:nth-child(3){left:48%;top:44%;width:38%}
.model-item:nth-child(4){left:22%;top:19%;width:30%}
.model-item:nth-child(5){left:1%;top:67%;width:30%}
.model-item:nth-child(6){left:30%;top:67%;width:34%}
.model-item:nth-child(7){left:5%;top:47%;width:31%}
.model-item:nth-child(8){left:68%;top:71%;width:29%}
.model-item:nth-child(9){left:75%;top:0;width:24%}
.model-item:nth-child(10){left:27%;top:84%;width:25%}

/* 左侧两幅交互截图只保留参考稿里的星晷画面。 */
.interaction-notes article:first-child img{aspect-ratio:283/211;object-position:center 88%}
.interaction-notes article:nth-child(2) img{aspect-ratio:283/224;object-position:center 82%}

@media(max-width:760px){
  .about{padding:75px 0}.portrait-composition{height:490px;max-width:440px}.portrait-art{left:6%;top:0;width:88%}.portrait{left:43.3%;top:7.8%;width:39.5%;height:47.2%}.portrait-composition h2{left:46%;top:70%}
  .moodboard{padding:75px 0}.moodboard .section-inner{width:calc(100% - 34px)}.moodboard .section-title{position:static;margin:0 0 26px}.moodboard-layout{aspect-ratio:auto}.moodboard-collage{position:relative;width:100%;height:420px}.moodboard-copy{position:static;padding:20px 0 0;font-size:15px;pointer-events:auto}.moodboard-copy p,.moodboard-copy .quote,.moodboard-copy p:nth-child(2),.moodboard-copy p:nth-child(3),.moodboard-copy p:nth-child(4){position:static;width:auto;margin:0 0 1em;font-size:15px;line-height:1.75;text-indent:2em}
  .process-rail{display:none}.stage-copy{padding-top:35px}.stage-copy::before{top:0;left:50%;height:24px;width:0;border-left:1px solid var(--line);border-radius:0;background:none}.three-images img{width:min(62%,200px)}
  .model-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;margin-top:0;gap:8px}.model-item,.model-item:nth-child(n){position:relative;left:auto;top:auto;width:auto}.model-item figcaption{font-size:12px}
  .interaction-notes article:first-child img{aspect-ratio:283/211}.interaction-notes article:nth-child(2) img{aspect-ratio:283/224}
}
@media(max-width:460px){.portrait-composition{height:400px}.moodboard-collage{height:330px}.three-images img{width:60%}}

/* 本轮校正：入口按标注整体右下移动，字体放大三分之一。 */
.hero h1{font-family:'PortfolioMincho','PortfolioSong',serif;font-weight:400}
.hero h1 span{font-weight:700}
.hero-links{left:23%;top:38%}
.hero-links a{font-size:clamp(29.33px,3vw,50.67px)}
.portrait-composition h2{font-family:'PortfolioSong','PortfolioSong',serif;font-weight:400}
.portrait{height:auto;aspect-ratio:220/304;object-fit:contain}
.overview-feature video{background:#050606;isolation:isolate}

/* 使用 PSD 原画布与图层坐标，按同一比例缩放，禁止各图层重新换列。 */
.moodboard-reference,.modeling-reference{display:block;min-height:0;padding:0}
.psd-stage{position:relative;width:100%;max-width:1672px;margin:auto;container-type:inline-size;background:url('视觉稿/作品集背景图.jpg') left top/100% auto repeat-y}
.moodboard-stage{aspect-ratio:1672/941}
.modeling-stage{aspect-ratio:1672/1871}
.psd-stage h2{position:absolute;margin:0;font-family:'PortfolioMincho','PortfolioSong',serif;font-weight:400;font-size:3.91cqw;line-height:1;letter-spacing:.05em;white-space:nowrap}
.moodboard-stage h2{left:43.12%;top:4.15%;color:#7f6f52}
.psd-mood-art{position:absolute;left:14.47368%;top:11.90223%;width:71.05263%;height:84.05951%;object-fit:contain}
.psd-quote{position:absolute;margin:0;font-family:'PortfolioMincho','PortfolioSong',serif;font-size:1.4354cqw;line-height:1;letter-spacing:.05em;color:#9b9b9b;opacity:.47;white-space:pre}
.psd-mood-copy{position:absolute;left:51.01675%;top:33.26249%;margin:0;font-family:'PortfolioSong','PortfolioSong',serif;font-size:1.31579cqw;line-height:1.09091;letter-spacing:.05em;color:#9b9b9b;white-space:pre;text-align:left}
.modeling-stage h2{left:45.09569%;top:1.17691%;color:#bfb29c}
.psd-model-heading,.psd-model-copy{position:absolute;left:3.85885%;margin:0;font-family:'PortfolioSong','PortfolioSong',serif;font-weight:400;letter-spacing:.05em;color:#bfb29c;white-space:pre}
.psd-model-heading{top:6.73437%;font-size:2.15311cqw;line-height:1}
.psd-model-copy{top:11.0636%;font-size:1.79426cqw;line-height:1.2}
.psd-models{position:absolute;inset:0;pointer-events:none}
.psd-model-arrows{position:absolute;left:78.28947%;top:17.58418%;width:16.86603%;height:32.81668%;object-fit:contain}
.psd-model{position:absolute;margin:0}
.psd-model video{width:100%;height:100%;object-fit:fill;mix-blend-mode:screen}
.psd-model figcaption{position:absolute;left:calc(100% + .35cqw);top:40%;writing-mode:vertical-rl;white-space:nowrap;color:#bda687;font-size:.95694cqw;letter-spacing:.06em}
.psd-plant-detail{position:absolute;left:33.97129%;top:39.87173%;width:34.56938%;height:33.24425%;display:block}
.psd-plant-detail img{width:100%;height:100%;object-fit:contain}
.psd-process{position:absolute;left:80.98086%;width:11.90191%;margin:0}
.psd-process img{width:100%;height:100%;object-fit:cover}
.psd-process figcaption{position:absolute;top:100%;width:130%;left:-15%;text-align:center;font-size:.7177cqw;line-height:1.4;white-space:nowrap;color:#bda687}
.process-gray-one{top:11.01015%;height:10.20844%}
.process-particle-one{top:21.75307%;height:11.22394%}
.process-gray-two{top:34.68733%;height:10.26189%}
.process-particle-two{top:45.48370%;height:11.17050%}
@media(max-width:760px){.hero-links{left:16%;top:43%}.hero-links a{font-size:clamp(26.67px,6.93vw,37.33px)}.portrait{height:auto;aspect-ratio:220/304}}
@media(max-width:460px){.hero-links{left:12%;top:46%;gap:9vw}.hero-links a{font-size:25.33px}}

/* 首页入口取首页 PSD 的三个文字图层坐标，保留现有字号。 */
.hero-links{inset:0;display:block}
.hero-links a{position:absolute;font-family:'PortfolioMincho','PortfolioSong',serif;transform:none!important}
.hero-links a:nth-child(1){left:21.47129%;top:32.62487%}
.hero-links a:nth-child(2){left:34.689%;top:26.35494%}
.hero-links a:nth-child(3){left:47.54785%;top:35.60043%}
.hero-links a:hover,.hero-links a:focus-visible{transform:scale(1.14)!important}
.hero h1 span{font-family:'PortfolioMincho','PortfolioSong',serif;font-weight:400;position:relative;left:4.6vw}
.hero h1{right:7%}
.project{isolation:isolate}
.project-particles{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.project-particles img{position:absolute;object-fit:fill}
.project-texture-one{left:14.5933%;top:3.932%;width:68.3612%;height:94.474%}
.project-texture-two{left:44.5574%;top:59.9362%;width:29.067%;height:30.287%}
.psd-mood-art{width:71.23206%}
.psd-mood-copy{left:51.13636%;top:32.62487%;line-height:1.363636}
.psd-model-heading,.psd-model-copy{left:4.75359%}
.psd-model-heading{top:9.94039%}
.psd-model-copy{top:14.16355%;font-size:1.435407cqw;line-height:1.5}
/* 右侧仅保留两组清晰对照，图内比例和图注保持统一。 */
.psd-process{left:80.5%;width:13.5%;height:11.5%}
.psd-process img{object-fit:contain}
.psd-process figcaption{font-size:.8cqw;top:calc(100% + .4cqw)}
.process-gray-one{top:12%}.process-particle-one{top:26%}
.process-gray-two{top:43%}.process-particle-two{top:57%}
@media(max-width:760px){.hero h1{right:9%}.hero h1 span{left:5vw}.project-texture-one{left:2%;top:5%;width:96%;height:70%}.project-texture-two{top:65%;left:20%;width:75%;height:25%}}

/* 灰模与粒子图统一方形画幅，裁去空白，按两组纵向排列。 */
.model-comparison{position:absolute;left:80.5%;top:11%;width:15%;display:flex;flex-direction:column;gap:1.7cqw}
.model-comparison .psd-process{position:static;width:100%;height:auto;margin:0}
.model-comparison .process-particle-one{margin-bottom:1.3cqw}
.process-image{width:100%;aspect-ratio:1;overflow:hidden;background:#000}
.model-comparison .psd-process img{width:100%;height:100%;object-fit:cover;object-position:center}
.model-comparison .process-gray-one img{transform:scale(1.5);transform-origin:52% 65%}
.model-comparison .process-gray-two img{transform:scale(1.04)}
.model-comparison .process-particle-two img{transform:scale(1.18)}
.model-comparison .psd-process figcaption{position:static;width:100%;margin:.5cqw 0 0;font-size:.84cqw;line-height:1.5;text-align:center;white-space:nowrap;letter-spacing:.02em}

/* 溯梦山海：桌面以 PSD 画布定位，拼贴内部图层保持原样。 */
.sh-section{scroll-margin-top:48px}
.sh-stage{position:relative;container-type:inline-size;width:min(100%,1672px);margin:auto;aspect-ratio:var(--sh-ratio);background:url('视觉稿/作品集背景图.jpg') left top/100% auto repeat-y}
.sh-layer{position:absolute;box-sizing:border-box;margin:0;order:var(--sh-order)}
.sh-image{object-fit:fill;display:block}
.sh-text{font-weight:400;letter-spacing:.05em;white-space:pre;text-align:left;z-index:2}
.sh-line{display:block}
.sh-title{z-index:3}
.sh-video{display:block;object-fit:cover;background:#101717;z-index:1}
.sh-decoration{pointer-events:none}
.sh-group{isolation:isolate}
/* 项目概览统一采用最新 PSD 的画布、图层位置和文字样式。 */
.overview-psd{scroll-margin-top:50px}
.overview-psd-stage{position:relative;container-type:inline-size;width:min(100%,1672px);margin:auto;background-size:100% 100%;background-repeat:no-repeat}
.op-layer{position:absolute;margin:0;object-fit:fill}
.op-text{font-weight:400;white-space:pre;z-index:2;text-align:left}
.op-text span{display:block}
.overview-psd .op-text{letter-spacing:0}
.overview-psd video{object-fit:cover}
/* 手机沿用 1672px 桌面画布，由浏览器等比缩放并保留双指缩放。 */
.scroll-hint{font-size:36px}
.project-subtitle{font-size:clamp(21px,2vw,33px);color:#9c896c;line-height:1.4;margin:0 0 24px;text-align:right}
.second-project-subtitle{position:absolute;left:42.5%;top:.5%;width:25%;font-size:clamp(21px,2vw,33px);line-height:1.05;color:rgb(199,198,179);opacity:.6;margin:0;z-index:3}
@media(max-device-width:760px){.page-section{min-height:0}.hero,.hero-content{min-height:0;height:941px}}
.back-cover-stage{position:relative;container-type:inline-size;width:100%;aspect-ratio:1672/941;background:url('media/psd/back-cover.jpg') center/100% 100% no-repeat}
.back-cover-stage>p,.back-cover-stage>h2{position:absolute;margin:0;font-family:PortfolioMincho,serif;font-weight:400;line-height:1;white-space:pre;letter-spacing:0}
/* 其他设计按原 PSD 定位；高清图在打开查看器时加载。 */
.other-section{scroll-margin-top:60px}
.other-stage{position:relative;container-type:inline-size;max-width:1672px;margin:auto;aspect-ratio:1672/1134}
.other-layer{position:absolute;margin:0;order:var(--order)}
.other-text{font-weight:400;line-height:1.15;white-space:nowrap;letter-spacing:0}
.other-zoom{border:0;padding:0;background:none;cursor:zoom-in;color:inherit}
.other-zoom img{width:100%;height:100%;object-fit:fill}
.other-zoom:hover{filter:brightness(1.09)}
.other-zoom:focus-visible{outline:2px solid var(--light);z-index:3}
.other-decoration{object-fit:fill;pointer-events:none}
#art-viewer{width:96vw;max-width:none;height:94dvh;max-height:none;padding:0;border:1px solid var(--line);background:#101311;color:var(--light)}
#art-viewer::backdrop{background:rgba(0,0,0,.9)}
#art-viewer[open]{display:flex;flex-direction:column}
.viewer-toolbar,.viewer-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;flex-shrink:0}
.viewer-toolbar p{margin:0;margin-right:auto;font-size:14px}
#art-viewer button,#viewer-original{background:transparent;color:inherit;border:1px solid var(--line);padding:8px 12px;cursor:pointer;font:inherit;font-size:14px}
.viewer-image-area{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center}
#viewer-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in}
.viewer-image-area.is-zoomed{display:block}
.viewer-image-area.is-zoomed #viewer-image{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out;margin:auto}
body.viewer-open{overflow:hidden}
@media(max-width:760px){
 .other-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:52px 16px;aspect-ratio:auto}
 .other-stage>.other-layer{position:static;width:100%!important;height:auto!important;order:var(--mobile-order)!important}
 .other-stage>.other-text{grid-column:1/-1;white-space:normal;font-size:16px!important;line-height:1.6}
 .other-stage>h2.other-text{font-size:32px!important;text-align:center}
 .other-text-9{order:-2}.other-stage>.other-zoom[data-gallery="boards"]{order:-1}
 .other-stage>h3.other-text{font-size:22px!important;margin-top:18px}
 .other-stage>.other-zoom img{height:auto;object-fit:contain}
 .viewer-toolbar{flex-wrap:wrap;gap:8px;padding:10px}
 .viewer-toolbar p{flex-basis:100%}
 #art-viewer button,#viewer-original{font-size:12px;padding:8px}
}
.sh-art-row img[src="溯梦山海/1.jpg"],.sh-art-row img[src="溯梦山海/植物背景.png"]{outline:2px solid #eee8dd;border-radius:1px;z-index:1}
@media(max-width:760px){
  .sh-section{padding:48px 0 24px}
  .sh-stage{display:flex;flex-direction:column;gap:22px;width:calc(100% - 32px);aspect-ratio:auto;background:none!important}
  .sh-stage>.sh-layer{position:relative;left:auto!important;top:auto!important;width:100%!important;height:auto!important}
  .sh-stage>.sh-decoration{display:none}
  .sh-stage>.sh-text{font-size:15px!important;line-height:1.8!important;white-space:normal;opacity:1!important}
  .sh-stage>.sh-title{font-size:32px!important;line-height:1.3!important;text-align:center}
  .sh-stage>.sh-subtitle,.sh-stage>.sh-side-title{font-size:23px!important;line-height:1.4!important}
  .sh-stage>.sh-text .sh-line{display:inline;white-space:normal}
  .sh-stage>.sh-side-title .sh-line{display:inline}
  .sh-stage>.sh-video{aspect-ratio:16/9}
  .sh-stage>.sh-group{aspect-ratio:var(--sh-ratio)}
  .sh-stage>.sh-flow{display:flex;flex-direction:column;gap:10px;aspect-ratio:auto}
  .sh-flow>.sh-layer{position:static;width:100%!important;height:auto!important}
  .sh-flow>.sh-image{aspect-ratio:16/7;object-fit:cover;margin-top:16px}
  .sh-flow>.sh-text{font-size:14px!important;line-height:1.6!important;white-space:normal}
  .sh-flow .sh-line{display:inline}
}


@font-face{font-family:'PortfolioSong';src:url('fonts/NotoSerifSC-subset.woff2') format('woff2');font-weight:100 900;font-display:swap}

html,body{overflow-x:hidden}
.overview-psd .op-text:not(#project-title):not(#second-title){transform:scaleX(.94);transform-origin:left center}
