/* A landscape, a personal signature, then four full-size project chapters. */
.intro-stage{position:relative;height:200svh;width:100vw;margin:0 calc(50% - 50vw);background:#1d2525;scroll-snap-align:start}
.scene-sentinel{position:absolute;top:0;left:0;height:100svh;width:1px;pointer-events:none}
.atmosphere .intro-stage .wildcard-intro{position:sticky;top:0;margin:0;width:100%;padding:105px max(42px,calc((100vw - 1200px)/2)) 65px;overflow:hidden;transform-origin:50% 0}
.atmosphere .hero-copy{width:56%;max-width:670px;padding:0}
.atmosphere .hero-copy:before{display:none}
.atmosphere .hero-copy h1{font-size:clamp(48px,5vw,73px);line-height:1.2;letter-spacing:.08em}
.atmosphere .hero-copy .hero-kicker{margin-bottom:17px}
.atmosphere .hero-disciplines{font-size:11px}
.atmosphere .wildcard-intro .intro-line{font-size:12px;margin-top:14px}
.atmosphere .work-jump{margin-top:17px}
.portrait-layer{right:0;max-width:45%;height:100%;mask-image:linear-gradient(90deg,transparent,#000 19%,#000 94%,transparent)}
.portrait-wash{background:linear-gradient(90deg,#1d2525 0%,#1d2525 47%,#1d2525c2 59%,transparent 75%),linear-gradient(0deg,#1d2525b3,transparent 22%)}
.glass-ribbon-one{left:61%;width:6%}.glass-ribbon-two{right:1%;width:3%}
.left-landscape{position:absolute;left:0;top:0;width:64%;height:100%;overflow:hidden;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 8% 100%,#75634229,transparent 70%);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.left-landscape .type-sky{opacity:.6;mask-image:radial-gradient(ellipse 270px 230px at 35% 45%,#0001 12%,#000 100%)}
.left-landscape .meteor-type{font-size:9px;letter-spacing:1.5px;color:#d7c8a5}
.left-landscape .meteor-type i{width:100px}
@keyframes landscape-meteor{0%{transform:translate3d(0,0,0);opacity:0}10%,75%{opacity:.7}100%{transform:translate3d(-580px,1000px,0);opacity:0}}
@keyframes landscape-tide{from{transform:translate3d(-18px,0,0)}to{transform:translate3d(18px,-8px,0)}}
@media(prefers-reduced-motion:no-preference){
 .scene-running .left-landscape .meteor{animation:landscape-meteor var(--duration) linear infinite;animation-delay:var(--lag)}
 .scene-running .hero-waves{animation:landscape-tide 9s ease-in-out infinite alternate}
 .scene-paused .left-landscape .meteor,.scene-paused .hero-waves{animation-play-state:paused}
}
.left-landscape .hero-waves{left:-8%;bottom:-28px;width:122%;height:215px;opacity:.8;stroke:#cbb47c;stroke-width:1}
.lion-signature{position:relative;height:191px;width:480px;max-width:100%;margin:6px 0 7px}
.atmosphere .lion-signature .english-name{position:absolute;left:0;top:22px;margin:0;font-size:44px;letter-spacing:-1.6px}
.hero-lion-card{position:absolute;left:325px;top:-5px;width:122px;padding:6px 6px 8px;background:#ede1c9;transform:rotate(8deg);box-shadow:0 9px 18px #090f1045;transition:transform .35s;z-index:3}
.hero-lion-card:before{content:'';position:absolute;top:-7px;left:36%;width:44px;height:17px;background:#c9b788a6;transform:rotate(-18deg)}
.hero-lion-card img{display:block;width:100%;height:144px;object-fit:cover}
.hero-lion-card .door-label{font-size:9px;padding-top:6px;letter-spacing:.5px}
.hero-lion-card:hover,.hero-lion-card:focus-within{transform:rotate(1deg) translateY(-6px)}
.lion-doodle{position:absolute;left:100px;top:54px;width:215px;height:113px;color:#d9b77c;transform:rotate(-6deg);overflow:visible;pointer-events:none}
.doodle-line{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes draw-doodle{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes title-arrive{from{opacity:0;transform:translateY(24px) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(prefers-reduced-motion:no-preference){
 .home-motion-ready .doodle-line{animation:draw-doodle 1.3s .55s cubic-bezier(.3,.6,.2,1) both}
 .home-motion-ready .name-character{animation:title-arrive .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*100ms)}
}
.atmosphere .hero-bottom{gap:20px;font-size:8px;left:max(42px,calc((100vw - 1200px)/2));right:max(42px,calc((100vw - 1200px)/2));justify-content:flex-start}
.hero-bottom>a{margin-left:auto;font-size:24px}.hero-bottom .sky-motion{background:#26302a8c;min-height:30px;font-size:9px}
/* A sticky opening recedes as the curved edge of the first project rises over it. */
.project-chapter{--chapter-bg:#e5ebe3;--chapter-ink:#344f48;--chapter-muted:#697970;--chapter-line:#8ca39640;position:relative;width:100vw;margin:0 calc(50% - 50vw);min-height:100svh;background:var(--chapter-bg);color:var(--chapter-ink);padding:42px max(52px,calc((100vw - 1200px)/2)) 44px;z-index:3;display:flex;flex-direction:column;justify-content:center;isolation:isolate;overflow:clip}
.chapter-fluentide{margin-top:-100svh;border-radius:65px 65px 0 0;box-shadow:0 -20px 60px #091b1533}
.chapter-huatuobang{--chapter-bg:#efecdf;--chapter-ink:#515b3e;--chapter-muted:#797b68;--chapter-line:#9ba08250}
.chapter-stylecapture{--chapter-bg:#e8e4eb;--chapter-ink:#594a64;--chapter-muted:#7b7081;--chapter-line:#9b8aa448}
.chapter-smartcloud{--chapter-bg:#e1e9e9;--chapter-ink:#3d5962;--chapter-muted:#6d8084;--chapter-line:#829a9c50}
.chapter-topline,.chapter-bottom{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:1.4px;color:var(--chapter-muted)}
.chapter-topline{position:absolute;top:32px;left:max(52px,calc((100vw - 1200px)/2));right:max(52px,calc((100vw - 1200px)/2));padding-bottom:14px;border-bottom:1px solid var(--chapter-line)}
.chapter-bottom{position:absolute;bottom:20px;left:max(52px,calc((100vw - 1200px)/2));right:max(52px,calc((100vw - 1200px)/2))}.chapter-bottom a{font-size:25px}
.chapter-layout{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);align-items:center;gap:75px;padding:44px 0 22px}
.project-visual{position:relative;min-width:0;perspective:1200px}
.project-narrative{min-width:0}
.project-narrative .overline{font-size:10px;letter-spacing:2px;margin-bottom:18px;color:var(--chapter-muted)}
.project-narrative h2{font-size:clamp(40px,4.6vw,64px);letter-spacing:-1px;line-height:1.15;font-weight:500;color:var(--chapter-ink);margin-bottom:19px}
.project-deck{font:18px/1.75 var(--serif);max-width:26em;letter-spacing:.2px;margin-bottom:13px}
.project-role{font-size:10px;color:var(--chapter-muted);padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--chapter-line)}
.project-description p{font-size:12px;line-height:2;color:var(--chapter-ink);opacity:.86;margin-bottom:12px}
.project-outcome{margin:22px 0 23px;padding-left:14px;border-left:2px solid #a88c5f}
.project-outcome strong{display:block;font:500 17px/1.5 var(--serif)}
.project-outcome>span{display:block;font-size:10px;line-height:1.8;color:var(--chapter-muted);margin-top:5px}
.project-actions{display:flex;align-items:center;gap:28px;font-size:11px}
.project-actions .case-link{padding-bottom:9px;border-bottom:1px solid var(--chapter-ink);font-size:12px;display:inline-flex;align-items:center;gap:30px}
.project-actions .case-link>span:last-child{font-size:18px}
.project-actions>a:last-child{color:var(--chapter-muted)}
.project-title .roll-char{line-height:1.25}.project-title .roll-back{color:var(--chapter-ink)}
.project-title:hover .roll-front{transform:translateY(-115%) rotateX(70deg)}.project-title:hover .roll-back{transform:translateY(0)}
.browser-shot{border:1px solid #798f7840;border-radius:12px;overflow:hidden;background:#f9faf5;box-shadow:0 24px 42px #3159441c;transform:rotate(-3deg);transition:transform .5s}
.browser-shot:hover{transform:rotate(-1deg) translateY(-5px)}
.window-bar{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;font:9px var(--mono);color:#85907e;border-bottom:1px solid #91a88d22;background:#f5f7f2}
.window-bar>span:first-child{font-size:7px;letter-spacing:3px;color:#b9c7ac}
.browser-shot img{width:100%;height:auto;display:block}
.visual-note{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:35px;font:9px/1.8 var(--mono);letter-spacing:.3px;color:var(--chapter-muted)}
.chapter-huatuobang .chapter-layout,.chapter-smartcloud .chapter-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.13fr)}
.chapter-huatuobang .project-visual,.chapter-smartcloud .project-visual{order:2}
.garden-scene{display:block;width:92%;margin:0 0 0 6%;border-radius:46% 46% 6px 6px;overflow:hidden;transform:rotate(3deg);box-shadow:0 18px 35px #64674220}
.garden-scene img{display:block;width:100%;height:290px;object-fit:cover}
.garden-details{display:flex;gap:14px;align-items:flex-start;position:relative;margin-top:-74px;z-index:2}
.garden-details a{display:block;width:32%;padding:5px;background:#f7f4e8;box-shadow:0 10px 20px #424a341c;transform:rotate(-5deg)}
.garden-details a:nth-child(2){margin-top:34px;transform:rotate(4deg)}
.garden-details img{display:block;width:100%;height:205px;object-fit:cover;object-position:top}
.chapter-huatuobang .visual-note{margin-top:18px}
.wardrobe-stage{height:480px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse,#b9a3c32e,transparent 68%)}
.wardrobe-word{position:absolute;left:-3%;top:16%;font:italic clamp(56px,6.5vw,95px)/1.35 Georgia,serif;letter-spacing:-4px;color:#beadc558;transform:rotate(-9deg)}
.phone-shot{display:block;position:relative;max-width:62%;height:450px;padding:8px;background:#faf7fa;border:1px solid #c8bccd;box-shadow:14px 22px 45px #65477525;border-radius:22px;transform:rotate(6deg);transition:transform .5s;overflow:hidden}
.phone-shot:hover{transform:rotate(1deg) translateY(-5px)}
.phone-shot img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:15px}
.export-shot{width:91%;transform:rotate(3deg)}.export-shot img{max-height:330px;object-fit:contain}
.forum-shot{display:block;width:67%;margin:-24px 0 0 auto;position:relative;z-index:2;border:6px solid #f3f4ed;box-shadow:0 12px 25px #304b5129;transform:rotate(-5deg);transition:transform .4s}
.forum-shot:hover{transform:rotate(-1deg) translateY(-4px)}.forum-shot img{display:block;width:100%;height:auto;max-height:175px;object-fit:contain;background:#fff}
.chapter-smartcloud .visual-note{margin-top:25px}
.atmosphere .life-preview{position:relative;z-index:4}.album-entry-layout{grid-template-columns:1fr}.life-preview .life-preview-link{gap:28px;grid-template-columns:1.5fr 1fr 1fr}.life-preview .life-preview-link img{height:360px}.life-preview .life-preview-link figure:first-child img{height:280px}
.page-index{right:15px;gap:7px}.page-index a{font-size:8px;letter-spacing:.3px;gap:8px}.page-index a span{padding:2px 5px;background:#f5f3edc9;border-radius:2px}.on-intro .page-index a span{background:#1d2525cc}
.page-index a:after,.page-index a[aria-current]:after{display:block;height:5px;width:5px}.page-index a[aria-current]:after{height:15px;border-radius:5px}
@supports(animation-timeline:scroll()){
 @media(min-width:901px) and (min-height:681px) and (prefers-reduced-motion:no-preference){
  .intro-stage .wildcard-intro{animation:scene-recede linear both;animation-timeline:scroll(root block);animation-range:0px 100svh}
 }
}
@keyframes scene-recede{from{transform:scale(1);opacity:1}to{transform:translateY(-35px) scale(.94);opacity:.35}}
@media(min-width:901px) and (max-height:780px){
 .atmosphere .hero-copy h1{font-size:60px}.lion-signature{height:166px}.hero-lion-card{width:125px;left:306px}.hero-lion-card img{height:144px}.lion-doodle{left:65px;width:232px;top:43px}
 .chapter-layout{gap:55px;padding:38px 0 14px}.project-narrative h2{font-size:47px;margin-bottom:13px}.project-deck{font-size:16px;margin-bottom:9px}.project-role{padding-bottom:12px;margin-bottom:12px}.project-description p{font-size:12px;line-height:2;margin-bottom:10px}.project-outcome{margin:16px 0}.wardrobe-stage{height:435px}.phone-shot{height:405px}
}
@media(max-width:1100px){
 .atmosphere .intro-stage .wildcard-intro{padding-left:44px;padding-right:44px}.hero-lion-card{left:270px;width:105px}.hero-lion-card img{height:130px}.lion-doodle{left:88px;width:176px}.atmosphere .lion-signature .english-name{font-size:39px}
 .chapter-layout{gap:38px}.project-narrative h2{font-size:43px}.project-description p{font-size:11px}.project-deck{font-size:16px}.garden-scene img{height:240px}.garden-details img{height:160px}.wardrobe-stage{height:420px}.phone-shot{height:385px;max-width:72%}.visual-note{font-size:8px}
 .page-index a span{display:none}.page-index{right:11px}
}
@media(max-width:900px),(max-height:680px){
 .paged-home{scroll-snap-type:none}.intro-stage{height:auto}.atmosphere .intro-stage .wildcard-intro{position:relative}.chapter-fluentide{margin-top:0;border-radius:35px 35px 0 0}.project-chapter{min-height:auto;padding-top:85px;padding-bottom:75px}.chapter-layout{padding:0}.page-index{display:none}
}
@media(max-width:900px) and (min-width:601px){
 .atmosphere .hero-copy{width:60%}.atmosphere .hero-copy h1{font-size:52px}.lion-signature{height:183px}.hero-lion-card{left:235px}.lion-doodle{left:74px;top:56px;width:156px}.atmosphere .hero-disciplines{font-size:10px}.hero-disciplines span{padding:0 9px}
 .chapter-layout,.chapter-huatuobang .chapter-layout,.chapter-smartcloud .chapter-layout{grid-template-columns:1fr 1fr;gap:32px}.project-narrative h2{font-size:35px}.project-narrative .overline{font-size:9px}.project-description p{font-size:11px}.project-role{font-size:9px}.project-deck{font-size:15px}.project-chapter{padding-left:35px;padding-right:35px}.project-outcome strong{font-size:15px}.project-outcome>span{font-size:9px}.project-actions{gap:17px}.project-actions .case-link{gap:12px}.garden-details img{height:130px}.garden-scene img{height:210px}.wardrobe-stage{height:380px}.phone-shot{height:350px;max-width:85%}.window-bar{font-size:7px}
}
@media(max-width:600px){
 .atmosphere .intro-stage .wildcard-intro{height:100svh;min-height:650px;padding:107px 26px 58px;align-items:flex-start}
 .atmosphere .hero-copy{width:100%;max-width:100%}.atmosphere .hero-copy h1{font-size:clamp(39px,11vw,58px);letter-spacing:.045em}.atmosphere .hero-copy .hero-kicker{font-size:7px;margin-bottom:16px;letter-spacing:1.2px}
 .left-landscape{width:100%;mask-image:none;background:radial-gradient(ellipse at 0 100%,#75634216,transparent 70%)}.left-landscape .type-sky{opacity:.45;mask-image:linear-gradient(90deg,#0002,#0007)}.left-landscape .hero-waves{height:160px;bottom:-10px;width:100%;opacity:.6}
 .portrait-layer{height:47%;right:-3%;bottom:0;max-width:none;width:auto;opacity:.63;mask-image:linear-gradient(90deg,transparent,#000 25%,#000)}
 .portrait-wash{background:linear-gradient(180deg,#1d2525 0%,#1d2525 42%,#1d2525cc 56%,transparent 76%),linear-gradient(90deg,#1d2525a1,transparent 75%)}.glass-ribbon-one{left:80%;width:8%;opacity:.25}
 .lion-signature{height:177px;width:100%;margin-top:7px;margin-bottom:8px}.atmosphere .lion-signature .english-name{font-size:36px;top:17px}.hero-lion-card{left:226px;top:0;width:99px}.hero-lion-card img{height:119px}.hero-lion-card .door-label{font-size:8px}.lion-doodle{left:68px;top:50px;width:151px;height:95px}
 .atmosphere .hero-disciplines{font-size:10px}.atmosphere .wildcard-intro .intro-line{font-size:10px;line-height:1.9;max-width:270px;margin-top:12px}.atmosphere .work-jump{font-size:10px;margin-top:13px}
 .atmosphere .hero-bottom{left:26px;right:26px;bottom:19px;gap:12px}.atmosphere .hero-bottom>span:first-child{display:block;font-size:6px;letter-spacing:.6px}.hero-bottom .sky-motion{font-size:8px;padding:3px 8px;min-height:28px}.hero-bottom>a{font-size:23px}
 .project-chapter{padding:85px 26px 75px}.chapter-topline{top:27px;left:26px;right:26px;font-size:8px;letter-spacing:.6px}.chapter-bottom{left:26px;right:26px;bottom:20px;font-size:8px}
 .chapter-layout,.chapter-huatuobang .chapter-layout,.chapter-smartcloud .chapter-layout{display:flex;flex-direction:column;gap:35px;align-items:stretch}.chapter-huatuobang .project-visual,.chapter-smartcloud .project-visual{order:0}
 .project-narrative h2{font-size:46px;margin-bottom:15px}.project-narrative .overline{font-size:9px;margin-bottom:13px}.project-deck{font-size:17px}.project-role{font-size:10px;line-height:1.9}.project-description p{font-size:12px;line-height:2}.project-outcome{margin:20px 0}.project-outcome strong{font-size:17px}.project-outcome>span{font-size:10px}.project-actions{gap:28px}
 .browser-shot{width:96%;margin:auto;transform:rotate(-2deg)}.window-bar{height:29px;font-size:8px}.visual-note{margin-top:21px;font-size:8px;gap:10px}
 .garden-scene img{height:240px}.garden-details img{height:155px}.garden-details a{width:35%}.garden-details{margin-top:-64px}.garden-details a:nth-child(2){margin-top:20px}
 .wardrobe-stage{height:345px}.phone-shot{height:330px;max-width:63%}.wardrobe-word{font-size:clamp(50px,17vw,68px);left:2%}.export-shot{width:91%;margin-left:0}.forum-shot{width:68%}
 .life-preview .life-preview-link{gap:12px}.life-preview .life-preview-link img{height:170px}.life-preview .life-preview-link figure:first-child img{height:130px}
}
@media(max-width:370px){.atmosphere .intro-stage .wildcard-intro{padding-left:23px;padding-right:23px;min-height:650px}.hero-lion-card{left:191px;width:86px}.hero-lion-card img{height:108px}.lion-doodle{left:60px;width:125px}.lion-signature{height:158px}.atmosphere .lion-signature .english-name{font-size:33px}.atmosphere .hero-copy h1{font-size:39px}.hero-disciplines span{padding:0 5px}.project-narrative h2{font-size:39px}.chapter-topline{font-size:7px}}
@media(prefers-reduced-motion:reduce){
 .intro-stage{height:auto}.atmosphere .intro-stage .wildcard-intro{position:relative;animation:none;transform:none;opacity:1}.chapter-fluentide{margin-top:0}
 .left-landscape .meteor{opacity:.2;top:10%;transform:translate(-30px,50px)}.left-landscape .meteor:nth-child(n+4){display:none}.left-landscape .hero-waves{transform:none}.doodle-line{stroke-dashoffset:0}
}

/* Keep the two portrait records legible at their original proportions. */
.chapter-smartcloud .export-shot{width:58%;max-width:290px;margin-left:4%;transform:rotate(-4deg)}
.chapter-smartcloud .export-shot img{max-height:none;height:auto;object-fit:contain}
.chapter-smartcloud .forum-shot{width:28%;max-width:155px;margin:-200px 7% 0 auto;transform:rotate(5deg)}
.chapter-smartcloud .forum-shot img{max-height:none;height:auto;object-fit:contain}
@media(max-width:1100px) and (min-width:601px){.chapter-smartcloud .forum-shot{width:34%;margin-top:-130px;margin-right:0}}
@media(max-width:600px){.chapter-smartcloud .export-shot{width:61%;margin-left:3%}.chapter-smartcloud .forum-shot{width:34%;margin-top:-140px;margin-right:2%}}