@charset "UTF-8";
/* 网站唯一维护样式：保持原页面级联顺序，后续直接在此修改。 */

:root{--ink:#282d29;--muted:#73776f;--line:rgba(48,60,44,.15);--accent:#b95130;--paper:#f4f2eb;--font:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;--serif:var(--font);--actor-x:76;--actor-h:75;--scene-tint:#eeeee3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;color:var(--ink);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased;background:var(--paper)}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{background:none;border:0}h1,h2,h3,p{margin:0}button:disabled{cursor:default}::selection{background:#b8c3a8;color:#18221b}.skip-link{position:fixed;z-index:100;top:-60px;left:20px;background:var(--ink);color:white;padding:15px}.skip-link:focus{top:12px}
.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:var(--scene-tint);transition:background 1s;z-index:-1}.world-light{position:absolute;inset:0;background:radial-gradient(ellipse at 13% 30%,rgba(255,255,250,.86) 0,rgba(255,255,250,.35) 40%,transparent 72%),linear-gradient(100deg,rgba(251,248,240,.6),transparent 60%)}.world-floor{position:absolute;bottom:0;left:0;width:100%;height:21%;background:linear-gradient(transparent,rgba(95,110,88,.075));border-top:1px solid rgba(95,110,88,.04);transform:skewY(-1.5deg)}.world-orbit{position:absolute;width:88vw;height:88vw;left:32vw;top:-41vw;border:1px solid rgba(97,107,78,.12);border-radius:50%;box-shadow:0 0 0 10vw rgba(255,255,255,.05),0 0 0 20vw rgba(255,255,255,.04)}.architecture{position:absolute;right:-3vw;top:20vh;width:35vw;height:92vh;border-radius:48% 48% 0 0;background:linear-gradient(102deg,rgba(196,205,177,.20),rgba(167,181,148,.40));box-shadow:inset 25px 6px 50px rgba(255,255,250,.38);transition:transform 1s,opacity 1s}.arch-opening{position:absolute;inset:5.5vw 4vw -10px 5vw;border-radius:48% 48% 0 0;background:linear-gradient(120deg,rgba(89,109,72,.19),rgba(215,222,199,.16) 65%)}.world-grain{position:absolute;inset:0;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}.actor{position:absolute;left:calc(var(--actor-x)*1vw);bottom:8vh;height:calc(var(--actor-h)*1vh);width:calc(var(--actor-h)*.33017vh);transform:translateX(-50%);transition:left .85s cubic-bezier(.22,.68,.2,1),height .7s,width .7s,opacity .3s;will-change:left}.actor-crop{position:absolute;inset:0;overflow:hidden}.actor img{position:absolute;height:106.74%;width:auto;max-width:none;left:-73.85%;top:-3.04%;filter:drop-shadow(1px 3px 2px rgba(56,60,44,.05))}.actor-shadow{position:absolute;bottom:-1.2%;left:-14%;width:130%;height:3%;border-radius:50%;background:rgba(52,60,36,.2);filter:blur(9px)}
.site-header{height:94px;position:fixed;top:0;inset-inline:0;padding:0 6.1%;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:20;background:linear-gradient(var(--paper),rgba(244,242,235,.87),rgba(244,242,235,0));backdrop-filter:blur(4px)}.wordmark{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;letter-spacing:.07em}.monogram{font-family:var(--font);display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:var(--paper);border-radius:50%;font-size:28px;letter-spacing:-3px;padding-right:3px}.wordmark-sub{display:block;font-size:8px;letter-spacing:.16em;font-weight:400;margin-top:4px}.site-header nav{display:flex;gap:34px;align-items:center;font-size:12px;letter-spacing:.08em}.site-header nav a{padding:12px 0;position:relative;color:var(--muted)}.site-header nav a.active,.site-header nav a:hover{color:var(--ink)}.site-header nav a.active:after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--accent)}.site-header nav span{font-size:17px;margin-left:8px}.review-trigger{font-size:11px;border:1px solid var(--line);padding:10px 14px;border-radius:30px;display:flex;align-items:center;gap:8px;background:#f7f5ee99}.tiny-square{width:7px;height:7px;border:1px solid currentColor}
.scene{position:relative;min-height:100svh;padding:140px 7.6% 105px;isolation:isolate}.hero{min-height:max(100svh,780px);display:flex;align-items:center;padding-top:112px;padding-bottom:122px}.hero-copy{width:55%;max-width:800px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:35px;letter-spacing:.15em}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.greeting{font-size:12px;letter-spacing:.12em;margin-bottom:18px;color:var(--muted)}h1{font-family:var(--serif);font-weight:400;font-size:clamp(47px,4.4vw,78px);letter-spacing:-.045em;line-height:1.24}.accent-word{color:var(--accent);position:relative}.accent-word:after{content:"";position:absolute;left:0;right:0;height:6px;border-top:1px solid currentColor;border-radius:50%;bottom:-3px;transform:rotate(-2deg)}.intro-text{font-size:13px;line-height:1.95;color:#686e64;margin-top:26px}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:12px;font-weight:500;margin-top:26px}.round-arrow{display:grid;place-items:center;border:1px solid rgba(57,65,49,.25);border-radius:50%;width:35px;height:35px;font-size:17px;transition:background .2s,color .2s}.text-link:hover .round-arrow{background:var(--ink);color:var(--paper)}.hero-footnote{display:flex;gap:14px;align-items:center;font-size:10px;color:var(--muted);margin-top:34px}.hero-footnote i{width:3px;height:3px;background:#9a9f90;border-radius:50%}.actor-caption{position:absolute;right:4.7%;top:25%;display:flex;gap:10px;font-size:11px;line-height:1.9;transform:rotate(4deg);color:#647154}.actor-caption small{font-size:7px;letter-spacing:.12em}.small-star{font-size:30px;font-family:var(--font);line-height:1.3;color:var(--accent)}.scroll-cue{position:absolute;bottom:56px;left:7.6%;display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:.1em;color:var(--muted)}.scroll-line{height:35px;width:1px;background:linear-gradient(transparent,#777f6d)}.scroll-cue>span:last-child{font-size:18px;margin-left:6px}
.section-kicker{color:var(--accent)}h2{font-family:var(--serif);font-size:clamp(36px,3.2vw,58px);font-weight:400;letter-spacing:-.04em;line-height:1.28}.journey{min-height:max(100svh,850px);padding-top:128px}.journey-content{width:70%;max-width:960px}.section-heading{display:flex;align-items:flex-end;gap:35px;justify-content:space-between;margin:24px 0 40px}.section-heading>p{font-size:11px;line-height:1.9;color:var(--muted);margin-bottom:5px}.timeline{border-top:1px solid var(--line)}.timeline-row{display:grid;grid-template-columns:110px 24px 1fr 92px 18px;align-items:center;width:100%;text-align:left;padding:17px 0;border-bottom:1px solid var(--line);min-height:75px;transition:background .2s}.timeline-row:hover{background:rgba(255,255,255,.22)}.timeline-date{font-family:var(--font);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}.timeline-node{height:7px;width:7px;border-radius:50%;border:1px solid #a8ad9e;position:relative}.timeline-main strong{font-weight:500;font-size:14px}.timeline-main small{display:block;font-size:10px;margin-top:5px;color:var(--muted);letter-spacing:.025em}.timeline-type{font-size:8px;letter-spacing:.1em;color:var(--muted)}.entry-plus{font-size:20px;color:var(--muted);font-weight:300}.is-current .timeline-date,.is-current .timeline-type{color:var(--accent)}.is-current .timeline-node{background:var(--accent);border-color:var(--accent)}.timeline-type b{display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;vertical-align:middle;margin-left:4px}.timeline-detail{padding:15px 30px 19px 134px;border-bottom:1px solid var(--line);background:#ffffff40;font-size:12px;color:#5c6654;line-height:1.9}.timeline-detail strong{font-weight:500;color:var(--ink)}.timeline-detail p{margin-top:5px}.timeline-detail a{display:inline-block;color:var(--accent);font-size:11px;border-bottom:1px solid;margin-top:7px}.timeline-hint{font-size:10px;color:var(--muted);margin-top:16px}.timeline-hint span{margin-left:7px}.journey-skillline{display:flex;gap:23px;font-size:10px;margin-top:32px;letter-spacing:.06em;color:#56634d}.journey-skillline span+span:before{content:"/";margin-right:23px;color:#a4ac98}
.project{padding-top:118px;min-height:max(110svh,875px)}.project-right .project-content{margin-left:25%;width:75%}.project-left .project-content{width:77%}.project-content{max-width:1300px}.project-topline{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px}.project-count{font-family:var(--font);font-size:15px}.project-count i{font-style:normal;padding:0 12px;color:#a0a596}.project-title-row{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 0}.project-category{font-size:9px;letter-spacing:.12em;color:var(--muted)}.project-title-row h2{font-family:var(--font);font-size:clamp(40px,4vw,69px);font-weight:500;letter-spacing:-.05em;margin-top:5px;line-height:1.15}.project-title-row h2 .title-dot{color:var(--accent)}.project-tagline{font-family:var(--serif);font-size:clamp(17px,1.55vw,25px);line-height:1.6;color:#51584c}.project-feature{display:grid;grid-template-columns:.78fr 1.6fr;gap:30px;align-items:center}.project-summary h3{font-size:15px;font-weight:500;line-height:1.5;margin-bottom:14px}.project-summary>p{font-size:11px;line-height:1.95;color:#737869}.project-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.project-tags span{border:1px solid var(--line);border-radius:30px;padding:5px 9px;font-size:8px;white-space:nowrap}.role-note{border-top:1px solid var(--line);padding-top:15px;margin-top:24px;display:flex;gap:17px;font-size:10px;line-height:1.9}.role-note>span{color:var(--muted);white-space:nowrap}.role-note>p{font-size:10px}.media-slot{height:clamp(285px,28vw,435px);position:relative;overflow:hidden;border-radius:3px;background:rgba(222,218,201,.6);border:1px solid rgba(48,60,44,.04)}.media-coordinate{position:absolute;top:16px;left:17px;font-size:7px;letter-spacing:.13em;color:#727967;z-index:2}.placeholder-label{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:8px;letter-spacing:.07em;color:#727566;z-index:4}.media-bulu{background:radial-gradient(ellipse at 68% 0%,#f0e5c4,#e9decb 65%,#e5d8c5)}.tablet-placeholder{position:absolute;width:77%;height:67%;top:17%;left:11.5%;background:#4b5148;border-radius:15px;padding:8px;box-shadow:12px 22px 30px #534b3225;transform:rotate(-5deg)}.tablet-screen{position:relative;width:100%;height:100%;background:#fcf7e9;border-radius:8px;overflow:hidden}.tablet-camera{position:absolute;width:3px;height:3px;left:3px;top:49%;background:#969b8c;border-radius:50%}.mock-brand{position:absolute;font-family:var(--font);font-style:italic;top:12px;left:16px;font-size:19px;color:#675f41}.bulu-orb{position:absolute;left:calc(50% - 39px);top:27%;width:78px;height:75px;border-radius:42% 43% 44% 41%;background:radial-gradient(circle at 28% 17%,#f6d692,#daa454);box-shadow:inset -6px -9px 16px #b5803830;transform:rotate(4deg);display:flex;justify-content:center;align-items:center;gap:16px}.bulu-orb:before,.bulu-orb:after{content:"";position:absolute;width:24px;height:29px;border-radius:50%;top:-13px;background:#eac17b;z-index:-1}.bulu-orb:before{left:1px}.bulu-orb:after{right:1px}.bulu-orb span{width:5px;height:7px;background:#55462b;border-radius:50%;margin-top:4px}.mock-pet-shadow{position:absolute;top:64%;left:41%;width:20%;height:4%;background:#857b4820;border-radius:50%;filter:blur(4px)}.mock-screen-caption{position:absolute;top:70%;text-align:center;left:0;right:0;font-size:9px;letter-spacing:.08em;color:#77664e}.mock-pills{position:absolute;bottom:8%;left:15%;right:15%;display:flex;justify-content:space-between;gap:4px}.mock-pills span{font-size:6px;background:#e9debf70;padding:5px 8px;border-radius:10px}
.media-claw{background:linear-gradient(145deg,#dce4df,#cddbd6)}.browser-placeholder{position:absolute;left:7%;top:24%;width:80%;height:57%;background:#f7f8f3;border:1px solid #b1bdb080;border-radius:5px;box-shadow:9px 17px 24px #40594822;transform:perspective(1000px) rotateY(7deg) rotate(-3deg);overflow:hidden}.browser-bar{height:22px;border-bottom:1px solid #dfe4dc;display:flex;align-items:center;gap:3px;padding:0 8px}.browser-bar i{display:block;width:3px;height:3px;background:#b4c1b1;border-radius:50%}.browser-bar span{font-size:6px;color:#74816d;margin-left:34%}.mock-app{height:calc(100% - 22px);display:flex}.mock-app aside{width:23%;padding:10px 7px;background:#edf1e8;display:flex;flex-direction:column;gap:9px;font-size:5px;color:#78896b}.mock-app aside b{font-size:11px;font-weight:600;margin-bottom:6px;color:#455e35}.mock-chat{position:relative;flex:1;padding:14px 10px}.mock-avatar{width:16px;height:16px;background:#506443;color:#f5f6ed;border-radius:5px;font-size:8px;display:grid;place-items:center;margin-bottom:8px}.mock-line{height:4px;background:#dce3d5;border-radius:2px;width:50%;margin-bottom:5px}.mock-line.long{width:77%}.mock-line.short{width:40%}.mock-chat-bubble{margin-top:9px;font-size:6px;color:#527044;background:#eaf0e2;border-radius:5px;padding:8px;display:inline-block}.mock-input{position:absolute;bottom:10px;left:10px;right:10px;border:1px solid #dce3d5;border-radius:7px;padding:6px;font-size:5px;color:#859778}.mock-input b{float:right}.phone-placeholder{border:4px solid #465348;border-radius:19px;background:#f6f6ed;box-shadow:10px 18px 18px #364d3622;position:absolute;padding:20px 10px}.phone-speaker{position:absolute;width:24%;height:6px;top:4px;left:38%;background:#465348;border-radius:5px}.mini-phone{right:7%;top:17%;width:25%;height:71%;transform:rotate(5deg);display:flex;align-items:flex-start;flex-direction:column}.mini-phone>b{font-size:10px;margin:5px 0 17px;font-weight:500}.mini-phone .mock-line{height:3px;width:77%;margin-bottom:4px}.mini-phone .mock-line.short{width:45%}.phone-chat-dot{position:absolute;width:32px;height:32px;left:calc(50% - 16px);top:44%;border:1px solid #738964;border-radius:50%}.phone-chat-dot:after{content:"✳";position:absolute;inset:0;text-align:center;line-height:30px;font-size:20px;color:#657955}.mini-phone small{position:absolute;bottom:18%;left:0;right:0;text-align:center;font-size:6px;color:#75876c}
.media-yaopai{background:linear-gradient(145deg,#e9d6cc,#ded3c3)}.yaopai-phone{width:32%;height:82%;left:34%;top:8%;border-color:#3b3933;transform:rotate(4deg);border-radius:22px;z-index:3;padding-top:23px}.yaopai-phone .phone-speaker{background:#3b3933}.yaopai-phone>b{display:flex;justify-content:space-between;font-size:12px;align-items:center;font-weight:600}.yaopai-phone>b>span{color:#c46f37}.yaopai-phone>small{display:block;font-size:5px;margin-top:6px;color:#978169}.phone-photo{height:41%;margin-top:14px;border-radius:4px;background:linear-gradient(145deg,#ccd2bd 50%,#a1ad8b 50%);position:relative}.phone-photo:before{content:"";position:absolute;left:17%;top:25%;width:22%;height:32%;background:#e2cfb4;border-radius:50% 50% 30% 30%}.phone-photo-row{height:22%;display:flex;gap:5px;margin-top:6px}.phone-photo-row i{flex:1;background:linear-gradient(130deg,#ddc3a7,#b48e6c);border-radius:3px}.phone-photo-row i+ i{background:linear-gradient(40deg,#c6b2a3,#e5d8c9)}.phone-bottom{font-size:5px;display:flex;justify-content:space-between;margin-top:13px;color:#9b8874}.photo-tile{position:absolute;width:30%;height:48%;background:#f8f4e9;padding:6px;box-shadow:10px 15px 17px #55472e18}.photo-tile:before{content:"";position:absolute;inset:6px 6px 22px;background:linear-gradient(135deg,#b3b8a2,#7d8d71 50%,#a1ae8e 51%)}.photo-tile span{position:absolute;bottom:7px;left:9px;font-family:var(--serif);font-size:7px;color:#86775f}.tile-one{top:22%;left:9%;transform:rotate(-11deg)}.tile-two{top:29%;right:7%;transform:rotate(12deg)}.tile-two:before{background:linear-gradient(38deg,#b8a08b,#d9c8b1 65%,#aa876e 66%)}
.case-tabs{display:flex;align-items:center;gap:25px;margin-top:26px;border-bottom:1px solid var(--line)}.case-tabs [role=tab]{position:relative;padding:13px 0;font-size:10px;white-space:nowrap;color:var(--muted)}.case-tabs [role=tab][aria-selected=true]{color:var(--ink)}.case-tabs [role=tab][aria-selected=true]:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent)}.case-tabs .asset-trigger{margin-left:auto;font-size:9px;color:var(--muted);white-space:nowrap;padding:12px 0}.asset-trigger span{font-size:14px;margin-left:5px}.case-panel{padding-top:19px;min-height:133px;font-size:11px;line-height:1.9;color:#687060;display:grid;grid-template-columns:1fr 1fr;gap:30px}.case-panel h4{font-size:11px;color:var(--ink);font-weight:500;margin:0 0 6px}.case-panel p{font-size:11px}.case-panel ul{margin:0;padding-left:16px}.case-panel .result-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.result-stat strong{display:block;font-family:var(--font);font-weight:400;color:var(--ink);font-size:30px;line-height:1.4}.result-stat small{display:block;font-size:10px;color:var(--muted)}.result-note{grid-column:1/-1;font-size:9px!important;color:var(--muted);margin-top:-15px}
.contact{display:flex;align-items:center;min-height:max(100svh,760px);padding-bottom:145px}.contact-content{width:60%;max-width:900px}.contact h2{font-size:clamp(39px,4.1vw,73px);margin-top:32px}.contact h2 span{color:var(--accent)}.contact-content>p{font-size:13px;line-height:1.95;margin-top:28px;color:var(--muted)}.contact-link{font-size:17px;display:inline-flex;gap:40px;border-bottom:1px solid var(--ink);padding-bottom:11px;margin-top:31px}.contact-link span{font-size:24px}.contact-address{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:11px;margin-top:18px;flex-wrap:wrap}.contact-address button{font-size:9px;border:1px solid var(--line);border-radius:4px;padding:4px 7px}.closing-note{font-size:12px;margin-top:60px;color:#646d59}.closing-note span{display:block;font-size:8px;letter-spacing:.13em;margin-top:8px;color:#8c9582}footer{position:absolute;bottom:52px;left:7.6%;right:7.6%;display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}footer>span:nth-child(2){font-size:7px;letter-spacing:.13em}
.page-rail{position:fixed;right:2.6%;top:45%;display:flex;flex-direction:column;align-items:center;gap:13px;font-size:8px;z-index:12;font-family:var(--font);color:#808674}.rail-track{height:70px;width:1px;background:#4e5e3625;position:relative}.rail-track>span{position:absolute;top:0;left:0;width:1px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top}.chapter-caption{position:fixed;left:2.3%;bottom:23px;z-index:10;font-size:9px;letter-spacing:.06em;display:flex;align-items:center;gap:14px;color:#737f65}.chapter-caption small{font-size:6px;letter-spacing:.14em;opacity:.75}.draft-badge{position:fixed;bottom:22px;right:2.5%;font-size:8px;letter-spacing:.07em;color:#7c836e;z-index:10}.draft-badge span{margin-left:9px;font-family:var(--font)}.zone-label{display:none;position:absolute;padding:9px 12px;background:#fcfcf4e8;border:1px dashed #8d9b73;font-size:9px;letter-spacing:.04em;z-index:6;pointer-events:none}.show-guides .zone-label{display:block}.zone-copy{top:105px;left:7.6%}.zone-person{bottom:79px;right:7%}.project-right .zone-copy{left:29%}.project-right .zone-person{left:7.6%;right:auto}.show-guides .safe-copy{outline:1px dashed #92a576;outline-offset:12px}.show-guides .actor:after{content:"";position:absolute;inset:-20px -40px;border:1px dashed #be876f;background:rgba(211,158,111,.06);z-index:-1}.show-guides .actor{opacity:.77}
dialog{border:1px solid #d5d8c9;background:#f8f7f0;color:var(--ink);padding:42px;box-shadow:0 20px 100px #26342430;max-height:85svh;overflow:auto;overscroll-behavior:contain;border-radius:6px}dialog::backdrop{background:#26352a55;backdrop-filter:blur(8px)}dialog h2{font-size:28px;line-height:1.5;margin:12px 35px 17px 0}.review-dialog{width:min(690px,calc(100% - 28px))}.dialog-close{position:absolute;right:16px;top:12px;font-size:26px;padding:3px 8px;color:var(--muted)}.dialog-intro{font-size:12px;line-height:1.9;color:var(--muted)}.guide-toggle{display:flex;align-items:center;gap:9px;font-size:11px;margin:22px 0;cursor:pointer}.guide-toggle input{accent-color:#728458;width:15px;height:15px}.layout-map{border-top:1px solid var(--line)}.layout-map a{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}.layout-map b{font-family:var(--font);color:#a3ab92;font-size:22px;font-weight:400}.layout-map span{font-size:12px}.layout-map small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.layout-map em{font-family:var(--font);font-size:12px;margin-left:auto;color:#8b947f;font-style:normal}.layout-map a:hover{color:var(--accent)}.map-note{font-size:9px;line-height:1.8;color:var(--muted);margin-top:14px}.future-note{border-left:2px solid #92a379;padding-left:15px;margin-top:25px;font-size:11px}.future-note b{font-weight:500}.future-note p{font-size:10px;line-height:1.85;color:var(--muted);margin-top:7px}.asset-dialog{width:min(590px,calc(100% - 28px))}.asset-dialog>p{font-size:12px;line-height:1.9;color:var(--muted)}.asset-dialog ol{padding-left:21px;font-size:12px;line-height:2.1;margin:24px 0}.asset-dialog .asset-footnote{font-size:10px;padding-top:17px;border-top:1px solid var(--line)}
@media(min-width:1650px){.scene{padding-left:9%;padding-right:9%}.project-content{max-width:1250px}.hero-copy{max-width:770px}.intro-text{font-size:15px}.hero-footnote,.eyebrow{font-size:11px}.project-summary>p,.case-panel p,.case-panel li{font-size:13px}.role-note,.role-note>p{font-size:11px}.case-panel h4{font-size:12px}.project-summary h3{font-size:18px}.timeline-main strong{font-size:17px}.timeline-main small{font-size:12px}.timeline-row{min-height:82px}.project-feature{gap:40px}.media-slot{height:420px}.project{min-height:110svh}}
@media(max-width:1050px) and (min-width:761px){.site-header{padding-inline:5%}.site-header nav{gap:22px}.scene{padding-inline:6%}.hero h1{font-size:48px}.project-right .project-content{margin-left:22%;width:78%}.project-left .project-content{width:80%}.project-feature{gap:19px;grid-template-columns:.85fr 1.4fr}.media-slot{height:275px}.project-summary>p{font-size:10px}.role-note{gap:10px}.project-tagline{font-size:16px}.case-panel{gap:20px}.journey-content{width:75%}.timeline-row{grid-template-columns:96px 20px 1fr 65px 15px}.timeline-type{font-size:7px}.section-heading>p{font-size:10px}.timeline-detail{padding-left:116px}.review-trigger{font-size:10px;padding:9px}.actor-caption{display:none}.project-category{font-size:8px}.page-rail{right:2%}}
@media(max-width:760px){html{scroll-padding-top:85px}.site-header{height:79px;padding:0 6%;gap:10px}.wordmark{font-size:12px;gap:8px}.monogram{width:30px;height:30px;font-size:22px}.wordmark-sub{font-size:6px;letter-spacing:.04em}.site-header nav{gap:18px;margin-left:auto}.site-header nav a{font-size:10px;letter-spacing:0}.site-header nav a:first-child,.site-header nav a:last-child{display:none}.review-trigger{font-size:0;padding:8px;gap:0}.tiny-square{height:11px;width:11px}.scene{padding:103px 7% 70px;min-height:0}.hero{min-height:980px;display:block;padding-top:122px}.hero-copy{width:100%;max-width:none;position:relative;z-index:2}.eyebrow{font-size:9px;margin-bottom:26px}.greeting{font-size:11px}h1{font-size:46px;line-height:1.27;letter-spacing:-.045em}.intro-text{font-size:11px;margin-top:21px}.desktop-break{display:none}.text-link{font-size:11px;margin-top:19px}.round-arrow{width:30px;height:30px}.hero-footnote{font-size:8px;margin-top:21px;gap:10px}.actor{display:none}.scene:after{content:"";position:relative;display:block;background:url('assets/avatar-placeholder.webp') center center/auto 107% no-repeat;width:210px;height:310px;margin:28px 0 0 auto;pointer-events:none}.hero:after{position:absolute;right:3%;bottom:79px;height:355px;width:230px;margin:0}.world-orbit{width:180vw;height:180vw;top:-35vw;left:0}.architecture{top:45%;width:70vw;right:-25vw;height:80vh;opacity:.5}.actor-caption{display:flex;top:auto;bottom:220px;left:8%;right:auto;font-size:9px}.actor-caption small{font-size:6px}.small-star{font-size:24px}.scroll-cue{bottom:48px;left:7%;font-size:9px}.journey{padding-top:100px;padding-bottom:67px}.journey-content{width:100%;max-width:none}.section-kicker{font-size:9px}.section-heading{margin:22px 0 30px;display:block}.section-heading h2{font-size:35px}.section-heading>p{font-size:11px;margin-top:18px}.timeline-row{grid-template-columns:84px 18px 1fr 18px;min-height:78px;padding:17px 0}.timeline-date{font-size:12px}.timeline-main strong{font-size:13px}.timeline-main small{font-size:9px;line-height:1.7;margin-top:4px}.timeline-type{display:none}.timeline-detail{padding:14px 12px 18px 15px;font-size:11px}.timeline-hint{font-size:9px}.journey-skillline{font-size:9px;gap:10px;margin-top:25px;flex-wrap:wrap}.journey-skillline span+span:before{margin-right:10px}.journey:after{height:230px;width:145px;margin-top:32px;margin-right:17%}.project{padding-top:100px;min-height:0}.project-right .project-content,.project-left .project-content{width:100%;margin-left:0;max-width:none}.project-topline{padding-bottom:13px}.project-count{font-size:12px}.project-title-row{padding:24px 0;gap:16px}.project-title-row h2{font-size:44px}.project-tagline{font-size:14px;line-height:1.65}.project-category{font-size:7px;letter-spacing:.04em}.project-feature{display:flex;flex-direction:column;align-items:stretch;gap:23px}.project-summary h3{font-size:15px;margin-bottom:9px}.project-summary>p{font-size:12px;max-width:95%}.project-tags{margin-top:12px}.project-tags span{font-size:8px}.role-note{margin-top:14px;padding-top:12px;font-size:10px;gap:20px}.role-note>p{font-size:10px}.role-note br{display:none}.role-note br:after{content:" / "}.media-slot{height:300px;order:0}.project:after{height:240px;width:150px;margin:25px auto 0 0}.project-left:after{margin-left:auto;margin-right:0}.case-tabs{gap:20px;margin-top:20px}.case-tabs [role=tab]{font-size:10px}.case-tabs .asset-trigger{font-size:8px}.case-panel{grid-template-columns:1fr;gap:14px;min-height:158px}.case-panel p{font-size:11px}.case-panel .result-grid{gap:12px}.result-stat strong{font-size:25px}.result-stat small{font-size:9px}.result-note{margin-top:0}.contact{min-height:900px;display:block;padding-top:105px;padding-bottom:150px}.contact-content{width:100%;max-width:none}.contact h2{font-size:38px;line-height:1.4;margin-top:25px}.contact-content>p{font-size:12px;margin-top:22px}.contact-link{font-size:16px;margin-top:26px}.closing-note{margin-top:32px;font-size:10px}.closing-note span{font-size:7px}.contact:after{height:250px;width:155px;margin-top:30px;margin-right:7%}footer{left:7%;right:7%;bottom:55px;font-size:8px}footer>span:nth-child(2){display:none}.page-rail{right:2%;font-size:7px;top:47%}.rail-track{height:47px}.chapter-caption{left:7%;bottom:17px;font-size:8px}.chapter-caption small{display:none}.draft-badge{right:7%;bottom:17px;font-size:7px}.zone-label{font-size:8px;top:auto;bottom:18px;left:7%;right:auto;max-width:75%}.zone-person{display:none!important}.project-right .zone-copy{left:7%}.show-guides .safe-copy{outline-offset:8px}dialog{padding:30px 22px;max-height:88svh}dialog h2{font-size:23px;margin-right:15px}.dialog-intro{font-size:11px}.layout-map a{gap:13px}.layout-map b{font-size:19px}.layout-map small{font-size:9px}.layout-map em{font-size:10px}.guide-toggle{font-size:10px}.contact-address{font-size:10px}.media-coordinate{font-size:6px}}
@media(max-width:370px){h1{font-size:41px}.site-header nav{gap:12px}.project-title-row h2{font-size:38px}.project-tagline{font-size:12px}.case-tabs{gap:15px}.media-slot{height:265px}.hero-footnote{font-size:7px}.contact h2{font-size:34px}}
/* Each section already has space for the fixed masthead. */
html{scroll-padding-top:0}
.actor.repositioning{opacity:0;transition:opacity .16s linear}
@media(min-width:761px){footer{bottom:78px}}
@media(max-width:760px){.role-note br{display:revert}.role-note br:after{content:none}.role-note{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.actor{will-change:auto}}
@media print{.site-header,.world,.page-rail,.chapter-caption,.draft-badge,.review-trigger,.zone-label,.asset-trigger,.scroll-cue,.actor-caption{display:none!important}.scene{padding:30px;min-height:0;break-after:page}.hero-copy,.journey-content,.project-right .project-content,.project-left .project-content,.contact-content{width:100%;margin:0}.scene:after{display:none}.case-panel{min-height:0}body{background:white}.hero,.contact{display:block}footer{position:static;margin-top:40px}}

/* v18：首屏样式沿用 v17（含宽屏镜像补边），本文件仅作版本占位，便于后续单点覆盖。 */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { min-width: 960px; }
.site-header, .page-rail, .chapter-caption, .draft-badge, .zone-label { display: none !important; }

#intro {
  --scene-width: max(100vw, calc(100svh * 1672 / 941));
  --copy-left: max(40px, calc(50% - var(--scene-width) * .35));
  --intro-size: clamp(28px, 2.5vw, 44px);
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #e6e5e2;
  color: #222326;
}
#intro::after { content: none; }
.intro-scene { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-copy { position: absolute; left: var(--copy-left); top: 50%; width: min(41vw, 620px); transform: translateY(-50%); }
#intro h1, #intro .intro-statement {
  margin: 0;
  font-family:var(--font);
  font-size: var(--intro-size);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.035em;
}
#intro h1, .intro-statement span { white-space: nowrap; }
.intro-statement span { display: block; }
.intro-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 28px; padding: 0; list-style: none; }
.intro-tags li { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid #3d3e4223; border-radius: 6px; background: #f6f5f04d; color: #525359; font-family:var(--font); font-size: clamp(12px, 1vw, 15px); font-weight: 500; line-height: 1.2; white-space: nowrap; }

.intro-scroll:focus-visible { outline: 3px solid #222326; outline-offset: 5px; }

.intro-scroll {
  display: block;
  width: 104px;
  height: 104px;
  margin: 22px 0 0 -15px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #242529;
  box-shadow: none;
}
.intro-scroll svg { display: block; width: 100%; height: 100%; fill: currentColor; transition: transform .2s ease; }
.intro-scroll:hover svg { transform: translateY(7px); }
.intro-scroll:active svg { transform: translateY(10px); }

@media (max-height: 660px) {
  #intro { --intro-size: 28px; }
  .intro-tags { margin-top: 10px; margin-bottom: 20px; }
  .intro-scroll { width: 92px; height: 92px; margin-top: 14px; margin-left: -13px; }
}
@media (prefers-reduced-motion: reduce) { .intro-scroll svg { transition: none; } }


.intro-tags { align-items: center; flex-wrap: nowrap; gap: 10px; height: 44px; margin: 16px 0 28px; }
.intro-tags li {
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; height: 40px; min-height: 40px;
  padding: 0 16px; border: 1px solid transparent; border-radius: 0;
  background: none; box-shadow: none; color: #292b30;
  font: 600 14px/1.2 var(--font);
  letter-spacing: .025em; text-shadow: none; backdrop-filter: none;
}
.tag-label { position: relative; z-index: 1; }
.intro-scroll svg { fill: none; overflow: visible; }

@media (max-height: 660px) {
  .intro-tags { margin-top: 12px; margin-bottom: 22px; }
}


/* Keep the selected v14 desktop design. The full scene stays edge-to-edge,
   anchored to its right edge so a narrower window crops the empty left wall. */
#intro { --scene-width: max(100vw, calc(100svh * 16 / 9)); }
.intro-media { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
/* Decorative media should not expose image/video menus or drag targets. */
.intro-media img, .intro-media video,
.journey-video-layer, .journey-video-layer img, .journey-video-layer video {
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.intro-media .intro-scene { z-index:auto; object-fit:cover; object-position:right center; }
.intro-final { opacity:0; }
.intro-media.is-still .intro-final { opacity:1; }

/* Preserve the source's headroom and lower edge on wide desktop windows. */
@media (min-aspect-ratio:16/9) {
 .intro-media { background:#e8e5e0; }
 .intro-media .intro-scene { object-fit:contain; }
}


/* 首屏宽屏补边（v17 新增）
   背景：窗口宽于 16:9 时，视频用 contain 完整显示（避免裁掉头顶和桌沿），
   横向剩余空间原来只填了平涂灰 #e8e5e0，和画面左侧墙面色调不合，看着像没铺满。
   做法：视频左侧画面在整段视频里静止不动，因此用首帧最左侧 1400px 水平镜像，
   与首帧拼成 3960×1440 的延展底图，垫在视频下层。
   缩放规则与视频一致（高度 100%、右对齐），延展图右侧 2560px 与视频完全重合，
   左侧镜像部分正好补上空白，接缝处像素连续。素材由 output/intro-extend-v1 生成。
   超出延展图覆盖范围（约 2.75:1 及以上超宽屏）的部分回落到接缝同色 #ede8e2。 */
@media (min-aspect-ratio:16/9) {
  .intro-media {
    background: #ede8e2 url("assets/entrance/intro-extend-left.jpg") right center / auto 100% no-repeat;
  }
}

body[data-tag-style="sticker"] .intro-tags {
  gap: 12px;
  padding: 4px 4px 7px 0;
  overflow: visible;
}

body[data-tag-style="sticker"] .intro-tags li {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid #2d2e2b;
  border-radius: 4px;
  background: #faf9f5;
  color: #272824;
  box-shadow: 3px 3px 0 #343531;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  transform: rotate(-2deg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-tag-style="sticker"] .intro-tags li::before,
body[data-tag-style="sticker"] .intro-tags li::after {
  content: none;
}

body[data-tag-style="sticker"] .intro-tags li:nth-child(2) {
  border-color: #faf9f5;
  background: #30312d;
  color: #faf9f5;
  box-shadow: 0 0 0 1px #30312d, 3px 3px 0 #30312d;
  transform: rotate(1.5deg);
}

body[data-tag-style="sticker"] .intro-tags li:nth-child(3) {
  transform: rotate(-1deg);
}

body[data-tag-style="sticker"] .intro-tags .tag-label {
  position: relative;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: none;
}

#journey.journey-redesign {
  position:relative; display:flex; align-items:center; justify-content:flex-end;
  min-height:100svh; padding:64px 6.5% 100px 50.5%; overflow:hidden;
  background:#bab6b0; color:#242529;
}
.journey-backdrop { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:left center; }
.journey-redesign .journey-content { width:100%; max-width:710px; }
.journey-redesign h2 { margin:0 0 30px; color:#242529; font-family:var(--font); font-size:clamp(44px,4.1vw,68px); font-weight:700; letter-spacing:-.055em; line-height:1.15; }
.experience-group + .experience-group { margin-top:24px; }
.experience-group h3 { margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.18em; color:#53524f; }
.experience-list { margin:0; padding:0; list-style:none; }
.experience-row { display:grid; grid-template-columns:112px minmax(0,1fr); gap:17px; align-items:center; padding:15px 0; border-bottom:1px solid #24252926; }
.experience-row time { font-size:13px; line-height:1.6; font-variant-numeric:tabular-nums; color:#50504d; white-space:nowrap; }
.experience-row strong { display:block; font-size:clamp(17px,1.5vw,23px); font-weight:650; line-height:1.4; letter-spacing:-.025em; }
.experience-row p { margin:4px 0 0; color:#4f4e4b; font-size:13px; line-height:1.6; }
.experience-row .present-dot { display:inline-block; width:5px; height:5px; margin-right:6px; background:#30312d; border-radius:50%; vertical-align:middle; }
.journey-choices { position:absolute; left:50.5%; right:6.5%; bottom:24px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.journey-choices button { padding:9px 12px; border:1px solid #2b2c2a4d; border-radius:4px; color:#42433f; background:#efeeea80; font:500 12px/1.3 var(--font); cursor:pointer; }
.journey-choices button[aria-pressed="true"] { color:#f8f7f4; background:#2c2d2a; border-color:#2c2d2a; }
.journey-choices button:focus-visible,.journey-original:focus-visible { outline:2px solid #222; outline-offset:4px; }
.journey-original { margin-left:auto; font-size:12px; color:#484944; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.journey-load-status { position:absolute; left:24px; bottom:24px; font-size:12px; color:#363734; background:#eeeae4d9; padding:8px 12px; border-radius:4px; }
body[data-scene="journey"] > .world { visibility:hidden; }
@media (max-height:760px) {
 #journey.journey-redesign { padding-top:40px; padding-bottom:78px; }
 .journey-redesign h2 { margin-bottom:22px; }
 .experience-group + .experience-group { margin-top:18px; }
 .experience-row { padding:11px 0; }
}
@media (max-width:1100px) {
 #journey.journey-redesign { padding-left:49%; padding-right:4%; }
 .journey-choices { left:49%; right:4%; }
 .experience-row { grid-template-columns:99px minmax(0,1fr); gap:12px; }
 .journey-choices button { padding:8px; font-size:11px; }
 .journey-original { font-size:11px; }
}


.journey-video-layer { position:absolute; inset:0; z-index:-1; overflow:hidden; container-type:size; background:#e7e3df url("assets/journey-porcelain-2k/first-frame.png") left center / cover no-repeat; }
.journey-video-layer .journey-backdrop { z-index:0; }
.journey-video-final { opacity:0; }
.journey-video-layer.is-complete .journey-video-final { opacity:1; }
/* Keep the generated porcelain scene unobscured. */
.journey-video-layer::after { content:none; }
@media(min-aspect-ratio:16/9) {
 .journey-video-layer { background-size:auto 100%; }
 .journey-video-layer .journey-backdrop { object-fit:contain; }
 /* Match the hero's height-based mirror extension, using only the empty right edge. */
 .journey-video-layer::before {
   content:""; position:absolute; top:0; left:calc(100cqh * 16 / 9);
   height:100%; width:calc(100cqh * 1400 / 1440);
   background:url("assets/journey-porcelain-2k/first-frame.png") right center / auto 100% no-repeat;
   transform:scaleX(-1); pointer-events:none;
 }
}

#journey.journey-redesign { padding:40px 6.5% 40px 50.5%; color:#20211f; }
.journey-redesign .journey-content { max-width:none; font-family:var(--font); }
.journey-redesign h2 { margin:0 0 26px; color:#191a18; font-size:clamp(46px,4.2vw,68px); font-weight:800; letter-spacing:-.04em; line-height:1.12; }
.journey-redesign .experience-group + .experience-group { margin-top:24px; }
.journey-redesign .experience-group h3 { display:inline-flex; margin:0 0 16px; padding:7px 12px; border:1px solid #292a27; border-radius:4px; color:#faf9f5; background:#292a27; box-shadow:2px 2px 0 #faf9f5; font-size:18px; font-weight:700; line-height:1.2; letter-spacing:.04em; }
.journey-redesign .experience-group + .experience-group h3 { color:#292a27; background:#faf9f5; box-shadow:2px 2px 0 #292a27; }
.journey-redesign .experience-list { margin-left:5px; border-left:1px solid #25262340; }
.journey-redesign .experience-row { position:relative; display:block; padding:0 0 17px 22px; border:0; }
.journey-redesign .experience-row:last-child { padding-bottom:0; }
.journey-redesign .experience-row::before { content:""; position:absolute; left:-4px; top:5px; width:7px; height:7px; border-radius:50%; background:#55564f; box-shadow:0 0 0 4px #b9b6b2; }
.journey-redesign .experience-row time { display:block; margin-bottom:5px; color:#42443e; font-family:var(--font); font-size:18px; font-weight:600; line-height:1.2; letter-spacing:.05em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.journey-redesign .experience-row strong { color:#20211e; font-size:clamp(26px,2vw,34px); font-weight:700; line-height:1.3; letter-spacing:0; }
.journey-redesign .experience-row p { margin:4px 0 0; color:#35362f; font-size:clamp(18px,1.25vw,21px); font-weight:500; line-height:1.35; }
@media(max-height:760px) {
 #journey.journey-redesign { padding-top:22px; padding-bottom:22px; }
 .journey-redesign h2 { margin-bottom:16px; }
 .journey-redesign .experience-group + .experience-group { margin-top:16px; }
 .journey-redesign .experience-group h3 { margin-bottom:10px; padding:6px 12px; }
 .journey-redesign .experience-row { padding-bottom:9px; }
 .journey-redesign .experience-row strong { font-size:clamp(26px,1.85vw,30px); line-height:1.2; }
 .journey-redesign .experience-row time { margin-bottom:3px; }
 .journey-redesign .experience-row p { margin-top:3px; font-size:18px; }
}


/* v18：经历区从「时间在上、名称在下」的竖排，改为横向三栏
   时间 | 单位 | 职位描述 —— 一行读完一条经历，整行铺满右侧可用宽度。
   列宽用 em（相对 .experience-row 的 font-size），字号随之等比缩放，各断点都不溢出。 */

#journey.journey-redesign { padding-left: 46.5%; }

.journey-redesign .journey-content { max-width: none; }

/* 去掉 v17 的左侧时间轴竖线与圆点，改用行分隔线表达表格结构 */
.journey-redesign .experience-list { margin-left: 0; border-left: 0; }

.journey-redesign .experience-row {
  position: static;
  display: grid;
  grid-template-columns: 3.6em 9.6em minmax(0, 1fr);
  column-gap: .72em;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid rgba(36, 37, 41, .13);
  font-size: clamp(24px, 1.92vw, 38px); /* 三栏列宽的基准，1em 即单位名字号 */
}
.journey-redesign .experience-row:last-child { padding-bottom: 0; border-bottom: 0; }
.journey-redesign .experience-row::before { display: none; }

.journey-redesign .experience-row time {
  display: block; margin: 0;
  color: #4b4d46; font-size: .55em; font-weight: 600; line-height: 1.4;
  letter-spacing: .045em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.journey-redesign .experience-row strong {
  display: block;
  color: #1c1d1a; font-size: 1em; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.journey-redesign .experience-row p {
  margin: 0;
  color: #3d3f38; font-size: .63em; font-weight: 500; line-height: 1.4;
}

/* 分组之间：v17 的 24px 稍紧，表格化后放宽一点，让两组有呼吸 */
.journey-redesign .experience-group + .experience-group { margin-top: 30px; }

@media (max-height: 760px) {
  .journey-redesign .experience-row { padding: 15px 0; }
  .journey-redesign .experience-group + .experience-group { margin-top: 22px; }
}

/* 窄桌面（≤1250px）：字号已触底，列宽改为弹性，避免描述被挤到换行 */
@media (max-width: 1250px) {
  .journey-redesign .experience-row { grid-template-columns: 3.3em minmax(0, 1fr) minmax(0, 1fr); }
}

/* Feather upward over the first scene only; keep the second scene clear. */
.scene-bridge {
  --bridge-white: 235,232,228;
  position:relative; z-index:3; height:30px;
  background:rgb(var(--bridge-white)); pointer-events:none;
}
.scene-bridge::before, .scene-bridge::after {
  content:""; position:absolute; left:0; right:0; pointer-events:none;
}
.scene-bridge::before {
  bottom:100%; height:clamp(96px,14svh,128px);
  background:linear-gradient(to bottom,rgba(var(--bridge-white),0),rgba(var(--bridge-white),.18) 18%,rgba(var(--bridge-white),.65) 45%,rgba(var(--bridge-white),.95) 68%,rgb(var(--bridge-white)) 82%);
}
.scene-bridge::after { content:none; }
/* Static porcelain reference: preserve the source image and remove the old grey reading overlay. */
.journey-image-layer { position:absolute; inset:0; z-index:-1; overflow:hidden; background:#e7e3df url("assets/journey/porcelain-reference.png") left center / 100% 100% no-repeat; }
@media (min-aspect-ratio:16/9) {
  .journey-image-layer .journey-backdrop { object-fit:contain; }
}


/* Bulu case study: fixed left copy, continuous scene on the right. */
#bulu.bulu-case {
  position:relative; isolation:isolate; min-height:100svh; overflow:hidden;
  padding:clamp(98px,13svh,142px) 6.5% clamp(38px,6svh,72px);
  display:flex; align-items:center; color:#262725;
  background:#f2efec url("assets/bulu/background-strip.png") left top/100% 100% no-repeat;
}
#bulu.bulu-case::after { content:none; }
body[data-scene="bulu"] > .world { visibility:hidden; }
.bulu-media { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.bulu-media video { display:block; width:100%; height:100%; object-fit:cover; object-position:right center; }
.bulu-background-extension { display:none; position:absolute; left:0; top:0; height:100%; pointer-events:none; }
.has-background-extension .bulu-background-extension { display:block; }
.has-background-extension video { position:relative; mask-image:linear-gradient(to right, transparent var(--bulu-left-gap), #000 calc(var(--bulu-left-gap) + 96px)); }
.bulu-transition { position:absolute; top:clamp(28px,4.5svh,52px); left:6.5%; right:6.5%; display:flex; align-items:center; gap:22px; font-size:18px; font-weight:600; letter-spacing:.06em; }
.bulu-case-number { font-size:11px; color:#7d7b78; font-weight:400; letter-spacing:.12em; }
.bulu-copy { position:relative; width:43%; max-width:650px; }
.bulu-meta { margin:0 0 15px; color:#73706c; font-size:13px; letter-spacing:.02em; }
.bulu-meta > span { margin:0 10px; opacity:.45; }
.bulu-copy h2 { display:flex; align-items:baseline; flex-wrap:wrap; gap:18px; margin:0; font-family:var(--font); font-size:clamp(64px,6.3vw,102px); font-weight:650; line-height:1.02; letter-spacing:-.045em; }
.bulu-copy h2 > span { font-size:clamp(15px,1.25vw,21px); font-weight:500; letter-spacing:.02em; }
.bulu-lead { margin:23px 0 10px; font-size:clamp(22px,1.9vw,30px); line-height:1.45; letter-spacing:-.02em; font-weight:550; }
.bulu-description { max-width:540px; margin:0; font-size:clamp(14px,1.16vw,18px); line-height:1.85; color:#686661; }
.bulu-contributions { margin:27px 0 0; }
.bulu-contributions > div { padding:13px 0; border-top:1px solid #302b2420; }
.bulu-contributions dt { font-size:15px; line-height:1.5; font-weight:600; }
.bulu-contributions dt > span { display:inline-block; width:28px; color:#97918a; font-size:10px; font-weight:400; letter-spacing:.05em; vertical-align:1px; }
.bulu-contributions dd { margin:5px 0 0 28px; color:#69655f; font-size:13px; line-height:1.75; max-width:530px; }
.bulu-progress { display:flex; align-items:flex-start; gap:10px; margin-top:20px; }
.bulu-progress-dot { width:6px; height:6px; margin-top:6px; border-radius:50%; background:#777f68; flex:none; }
.bulu-progress p { margin:0; line-height:1.5; }
.bulu-progress strong { display:block; font-size:13px; font-weight:500; }
.bulu-progress p > span { display:block; margin-top:4px; font-size:12px; color:#817b74; }
@media (max-height:780px) {
  #bulu.bulu-case { padding-top:95px; padding-bottom:42px; }
  .bulu-meta { margin-bottom:11px; }
  .bulu-copy h2 { font-size:68px; }
  .bulu-lead { margin-top:17px; margin-bottom:8px; font-size:24px; }
  .bulu-contributions { margin-top:21px; }
  .bulu-contributions > div { padding:10px 0; }
  .bulu-progress { margin-top:14px; }
}
@media (max-aspect-ratio:4/3) {
  .bulu-media video { object-fit:contain; }
  .bulu-copy { width:44%; }
}
@media (min-aspect-ratio:16/9) {
  .bulu-media video { object-fit:contain; }
}

/* Fourth scene: office animation on the left, copy in the reserved right half. */
#claw.claw-case {
  position:relative; isolation:isolate; overflow:hidden; min-height:100svh;
  padding:clamp(95px,12svh,130px) 6.5% 65px;
  display:flex; align-items:center; color:#262725;
  background:#f2efec url('assets/doudouxia/background-strip.png') right top/100% 100% no-repeat;
}
#claw.claw-case::after { content:none; }
body[data-scene="claw"] > .world { visibility:hidden; }
.claw-media { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.claw-media video { display:block; width:100%; height:100%; object-fit:contain; object-position:left bottom; }
#claw .project-content { width:46%; max-width:650px; margin-left:auto; }
#claw .project-topline { padding-bottom:12px; }
#claw .section-kicker { font-size:14px; letter-spacing:.08em; }
#claw .claw-heading { padding:20px 0 22px; }
#claw .claw-heading h2 { font-family:var(--font); font-size:clamp(48px,4vw,68px); font-weight:500; line-height:1.15; letter-spacing:-.04em; }
#claw .title-dot { color:#b66142; }
#claw .claw-platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
#claw .claw-platforms span { padding:6px 10px; border:1px solid #51483e30; border-radius:6px; font-size:14px; line-height:1.35; color:#49433e; background:#ffffff55; }
#claw .claw-heading > p { font-size:clamp(19px,1.5vw,23px); line-height:1.6; margin-top:17px; color:#48433e; }
#claw .claw-story { border-top:1px solid #51483e26; padding-top:20px; font-size:clamp(17px,1.15vw,19px); line-height:1.85; color:#514b45; }
#claw .claw-story strong { font-weight:600; color:#292724; }
#claw .claw-access { display:flex; align-items:flex-start; gap:24px; margin-top:26px; padding-top:22px; border-top:1px solid #51483e26; }
#claw .claw-qr { display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; font-size:14px; color:#514b45; }
#claw .claw-qr img { display:block; width:132px; height:132px; border-radius:10px; }
#claw .claw-web-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:132px; height:132px; flex:none; padding:10px; margin:0; border-radius:10px; background:#292724; color:#fff; font-size:15px; font-weight:500; transition:background .2s; }
#claw .claw-web-link:hover { background:#514339; }
#claw .claw-web-link:focus-visible, #claw .claw-qr:focus-visible { outline:3px solid #b66142; outline-offset:5px; }
#claw .zone-copy { left:53%; }
#claw .zone-person { left:6.5%; right:auto; }
@media (min-aspect-ratio:16/9) {
  .claw-media video { object-fit:contain; }
}
@media (max-aspect-ratio:4/3) {
  .claw-media video { object-fit:contain; }
}
@media (max-height:780px) {
  #claw.claw-case { padding-top:50px; padding-bottom:40px; }
  #claw .claw-heading { padding:15px 0 16px; }
  #claw .claw-story { padding-top:16px; line-height:1.75; }
  #claw .claw-access { margin-top:18px; padding-top:16px; }
  #claw .claw-qr img { width:128px; height:128px; }
}
@media (max-aspect-ratio:16/9) {
  #claw.claw-case { background-image:url('assets/doudouxia/top-strip.png'); }
}

/* Fifth scene: project copy on the left, photo-review animation on the right. */
#yaopai.yaopai-case {
  position:relative; isolation:isolate; overflow:hidden; min-height:100svh;
  padding:clamp(95px,12svh,130px) 6.5% 65px;
  display:flex; align-items:center; color:#262725;
  background:#f9f6f7 url('assets/yuepaiya/background-strip.png') left top/100% 100% no-repeat;
}
#yaopai.yaopai-case::after { content:none; }
body[data-scene="yaopai"] > .world { visibility:hidden; }
.yaopai-media { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.yaopai-media video { display:block; width:100%; height:100%; object-fit:contain; object-position:right bottom; }
#yaopai .project-content { width:46%; max-width:650px; margin-left:0; }
#yaopai .project-topline { padding-bottom:13px; }
#yaopai .project-title-row { display:block; padding:22px 0 18px; }
#yaopai .project-title-row h2 { font-size:clamp(48px,5vw,80px); }
#yaopai .project-tagline { margin-top:15px; font-family:var(--font); font-size:clamp(17px,1.6vw,25px); }
#yaopai .project-tagline br { display:none; }
#yaopai .project-feature { display:block; }
#yaopai .media-yaopai { display:none; }
#yaopai .project-summary > p { font-size:clamp(12px,1vw,16px); line-height:1.8; }
#yaopai .project-summary h3 { font-size:16px; margin-bottom:8px; }
#yaopai .role-note { margin-top:15px; padding-top:12px; }
#yaopai .case-tabs { gap:18px; margin-top:22px; }
#yaopai .case-tabs .asset-trigger { display:none; }
#yaopai .case-panel { min-height:0; gap:20px; }
#yaopai .zone-copy { left:6.5%; }
#yaopai .zone-person { left:auto; right:6.5%; }
@media (max-height:780px) {
  #yaopai .project-title-row { padding:15px 0 12px; }
  #yaopai .project-title-row h2 { font-size:52px; }
  #yaopai .project-tagline { margin-top:10px; font-size:20px; }
  #yaopai .case-tabs { margin-top:16px; }
}
@media (max-aspect-ratio:16/9) {
  #yaopai.yaopai-case { background-image:url('assets/yuepaiya/top-strip.png'); }
}

/* Bulu: visible paging, product highlights and a self-contained download action. */
#bulu .bulu-copy { width:44%; max-width:640px; }
#bulu.bulu-case { padding-top:40px; padding-bottom:36px; }
#bulu .bulu-heading h2 { font-size:clamp(42px,3.5vw,62px); gap:16px; }
#bulu .bulu-heading h2 > span { font-size:clamp(14px,1.08vw,18px); letter-spacing:0; }
.bulu-heading { margin-bottom:17px; }
.bulu-gallery { position:relative; width:100%; }
.bulu-image-open { display:block; position:relative; width:100%; padding:0; border:1px solid #55412b15; border-radius:12px; overflow:hidden; background:#f2e4d3; cursor:zoom-in; box-shadow:0 8px 28px #4b382b08; }
.bulu-image-open img { display:block; width:100%; height:auto; aspect-ratio:1586/992; object-fit:contain; }
 .bulu-page { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:56px; padding:0; border:1px solid #ffffffb3; border-radius:16px; background:rgba(245,243,240,.6); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); color:#292724; box-shadow:0 4px 18px #211c1826,inset 0 1px 0 #ffffffb3; z-index:2; opacity:0; pointer-events:none; transition:opacity .18s ease,background .18s ease; }
.bulu-page-prev { left:12px; }
.bulu-page-next { right:12px; }
.bulu-page svg { width:23px; height:23px; }
.bulu-gallery:hover .bulu-page, .bulu-gallery:has(:focus-visible) .bulu-page, #bulu-promo-dialog:hover .bulu-page, #bulu-promo-dialog:has(:focus-visible) .bulu-page { opacity:1; pointer-events:auto; }
.bulu-page:hover { background:rgba(255,255,255,.8); }
@media (hover:none) { .bulu-page { opacity:1; pointer-events:auto; } }
@media (prefers-reduced-motion:reduce) { .bulu-page { transition:none; } }
.bulu-highlights { margin:20px 0 0; padding:0 0 0 19px; font-size:15px; line-height:1.75; color:#686057; }
.bulu-highlights li + li { margin-top:7px; }
.bulu-highlights li::marker { color:#9d7852; }
.bulu-highlights strong { color:#3f382f; font-weight:550; }
.bulu-download-row { margin-top:20px; }
.bulu-download { display:inline-flex; align-items:center; gap:14px; padding:12px 20px; background:#292925; color:#fffdf7; border-radius:10px; text-decoration:none; white-space:nowrap; transition:background .2s; }
.bulu-download:hover { background:#504639; }
.bulu-download > svg { width:26px; height:26px; flex:none; }
.bulu-download > span { display:flex; flex-direction:column; gap:5px; }
.bulu-download strong { font-size:15px; font-weight:550; line-height:1.25; }
.bulu-download small { font-size:12px; line-height:1.35; color:#d3c9bc; }
.bulu-image-open:focus-visible,.bulu-page:focus-visible,.bulu-download:focus-visible,.bulu-promo-dialog button:focus-visible { outline:2px solid #896848; outline-offset:4px; }
.bulu-promo-dialog { margin:auto; padding:14px; width:min(1000px,88vw); max-height:92svh; border:1px solid #ded4c7; border-radius:14px; background:#faf7f2; box-shadow:0 25px 100px #0004; }
.bulu-promo-dialog::backdrop { background:#211b1588; backdrop-filter:blur(8px); }
.bulu-promo-dialog img { display:block; width:100%; height:auto; max-height:78svh; object-fit:contain; border-radius:7px; }
.bulu-promo-dialog form { position:absolute; top:22px; right:22px; }
.bulu-promo-dialog form button { width:34px; height:34px; border:0; border-radius:50%; background:#fffc; font-size:25px; color:#393027; cursor:pointer; }

@media (max-height:780px) and (min-width:900px) {
  #bulu .bulu-copy { max-width:490px; }
  #bulu .bulu-heading h2 { font-size:42px; }
  .bulu-heading { margin-bottom:12px; }
  .bulu-gallery { max-width:420px; }
  .bulu-highlights { margin-top:15px; font-size:14px; line-height:1.6; }
  .bulu-highlights li + li { margin-top:5px; }
  .bulu-download-row { margin-top:14px; }
}

/* Yuepai: positioning, real product screens, contribution and results. */
#yaopai.yaopai-case { padding-top:72px; padding-bottom:40px; }
#yaopai .yuepai-copy { width:49%; max-width:690px; }
.yuepai-eyebrow { display:flex; gap:12px; align-items:center; margin-bottom:12px; font-size:15px; color:#65605b; }
.yuepai-eyebrow > span:first-child { padding:5px 11px; border:1px solid #c4b69b; border-radius:5px; color:#76613a; }
.yuepai-heading h2 { font-size:clamp(38px,3.4vw,58px); letter-spacing:-.04em; display:flex; align-items:baseline; gap:16px; white-space:nowrap; }
.yuepai-heading h2 > span { font-family:var(--font); font-size:clamp(16px,1.15vw,20px); font-weight:400; letter-spacing:0; }
.yuepai-heading > p { font-size:16px; line-height:1.7; margin:10px 0 20px; color:#625e59; }
.yuepai-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.yuepai-shot { text-align:left; min-width:0; border:0; padding:0; background:none; cursor:zoom-in; color:inherit; }
.yuepai-screen { display:flex; justify-content:center; height:clamp(170px,24svh,245px); overflow:hidden; padding:10px 0 0; border-radius:12px; border:1px solid #e4dfd7; background:#ede8e1; transition:background .2s; }
.yuepai-screen img { height:100%; width:auto; max-width:100%; object-fit:contain; object-position:top; border-radius:6px 6px 0 0; box-shadow:0 0 12px #473c3915; }
.yuepai-shot:hover .yuepai-screen { background:#e8ddc8; }
.yuepai-shot:focus-visible { outline:2px solid #9a7337; outline-offset:5px; border-radius:5px; }
.yuepai-shot > strong { display:flex; justify-content:space-between; font-size:17px; font-weight:600; margin-top:9px; }
.yuepai-shot > span:last-child { display:block; font-size:15px; line-height:1.5; color:#746c62; margin-top:3px; }
.yuepai-contribution { border-top:1px solid #d9d1c6; margin-top:20px; padding-top:15px; }
.yuepai-contribution h3 { font-size:18px; margin-bottom:10px; }
.yuepai-contribution p { display:flex; gap:16px; font-size:16px; line-height:1.65; margin:5px 0; }
.yuepai-contribution p > strong { flex-shrink:0; width:84px; font-weight:500; }
.yuepai-contribution p > span { color:#645e57; }
.yuepai-results { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; padding-top:14px; border-top:1px solid #d9d1c6; }
.yuepai-results > div + div { padding-left:18px; border-left:1px solid #d9d1c6; }
.yuepai-results strong { display:block; font-size:clamp(29px,2.8vw,42px); font-weight:500; letter-spacing:-.04em; line-height:1.2; font-variant-numeric:tabular-nums; }
.yuepai-results strong > span { font-size:.65em; padding-left:3px; }
.yuepai-results > div > span { display:block; font-size:15px; color:#746c62; margin-top:5px; }
.yuepai-image-dialog { width:min(580px,90vw); padding:26px; background:#faf8f4; border-radius:14px; max-height:92svh; }
.yuepai-image-dialog form { position:sticky; top:0; display:flex; justify-content:flex-end; z-index:1; }
.yuepai-image-dialog button { background:#292622; color:white; border-radius:20px; padding:8px 15px; font-size:16px; }
.yuepai-image-dialog h2 { margin:0 0 6px; font-size:26px; }
.yuepai-image-dialog p { font-size:16px; color:#686159; margin-bottom:18px; }
.yuepai-image-dialog img { width:100%; height:auto; display:block; }
@media (max-height:780px) {
  #yaopai.yaopai-case { padding-top:40px; padding-bottom:30px; }
  .yuepai-eyebrow { margin-bottom:7px; }
  .yuepai-heading h2 { font-size:40px; }
  .yuepai-heading > p { margin:7px 0 14px; }
  .yuepai-contribution { margin-top:14px; padding-top:12px; }
  .yuepai-contribution h3 { margin-bottom:6px; }
  .yuepai-results { margin-top:12px; padding-top:12px; }
}
@media (max-width:1350px) {
  .yuepai-heading h2 { display:block; }
  .yuepai-heading h2 > span { display:block; margin-top:5px; font-size:18px; }
  .yuepai-gallery { gap:12px; }
  .yuepai-shot > span:last-child { font-size:15px; }
  .yuepai-contribution p { gap:8px; }
}

/* Fourth scene: user-provided full-frame feature screenshots. */
#claw.claw-case { padding-top:48px; padding-bottom:48px; }
#claw .claw-heading { padding:16px 0; }
#claw .claw-heading h2 { font-size:clamp(44px,3.5vw,60px); }
#claw .claw-heading > p { margin-top:12px; font-size:19px; line-height:1.5; }
#claw .claw-heading > p br { display:initial; }
#claw .claw-platforms { margin-top:12px; }
#claw .claw-gallery { margin-bottom:16px; }
.claw-image-open { display:block; position:relative; width:100%; padding:0; overflow:hidden; border:1px solid #51483e30; border-radius:10px; background:#fff; cursor:zoom-in; box-shadow:0 5px 20px #47301c08; }
.claw-image-open img { display:block; width:100%; height:auto; aspect-ratio:1920/911; object-fit:contain; }
.claw-gallery { position:relative; }
.claw-gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; width:44px; height:56px; padding:0 0 4px; border:1px solid #ffffffb3; border-radius:16px; color:#292724; background:rgba(245,243,240,.6); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 4px 18px #211c1826,inset 0 1px 0 #ffffffb3; font-size:36px; line-height:1; opacity:0; pointer-events:none; transition:opacity .18s ease,background .18s ease; }
.claw-prev { left:12px; }
.claw-next { right:12px; }
.claw-gallery:hover .claw-gallery-arrow, .claw-gallery:has(:focus-visible) .claw-gallery-arrow, #claw-image-dialog:hover .claw-gallery-arrow, #claw-image-dialog:has(:focus-visible) .claw-gallery-arrow { opacity:1; pointer-events:auto; }
.claw-gallery-arrow:hover { background:rgba(255,255,255,.8); }
.claw-gallery-arrow:focus-visible, .claw-image-open:focus-visible { outline:3px solid #b66142; outline-offset:3px; }
@media (hover:none) { .claw-gallery-arrow { opacity:1; pointer-events:auto; } }
@media (prefers-reduced-motion:reduce) { .claw-gallery-arrow { transition:none; } }
#claw .claw-story { padding-top:14px; line-height:1.7; }
#claw .claw-access { margin-top:16px; padding-top:16px; }
#claw-image-dialog { width:min(1500px,94vw); max-width:94vw; max-height:94svh; padding:48px 18px 14px; border-radius:12px; background:#faf9f7; }
#claw-image-dialog > img { display:block; width:100%; height:auto; max-height:calc(94svh - 72px); object-fit:contain; }
#claw-image-dialog .claw-dialog-close { position:absolute; top:6px; right:12px; width:36px; height:36px; font-size:28px; }
#claw-image-dialog::backdrop { background:#161311b8; backdrop-filter:blur(5px); }

/* 联系：居中、紧凑的米白收尾，仅保留一个邮件入口。 */
#contact {
  min-height: max(400px, 54svh);
  padding: 58px 7.6% 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match the warm white sampled from the preceding scene's lower background edge. */
  background: #fbf6f3;
  color: #292925;
  text-align: center;
}
#contact::after { content: none; }
body[data-scene="contact"] > .world { visibility: hidden; }
#contact .contact-content { width: 100%; max-width: 720px; }
#contact h2 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
}
#contact .contact-link {
  display: inline-block;
  margin-top: 26px;
  padding: 8px 0;
  border: 0;
  color: #45443f;
  font-size: clamp(20px, 1.65vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .015em;
  text-decoration: underline;
  text-decoration-color: #45443f55;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: color .2s, text-decoration-color .2s;
}
#contact .contact-link:hover { color: #161613; text-decoration-color: currentColor; }
#contact .contact-link:focus-visible { outline: 2px solid #45443f; outline-offset: 10px; border-radius: 2px; }
#contact .contact-invitation { margin-top: 18px; color: #68625e; font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: .02em; }
#contact .contact-footer {
  position: absolute;
  left: 7.6%;
  right: 7.6%;
  bottom: 28px;
  display: flex;
  justify-content: center;
  padding: 0;
  border: 0;
  color: #77746d;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .055em;
}
#contact .contact-footer-divider { margin: 0 9px; }

#claw .project-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #51483e26; }

/* Consistent section labels sit beside their project content, close to the title. */
.case-intro { display:flex; align-items:center; gap:20px; margin-bottom:14px; font-size:clamp(23px,1.65vw,28px); line-height:1.3; font-weight:600; letter-spacing:.015em; color:#35332e; }
.case-intro .case-intro-count { font-size:12px; font-weight:400; color:#84796e; letter-spacing:.08em; }
#claw .claw-heading { padding-top:0; }
#yaopai .yuepai-eyebrow { margin:10px 0 0; }
#yaopai .yuepai-heading > p { margin-top:10px; }
@media (max-height:780px) {
  #bulu.bulu-case { padding-top:28px; padding-bottom:28px; }
  .case-intro { margin-bottom:12px; }
  #yaopai.yaopai-case { padding-top:28px; padding-bottom:28px; }
  #yaopai .yuepai-screen { height:155px; }
  #yaopai .yuepai-heading > p { margin:8px 0 12px; }
}

/* Keep compact desktop windows from stretching the office scene vertically. */
@media (max-height:780px) {
  #claw.claw-case { padding-top:20px; padding-bottom:20px; }
  #claw .case-intro { margin-bottom:8px; }
  #claw .claw-heading { padding-bottom:10px; }
  #claw .claw-heading h2 { font-size:40px; }
  #claw .claw-platforms { margin-top:8px; }
  #claw .claw-image-open img { height:clamp(160px,26svh,190px); aspect-ratio:auto; }
  #claw .claw-gallery { margin-bottom:10px; }
  #claw .claw-story { padding-top:10px; line-height:1.65; }
  #claw .claw-access { margin-top:10px; padding-top:10px; }
  #claw .claw-qr img { width:112px; height:112px; }
}

#claw .claw-story ul { margin:0; padding-left:20px; list-style:disc; }
#claw .claw-story li + li { margin-top:7px; }
#claw .claw-story li::marker { color:#88705f; font-size:.75em; }
#claw .claw-web-link svg { flex:none; }
@media (max-height:780px) { #claw .claw-web-link { width:112px; height:112px; gap:10px; } #claw .claw-story li + li { margin-top:3px; } }

/* Shared typography and metadata: one scale for all three project cases. */
:root {
  --case-title-size: clamp(42px, 3.5vw, 60px);
  --case-body-size: clamp(17px, 1.05vw, 18px);
  --case-label-size: 15px;
  --case-text: #514b45;
}
#bulu .bulu-heading h2,
#claw .claw-heading h2,
#yaopai .yuepai-heading h2 {
  display:block; margin:0; font-family:var(--font);
  font-size:var(--case-title-size); font-weight:700;
  line-height:1.15; letter-spacing:-.025em; white-space:normal;
}
#bulu .bulu-heading, #claw .claw-heading, #yaopai .yuepai-heading {
  margin:0 0 16px; padding:0; border:0;
}
.case-intro, #claw .case-intro { margin-bottom:12px; }
#bulu .case-labels, #claw .case-labels, #yaopai .case-labels {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:12px 0 0; padding:0; font-size:var(--case-label-size);
}
#bulu .case-labels > span, #claw .case-labels > span, #yaopai .case-labels > span {
  display:inline-flex; align-items:center; padding:5px 10px;
  border:1px solid #51483e30; border-radius:6px;
  background:#ffffff55; color:var(--case-text);
  font-family:var(--font); font-size:var(--case-label-size);
  font-weight:500; line-height:1.4; letter-spacing:0;
}
#bulu .case-points, #claw .case-points, #yaopai .case-points {
  margin:0; padding:0 0 0 20px; list-style:disc;
  font-size:var(--case-body-size); font-weight:400;
  line-height:1.7; color:var(--case-text);
}
#bulu .case-points { margin-top:18px; }
#bulu .case-points li + li, #claw .case-points li + li, #yaopai .case-points li + li { margin-top:6px; }
#bulu .case-points li::marker, #claw .case-points li::marker, #yaopai .case-points li::marker { color:#88705f; font-size:.75em; }
#bulu .case-points strong, #claw .case-points strong, #yaopai .case-points strong { font-weight:600; color:#292724; }
#yaopai .yuepai-heading > p { margin:12px 0 0; font-size:var(--case-body-size); line-height:1.7; color:var(--case-text); }
#yaopai .yuepai-contribution { margin-top:18px; padding-top:14px; }
.bulu-download strong, #claw .claw-web-link { font-size:16px; font-weight:600; }
#claw .claw-web-link { padding-inline:6px; text-align:center; }
#claw .claw-web-link > span { white-space:nowrap; }
.bulu-download small, #claw .claw-qr { font-size:14px; line-height:1.5; }

#claw button.claw-qr { padding:0; border:0; background:none; font-family:inherit; cursor:zoom-in; }
#claw-qr-dialog { width:min(420px,92vw); max-height:90svh; padding:34px 30px 24px; border:1px solid #e4ddd6; border-radius:18px; background:#fbf6f3; text-align:center; }
#claw-qr-dialog::backdrop { background:#211b1588; backdrop-filter:blur(8px); }
#claw-qr-dialog h2 { margin:8px 0 24px; font-size:22px; font-weight:600; }
#claw-qr-dialog > img { display:block; width:min(320px,100%); height:auto; margin:auto; background:white; border-radius:12px; }
#claw-qr-dialog > p { margin:20px 0 0; font-size:15px; color:#746c62; }
#yuepai-image-dialog h2 { font-family:var(--font); font-weight:700; }
.journey-redesign .experience-row { grid-template-columns:4.1em 9.6em minmax(0,1fr); column-gap:.6em; }
.journey-redesign .experience-row time { font-size:max(14px,.55em); letter-spacing:0; }
.journey-redesign .experience-row p { font-size:max(16px,.63em); }
@media (max-width:1250px) {
  .journey-redesign .experience-row { grid-template-columns:4.1em minmax(0,1fr) minmax(0,1fr); }
}
@media (max-height:780px) {
  :root { --case-title-size:42px; }
  #bulu .bulu-heading, #claw .claw-heading, #yaopai .yuepai-heading { margin-bottom:12px; }
  #bulu .case-labels, #claw .case-labels, #yaopai .case-labels { margin-top:10px; }
  #bulu .case-points { margin-top:14px; }
  #bulu .case-points, #claw .case-points, #yaopai .case-points { line-height:1.65; }
  #bulu .case-points li + li, #claw .case-points li + li, #yaopai .case-points li + li { margin-top:4px; }
  #bulu .bulu-gallery { max-width:380px; }
  #yaopai .yuepai-contribution { margin-top:14px; padding-top:12px; }
}