*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:white;color:#111;font-family:Arial,'Microsoft YaHei',sans-serif}body{overflow-x:clip}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:focus-visible{outline:3px solid #d4bc00;outline-offset:5px}[hidden]{display:none!important}#viewport{height:100svh;min-height:440px;position:relative;overflow:hidden}#canvas{position:absolute;width:1088px;height:684px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));perspective:1500px}.sprite{display:block;background-repeat:no-repeat;background-size:1088px 684px}.doodle{position:absolute;left:246px;top:85px;width:47px;height:50px;background-image:url('assets/reference-front.webp');background-position:-246px -85px}.yellow{position:absolute;left:795px;top:59px;width:207px;height:270px;background-image:url('assets/reference-front.webp');background-position:-795px -59px;transition:transform .3s}.yellow:hover{transform:rotate(5deg)}.ideas{position:absolute;left:80px;top:446px;width:194px;height:185px;background-image:url('assets/reference-front.webp');background-position:-80px -446px;transition:transform .3s}.ideas:hover{transform:rotate(-5deg)}#decor{transition:opacity .45s}.ground{position:absolute;left:394px;top:595px;width:310px;height:16px;border-radius:50%;background:#aaa;opacity:.18;filter:blur(7px);transition:opacity .4s}#rig{position:absolute;left:397px;top:103px;width:311px;height:487px;z-index:3;transform-style:preserve-3d;will-change:transform}#folder{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s;cursor:grab}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.front{background-image:url('assets/reference-front.webp');background-position:-397px -103px}.rear{background-image:url('assets/reference-back.webp');background-position:-350px -105px;width:365px;height:483px;left:-47px;transform:rotateY(180deg)}#rig:hover #folder{transform:rotateY(-7deg) rotateZ(-1deg)}.opening #rig:hover #folder,.opened #rig:hover #folder{transform:none}.opening #decor,.opened #decor{opacity:0;pointer-events:none}.opening .ground,.opened .ground{opacity:0}.cursor-hand{position:absolute;right:46px;bottom:32px;font-size:45px;font-weight:bold;transform:rotate(-30deg);text-shadow:2px 2px #aaa}.opening .cursor-hand,.opened .cursor-hand{display:none}#sheet{position:absolute;left:51px;top:18px;width:974px;height:658px;opacity:0;visibility:hidden;transform-origin:center;z-index:2;will-change:transform,opacity}.kraft{position:absolute;inset:0;background:#c5aa88;border:1px solid #bca082;border-radius:28px 0 0 28px;box-shadow:0 3px 4px #0002}.paper{position:absolute;background:#eeede8;border:1px solid #dbdad5}.under{inset:46px 28px 25px 91px;transform:rotate(.3deg);box-shadow:2px 3px white}.middle{inset:40px 34px 31px 85px;transform:rotate(-.2deg)}.top{inset:33px 40px 37px 79px}.profile{position:absolute;left:105px;top:56px;width:370px}.mini-tag{position:absolute;right:0;top:-11px;background:#111;color:#e5ff65;font-size:10px;font-weight:900;padding:3px 12px;transform:rotate(-3deg)}h1{margin:0;font-size:60px;letter-spacing:-4px;font-weight:1000;line-height:1.14;white-space:nowrap;font-family:'Arial Black',Arial,sans-serif}.profile-title{display:flex;align-items:baseline;justify-content:space-between;gap:7px}.profile-title h2{font-size:35px;font-weight:900;margin:0;letter-spacing:-2px;white-space:nowrap}.profile-title>b{font-family:'Arial Narrow',Impact,sans-serif;font-size:19px;letter-spacing:-1px;white-space:nowrap}.slogan{font-size:14px;letter-spacing:4px;margin:5px 0 19px}dl{margin:0}dl>div{display:grid;grid-template-columns:88px 1fr;align-items:center;border-top:1px solid #96948d;min-height:51px}dt{font-size:17px;font-weight:900}dt small{display:block;font-size:11px;font-weight:400;margin-top:2px}dd{margin:0;font-size:15px;line-height:1.45;white-space:nowrap}.hand{font-family:KaiTi,'Comic Sans MS',cursive;font-size:24px;font-weight:bold}.skills{height:83px}.skills dd{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;font-size:14px}.about{height:73px;border-bottom:1px solid #96948d;align-items:start;padding-top:10px}.about dd{font-family:KaiTi,serif;font-size:15px}.about dd strong{display:block;font-family:'Comic Sans MS',KaiTi,cursive;font-size:22px;font-style:italic;text-align:center}.profile-footer{height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-footer button{display:flex;align-items:center;gap:7px;text-align:left}.globe{font-size:47px}.profile-footer b{font-family:Impact,'Arial Narrow',sans-serif;font-size:18px}.profile-footer small{display:block;font-size:8px}.green-word{font-family:'Arial Black',Arial,sans-serif;font-size:22px;font-weight:1000;letter-spacing:-1px;color:#039c39;transform:rotate(-5deg);-webkit-text-stroke:4px white;paint-order:stroke fill;text-shadow:2px 3px #ccc}.red-sticker{position:absolute;left:370px;top:151px;width:143px;height:180px;background-image:url('assets/reference-open.webp');background-position:-421px -169px;clip-path:polygon(0 8%,82% 0,100% 90%,20% 100%);z-index:6;transition:transform .25s}.red-sticker:hover{transform:rotate(-7deg) scale(1.05)}.smile{position:absolute;right:3px;top:73px;width:75px;height:108px;background-image:url('assets/reference-open.webp');background-position:-943px -91px;clip-path:polygon(4% 15%,84% 7%,100% 79%,10% 92%);z-index:2}.clip{position:absolute;left:550px;top:18px;width:48px;height:102px;background-image:url('assets/reference-open.webp');background-position:-601px -36px;clip-path:polygon(17% 0,57% 0,85% 91%,23% 96%,0 15%);z-index:9}#cards{position:absolute;left:519px;top:41px;width:381px;height:529px;perspective:1000px}.card-under{position:absolute;inset:9px -15px -9px 0}.green-under{background:#b9ed1e;transform:rotate(3deg);box-shadow:4px 5px #d2d2ca}.red-under{background:#ed7668;transform:rotate(-3deg);inset:12px 8px 23px -11px}.portfolio-card{position:absolute;inset:0;overflow:hidden;transform:rotate(-2.7deg);box-shadow:3px 5px 5px #0003;transform-origin:left center;transition:transform .35s}.portfolio-card:hover{transform:rotate(-1deg) translateY(-4px)}.card-art{width:381px;height:529px;background-image:url('assets/reference-open.webp');background-position:-568px -54px;pointer-events:none}.card-art.second{background-image:url('assets/reference-card2.webp')}.card-art.third{background-image:url('assets/reference-card3.webp')}.card-arrow{position:absolute;z-index:5;bottom:31px;width:42px;height:38px;background:white;color:#111;font-size:31px;line-height:1;box-shadow:1px 2px #0002}.card-arrow:hover{background:#eaff44}.next{right:8px}.previous{left:14px}.card-count{position:absolute;bottom:-23px;right:12px;font-size:10px;letter-spacing:2px}.blue-stamp{position:absolute;left:532px;top:550px;background:#51b5e9;padding:8px 11px;font-family:monospace;font-size:25px;line-height:.8;transform:rotate(2deg);z-index:8}.copyright{position:absolute;right:39px;bottom:36px;text-align:right;font-size:8px;line-height:1.3}.bottom-tab{position:absolute;left:190px;bottom:-29px;background:#e5232f;color:white;padding:6px 14px;font-family:'Arial Black',sans-serif;font-weight:900;font-size:21px;border:1px dashed white;box-shadow:0 0 0 3px #e5232f}#back{position:absolute;z-index:12;left:0;top:11px;background:#f6f3e8;border:1px solid #d4d0c3;border-radius:2px;padding:15px 12px;font-size:14px;box-shadow:0 1px 3px #0001}#back:hover{background:#e8ff46}#skip{position:absolute;z-index:14;bottom:16px;right:25px;font-size:13px;padding:8px 10px;background:white}#referenceNote{position:fixed;left:16px;bottom:8px;color:#aaa;font-size:10px;z-index:20}#referenceNote button{margin-left:14px;text-decoration:underline;font-size:10px}dialog{background:#f1f0e9;color:#111;border:1px solid #aaa;width:min(900px,94vw);max-height:90svh;padding:40px;box-shadow:8px 8px #0003}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.close{position:absolute;right:12px;top:6px;font-size:32px}dialog h2{font-size:30px;letter-spacing:-1px;margin:10px 0 24px}dialog p{font-size:16px;line-height:1.8}dialog .eyebrow{font-family:monospace;font-size:12px;letter-spacing:2px;color:#777}.video-empty{aspect-ratio:16/9;background:#171717;color:#eee;display:grid;place-content:center;text-align:center}.video-empty strong{font-size:20px}.video-empty span{font-size:13px;color:#aaa;margin-top:12px}.links{display:flex;gap:15px;margin-top:20px;flex-wrap:wrap}.links span{border:1px solid #bbb;padding:10px 15px;font-size:14px;color:#777}.contact-list p{border-bottom:1px solid #bbb;padding-bottom:15px}.contact-list small{display:block;color:#777;font-size:13px}.mobile .yellow{left:737px;top:25px;transform:scale(.8)}.mobile .ideas{left:135px;top:484px;transform:scale(.8)}.mobile .doodle{left:285px;top:50px}.mobile .cursor-hand{right:220px;bottom:0}@media(max-width:600px){#referenceNote{font-size:8px;bottom:5px;left:8px}#referenceNote button{font-size:9px;margin-left:8px}dialog{padding:30px 20px}dialog h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Frame-aligned reference surfaces; portrait layout keeps the same controls readable. */
.kraft{background:#c5aa88 url('assets/reference-open.webp') -51px -18px/1088px 684px no-repeat}.portfolio-card{transform:none}.portfolio-card:hover{transform:translateY(-4px)}.green-under{inset:16px -3px -7px 12px;transform:rotate(1deg)}.unsealed .rear{background-image:url('assets/reference-unsealed.webp')}.mobile-open{width:420px!important;height:1310px!important}.mobile-open #sheet{left:10px;top:54px;width:400px;height:1200px}.mobile-open .kraft{background:#c5aa88 url('assets/reference-back.webp') -385px -108px/2176px 1368px;overflow:hidden}.mobile-open .paper{inset:24px 14px}.mobile-open .middle{inset:20px 18px}.mobile-open .top{inset:16px 22px}.mobile-open .profile{left:32px;top:56px;transform:scale(.9);transform-origin:top left}.mobile-open #cards{left:28px;top:615px;transform:scale(.9);transform-origin:top left}.mobile-open .red-sticker{left:259px;top:158px;transform:scale(.65);transform-origin:top left}.mobile-open .clip{left:55px;top:592px;transform:scale(.9)}.mobile-open .smile{right:0;top:650px;transform:scale(.8);transform-origin:right}.mobile-open .blue-stamp{left:56px;top:1090px}.mobile-open .copyright{right:24px;bottom:23px;font-size:10px}.mobile-open .bottom-tab{bottom:-31px;left:99px}.mobile-open #back{top:0;left:10px;font-size:15px}.mobile-open #rig{display:none}
.kraft{background:#c5aa88 url("assets/reference-paper.webp") -92px -49px/1190px 748px no-repeat}.mobile-open .kraft{background:#c5aa88 url("assets/reference-paper.webp") -950px -520px/10880px 6840px no-repeat}
.kraft:after{content:"";position:absolute;right:0;top:0;width:29px;height:100%;background:#c5aa88 url("assets/reference-paper.webp") -1900px -1040px/21760px 13680px no-repeat}.mobile-open .kraft:after{display:none}
#folder,#rig:hover #folder{transition:none;transform:rotateX(0deg) rotateY(0deg)}#folder{touch-action:none;user-select:none;-webkit-user-select:none}#folder.dragging{cursor:grabbing}#folder .face{pointer-events:none}.front{clip-path:polygon(5% 1%,92% 7%,91% 22%,100% 22%,100% 43%,94% 43%,96% 99%,1% 94%)}.rear{clip-path:polygon(13% 2%,97% 2%,97% 99%,9% 98%,11% 40%,0 40%,0 18%,12% 18%)}
#rig{cursor:grab;touch-action:none;user-select:none}#rig:has(.dragging){cursor:grabbing}
/* Published video archive cards. */
.work-art{display:flex;flex-direction:column;width:381px;height:529px;padding:30px 22px 64px;background:#f7f6ef;text-align:left;border:1px solid #d5d2c6;color:#171813;pointer-events:none}.work-kicker{font-size:10px;letter-spacing:1.1px;padding:8px 0 14px;border-bottom:1px solid #aaa99e}.work-cover{position:relative;display:block;margin:17px -9px 16px;aspect-ratio:16/9;overflow:hidden;background:#ddd}.work-cover img{width:100%;height:100%;object-fit:cover;display:block}.play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#1119;color:white;border:1px solid #fff9;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:17px;padding-left:3px}.work-duration{position:absolute;right:7px;bottom:7px;background:#111c;color:white;padding:3px 5px;font-size:11px}.work-number{font-family:monospace;font-size:10px;letter-spacing:2px;color:#666}.work-title{font-size:21px;line-height:1.4;margin:8px 0 14px;letter-spacing:-.5px}.work-role{font-size:10px;color:#777;border-top:1px solid #bbb9ac;padding-top:11px}.work-tags{font-size:13px;line-height:1.65;margin-top:5px}.work-action{position:absolute;bottom:30px;left:70px;right:60px;text-align:center;font-size:11px;color:#555}.video-poster{display:block;position:relative;background:#171717;aspect-ratio:16/9;overflow:hidden;color:white}.video-poster img{display:block;width:100%;height:100%;object-fit:cover}.video-poster>span{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 16px;background:linear-gradient(transparent,#000c);font-size:14px}.contribution{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:14px}.contribution span{padding:6px 10px;border:1px solid #bbb7a6}.credit-note{font-size:12px!important;color:#777}.watch-link{display:inline-block;padding:12px 18px;background:#191a16;color:#fff;text-decoration:none;font-size:14px}.watch-link:hover{background:#3c4422}.watch-link:focus-visible,.video-poster:focus-visible{outline:3px solid #939b00;outline-offset:3px}
.project-tabs{position:absolute;right:-33px;top:114px;display:flex;flex-direction:column;gap:10px;z-index:7}.project-tab{width:34px;min-height:95px;padding:12px 8px;writing-mode:vertical-rl;font-size:12px;letter-spacing:1px;background:#ddd8c9;color:#5b574c;border:1px solid #bab3a0;border-radius:0 5px 5px 0;box-shadow:2px 2px 2px #0002;transition:transform .2s,background .2s}.project-tab:first-child{min-height:136px}.project-tab.active{background:#dfff62;color:#151713;font-weight:bold;border-color:#acbe48;transform:translateX(5px)}.project-tab:hover{background:#eef4d2}.project-tab.active:hover{background:#dfff62}.empty-project{cursor:default}.empty-project:hover{transform:none}.empty-project-title{font-size:35px;line-height:1.3;margin-top:83px;letter-spacing:-1px}.empty-project-rule{display:block;width:45px;height:4px;background:#191a16;margin:24px 0}.empty-project-note{font-size:19px}.empty-project-description{font-size:12px;color:#777;margin-top:12px}
.bio-link{font-family:Arial,"Microsoft YaHei",sans-serif;font-size:12px;text-decoration:underline;margin-top:3px}.profile .about dd{font-family:Arial,"Microsoft YaHei",sans-serif;font-size:13px;line-height:1.4}.work-tags{font-size:12px;line-height:1.35}.project-detail{border-top:1px solid #bbb7a6;margin-top:24px;padding-top:8px}.project-detail h3{font-size:18px;margin:20px 0 8px}.project-detail p{font-size:15px;margin:8px 0;line-height:1.8}.contact-list a{color:#333;text-underline-offset:4px}.contact-list small{overflow-wrap:anywhere}
/* Crisp typography and paper details for the personal file. */
.profile-title>b{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.4px;line-height:1.5;color:#57574d}
.slogan{font-size:12px;letter-spacing:3px}
.profile dd{font-size:14px}.profile dd.hand{font-size:24px}.profile .skills dd{font-size:13px}
.green-word{font-family:Arial,sans-serif;font-size:20px;font-weight:900;letter-spacing:.4px;color:#168843;background:#faf9f1;padding:3px 7px;transform:rotate(-3deg);-webkit-text-stroke:0;text-shadow:none;box-shadow:1px 2px 1px #0002}
.red-sticker{left:409px;top:155px;width:104px;height:146px;background-image:url('assets/xuan-kraft-sheet.webp?v=20261020');background-size:409.6px 614.4px;background-position:-301.6px -375.2px;clip-path:polygon(0 10%,89% 0,100% 94%,12% 100%)}
.clip{left:543px;top:25px;width:28px;height:72px;background:none;clip-path:none;transform:rotate(-7deg);filter:drop-shadow(1px 2px 1px #0004);pointer-events:none}
.work-kicker{padding-left:25px}
.project-tabs{right:-35px;gap:13px}
.project-tab{--paper:#e9e4c8;position:relative;width:36px;border:0;border-radius:0;color:#514d3d;background-color:var(--paper);background-image:linear-gradient(100deg,#00000014,transparent 26%,#ffffff45 70%,#00000009),repeating-linear-gradient(16deg,#ffffff16 0 1px,transparent 1px 4px);box-shadow:2px 3px 3px #0002,inset 1px 0 #fff8;transform:rotate(1.5deg);transform-origin:left center;transition:transform .2s,filter .2s}
.project-tab:nth-child(2){--paper:#e9dfbb;transform:rotate(-1.5deg)}
.project-tab:nth-child(3){--paper:#dddccc;transform:rotate(1deg)}
.project-tab:after{content:'';position:absolute;right:0;bottom:0;width:10px;height:10px;background:linear-gradient(135deg,#0001 48%,#fff9 50%,#fff4);box-shadow:-1px -1px 1px #0001;clip-path:polygon(0 0,100% 100%,0 100%)}
.project-tab.active{--paper:#e3f866;background-color:var(--paper);border:0;transform:translateX(5px) rotate(1.5deg);box-shadow:3px 4px 4px #0002,inset 1px 0 #ffffb0}
.project-tab:hover,.project-tab.active:hover{background-color:var(--paper);filter:brightness(1.035);transform:translateX(5px) rotate(0deg)}
.mobile-open .clip{left:47px;top:600px;transform:rotate(-7deg) scale(.9)}
.mobile-open .red-sticker{left:294px;top:195px;transform:scale(.75)}
.profile-title>b{transform:translateY(-12px)}
.clip{left:540px;top:13px;height:60px;width:24px}
.mobile-open .clip{left:47px;top:590px}
/* Use unprinted kraft paper, rather than a screenshot with a baked-in clip. */
.kraft,.mobile-open .kraft{background:#c5aa88 url('assets/xuan-ragdoll-sheet.webp') -1638px 0/3276.8px 4915.2px no-repeat}
.kraft:after{display:none}
/* Layered paper fibers, shallow creases, and individually tilted index slips. */
.project-tabs{right:-36px;gap:17px}
.project-tab{--tilt:-3deg;--paper:#eee6c7;width:38px;isolation:isolate;overflow:visible;border:1px solid #b8ab782e;border-radius:1px 1px 3px 0;background-image:url('assets/paper-fiber.svg'),linear-gradient(105deg,#8c785626,transparent 24%,#fff8 53%,transparent 76%),linear-gradient(174deg,transparent 70%,#73644315 73%,#fff9 75%,transparent 79%);background-size:90px 120px,100% 100%,100% 100%;background-blend-mode:multiply,normal,normal;box-shadow:1px 0 0 #fff9 inset,-1px 0 0 #9b8f5522 inset,3px 5px 5px -2px #342b2640;transform:rotate(var(--tilt));transform-origin:4px 12px;line-height:1.6;text-shadow:0 1px #fff5}
.project-tab:nth-child(2){--paper:#eee4c6;--tilt:3deg;transform:rotate(var(--tilt))}
.project-tab:nth-child(3){--paper:#e7e5d5;--tilt:-2deg;transform:rotate(var(--tilt))}
.project-tab:before{content:'';position:absolute;z-index:-1;left:5px;right:0;top:8px;bottom:-2px;border-radius:0 0 65% 8%;box-shadow:3px 4px 4px #2d251c2b;transform:skewY(-5deg);pointer-events:none}
.project-tab:after{width:12px;height:14px;right:-1px;bottom:-1px;background:linear-gradient(135deg,#8f805524 0,#fff8 48%,#fff4 65%,#b4a87a33);box-shadow:-1px -1px 2px #8375491f;clip-path:polygon(0 0,100% 100%,0 100%);transform:rotate(-4deg);transform-origin:bottom left;pointer-events:none}
.project-tab.active{--paper:#e3ef78;background-color:var(--paper);transform:translateX(5px) rotate(var(--tilt));box-shadow:1px 0 #ffffc3 inset,4px 6px 6px -2px #342b2640}
.project-tab:hover,.project-tab.active:hover{transform:translateX(6px) rotate(calc(var(--tilt) * .5));filter:brightness(1.025)}
.red-sticker{background-image:url('assets/xuan-kraft-sheet.webp?v=20261020')}
/* Subtle paper curvature; no hard band across the printed names. */
.project-tab{background-image:url('assets/paper-fiber.svg'),linear-gradient(100deg,#8c785614,transparent 25%,#ffffff38 64%,#7364430c);background-size:120px 160px,100% 100%;background-blend-mode:multiply,normal;box-shadow:1px 0 #fff7 inset,2px 3px 4px -2px #342b2635}
.project-tab:before{left:8px;bottom:1px;right:2px;top:70%;box-shadow:2px 3px 3px #2d251c20;transform:skewY(-3deg)}
.project-tab:after{width:7px;height:9px;background:linear-gradient(135deg,#e1d9b720,#fff7 60%,#b4a87a25);box-shadow:-1px -1px 1px #83754914;transform:none}
.project-tab.active{box-shadow:1px 0 #ffffc3 inset,3px 4px 4px -2px #342b2638}
.profile dd.hand{font-size:31px;line-height:1.2;letter-spacing:1px}
.project-tab:before{display:none}
.project-tab:after{width:8px;height:8px;right:0;bottom:0;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#fff9,#d1c8a975);box-shadow:none;border:0;transform:rotate(180deg);transform-origin:center}
.project-tab{background-image:url('assets/paper-fiber.svg'),linear-gradient(100deg,#8c785610,transparent 30%,#ffffff28 75%);box-shadow:1px 0 #fff7 inset,2px 3px 4px -2px #342b2630}
.project-tab.active{box-shadow:1px 0 #ffffc3 inset,2px 3px 4px -2px #342b2630}
/* Stapled mascot print and gently flexible project sheets. */
.red-sticker{transform:scale(1.1);transform-origin:right top;top:158px}
.red-sticker:hover{transform:scale(1.1)}
.red-sticker:before{content:'';position:absolute;left:31px;top:14px;width:29px;height:3px;transform:rotate(-8deg);border-radius:1px;background:linear-gradient(#f1ede2,#898880 45%,#d5d1c6 70%,#737168);box-shadow:0 1px 1px #493b2866,-2px 0 1px #493b2866,2px 0 1px #493b2866;pointer-events:none}
.red-sticker:after{content:'';position:absolute;left:28px;top:12px;width:35px;height:7px;transform:rotate(-8deg);border-radius:50%;box-shadow:inset 0 1px 2px #765c2c35,0 1px 0 #fff3;pointer-events:none}
.mobile-open .red-sticker{transform:scale(.83)}
#cards{transition:height .55s cubic-bezier(.2,.7,.25,1)}
.portfolio-card{transform-origin:20px 15px}
.work-art{height:100%;padding-bottom:64px}
.work-cover{flex-shrink:0}
.card-under{transition:inset .55s ease}
.card-count{bottom:-25px}
.copyright{bottom:12px}
@media(prefers-reduced-motion:reduce){#cards{transition:none}}
.work-cover{margin:12px -9px}
.work-title{font-size:20px;line-height:1.3;margin:8px 0 10px}
/* Each film gets its own tinted stock and backing sheets. */
.work-art{background-color:var(--page-paper,#f7f6ef);background-image:linear-gradient(110deg,#ffffff26,transparent 65%);border-color:#8885;transition:background-color .45s ease}
.green-under{background:var(--page-under,#cad5b9);box-shadow:3px 4px #0002}
.red-under{background:var(--page-back,#ddd2bc)}
.card-under{transition:background-color .45s ease,inset .55s ease}
.work-role,.work-number,.work-action{color:#50534f}
.red-sticker{transform-origin:44% 10%;rotate:0deg}
.kraft,.mobile-open .kraft{background:#b99a6d url('assets/kraft-fiber.webp') 0 0/440px 440px repeat;box-shadow:0 3px 4px #0002,inset 0 0 12px #7e603b25}
/* Current artwork while the interactive model loads. */
#folder .face.front{background-image:url('assets/loading-approved-front.webp');background-position:center;background-size:100% 100%;clip-path:none;border-radius:2px;box-shadow:inset 0 0 0 1px #997b4933}
.local-film{display:block;width:100%;aspect-ratio:16/9;background:#17151d;object-fit:contain}
/* Larger artwork with a compact contribution strip. */
.work-art{padding-top:24px}
.work-cover{margin:10px -21px 12px;aspect-ratio:16/9}
.work-role{font-size:9px;padding-top:7px}
.work-tags{font-size:11px;line-height:1.4;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 12px}
.work-tags span{white-space:nowrap}
/* Restore paper margins and tighten the lower section. */
.work-cover{margin:10px -7px 12px}
.work-role{padding-top:6px}
.work-tags{margin-top:3px}
/* Tear-off archive sheets: a fixed binding, moving leaf and quiet daylight. */
#cards:before{content:"";position:absolute;left:0;right:0;top:0;height:25px;z-index:6;pointer-events:none;background:linear-gradient(180deg,#ffffff50,#ffffff08),var(--page-paper);border:1px solid #70695730;border-bottom:1px dashed #776d5745;box-shadow:0 2px 2px #4d3a2010;clip-path:polygon(0 0,100% 0,100% 90%,94% 96%,88% 88%,81% 98%,75% 89%,68% 97%,61% 89%,54% 98%,47% 90%,40% 96%,33% 89%,26% 98%,19% 90%,12% 97%,6% 90%,0 96%)}
.portfolio-card{box-shadow:2px 3px 3px #3e301c20,7px 11px 15px #3e301c16;transform-origin:50% 24px}
.portfolio-card:hover{transform:none}
.tear-leaf{z-index:8!important;pointer-events:none!important;transition:none!important;box-shadow:none;transform-origin:12px 24px;will-change:transform,clip-path;overflow:hidden}
.tear-leaf:after{content:"";position:absolute;inset:24px 0 0;pointer-events:none;background:linear-gradient(165deg,#fff0 28%,#fff9 46%,#5a452729 58%,#fff0 77%);opacity:0;animation:tear-light .74s ease-in-out}
@keyframes tear-light{25%,60%{opacity:.65}100%{opacity:0}}
.is-tearing .card-arrow{pointer-events:none;opacity:.45}
.kraft{box-shadow:2px 5px 7px #43321b22,12px 20px 30px #43321b15,inset 0 0 12px #7e603b25}
.kraft:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#fff4d538 0%,#fff9e810 45%,#60451e18 100%)}
#sheet:after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;border-radius:28px 0 0 28px;background:linear-gradient(122deg,transparent 65%,#66563a09 66%,#66563a09 69%,transparent 70%,transparent 86%,#66563a0c 87%,#66563a0c 90%,transparent 91%);filter:blur(9px)}
@media(prefers-reduced-motion:reduce){.tear-leaf{display:none}.tear-leaf:after{animation:none}}
/* Flat paper withdrawal: preserve image and typography proportions. */
.tear-leaf{will-change:transform,opacity;transform-origin:50% 24px}
.tear-leaf:after{display:none;animation:none}
/* Approved archive scrapbook composition, October 2026. */
@font-face{font-family:ArchiveHand;src:url('assets/fonts/wenkai-subset.woff2') format('woff2');font-display:swap}
.profile{left:88px;top:47px;width:385px}
h1{font-size:63px;line-height:1.05}
.profile-title{display:block}.profile-title h2{font-size:32px;letter-spacing:-1px;line-height:1.3}
.profile-title>b{display:block;font:10px Arial,sans-serif;letter-spacing:4px;transform:none;margin-top:5px}
.slogan{font-size:10px;letter-spacing:3px;margin:12px 0 24px}
.mini-tag{right:0;top:-14px;font-size:8px}
.profile dl>div{grid-template-columns:94px 1fr;min-height:49px;border-color:#8f8a794f}
.profile dt{font-size:20px;font-weight:900;letter-spacing:-.7px}
.profile dt small{font:9px Arial,sans-serif;letter-spacing:.5px;margin-top:3px}
.profile dd{font:17px/1.45 ArchiveHand,KaiTi,cursive;white-space:normal}
.profile dd.hand{font-family:ArchiveHand,KaiTi,cursive;font-size:31px}
.profile .skills{height:72px}.profile .skills dd{font:16px/1.5 ArchiveHand,KaiTi,cursive;gap:5px 10px}
.profile .about{height:auto;min-height:116px;padding:10px 0 8px;align-items:start}
.profile .about dd{font:13px/1.6 ArchiveHand,KaiTi,cursive}
.bio-summary{display:block}.bio-link{font:11px/1.6 Arial,sans-serif;margin-top:5px}
.profile-footer{height:49px}.profile-footer .globe{font-size:30px}
.red-sticker{left:358px;top:66px;transform:scale(.87);transform-origin:44% 10%;overflow:visible;clip-path:none}
.red-sticker:hover{transform:scale(.87)}
.red-sticker:before{left:44px;top:2px;width:15px;height:15px;border-radius:50%;transform:rotate(-15deg);background:radial-gradient(circle at 32% 26%,#fffef2,#e5d3aa 65%,#ae986d);box-shadow:2px 4px 3px #58472250;z-index:2}
.red-sticker:after{left:48px;top:12px;width:4px;height:12px;transform:rotate(28deg);border-radius:2px;background:#a79c81;box-shadow:2px 2px 2px #493b2833}
#cards{left:508px;top:41px;width:381px;z-index:3}
#cards:before{display:none}.work-art{width:100%;padding:28px 20px 64px;background-image:url('assets/paper-fiber.svg');background-size:150px 180px;border-color:#7d8a8c30}
.work-kicker{padding:8px 40px 13px 16px;font-size:9px;letter-spacing:.6px}
.work-cover{overflow:visible;margin:17px -5px 15px;background:#faf7ed;border:8px solid #faf7ed;box-shadow:1px 3px 4px #3e301c28;isolation:isolate}
.work-cover:before{content:'';position:absolute;inset:-11px;z-index:-1;background:#faf7ed url('assets/paper-fiber.svg');clip-path:polygon(0 2%,5% 0,9% 2%,15% 0,21% 1%,28% 0,35% 2%,43% 0,51% 1%,60% 0,68% 2%,75% 0,84% 1%,91% 0,100% 2%,99% 20%,100% 39%,99% 58%,100% 78%,99% 99%,92% 100%,84% 98%,75% 100%,67% 98%,59% 100%,51% 99%,42% 100%,35% 98%,26% 100%,17% 99%,8% 100%,0 98%,1% 75%,0 55%,1% 30%)}
.work-cover img{object-fit:contain}.work-title{font-size:22px;font-weight:800;line-height:1.4;margin:10px 0 14px;letter-spacing:-.4px}
.work-number{align-self:flex-start;padding:5px 12px;background:#f6f0dd url('assets/paper-fiber.svg');box-shadow:1px 1px 2px #0001;font-size:9px}
.work-role{font-size:11px;padding-top:9px}.work-tags{font-size:11px;gap:4px 9px;line-height:1.5}
.work-action{left:45px;right:65px;bottom:30px;text-decoration:underline;text-underline-offset:4px}
.project-tabs{right:-58px;top:166px;gap:39px;z-index:7}
.project-tab,.project-tab:first-child{writing-mode:horizontal-tb;width:70px;min-height:49px;padding:8px 7px;text-align:left;font-size:12px;letter-spacing:0;line-height:1.5;--paper:#f4e6a9;--tilt:-3deg;border:0;clip-path:polygon(0 3%,96% 0,100% 90%,94% 100%,0 97%)}
.project-tab:before{display:block;position:static;content:'01';font:8px monospace;letter-spacing:1px;box-shadow:none;transform:none;margin-bottom:3px}
.project-tab:nth-child(2){--paper:#d1e1e9;--tilt:2deg}.project-tab:nth-child(2):before{content:'02'}
.project-tab:nth-child(3){--paper:#dce5bc;--tilt:-2deg}.project-tab:nth-child(3):before{content:'03'}
.project-tab:after{display:none}.project-tab.active{--paper:#f4e6a9;transform:translateX(3px) rotate(var(--tilt));font-weight:800}
.project-tab:nth-child(2).active{--paper:#c3dce9}.project-tab:nth-child(3).active{--paper:#cdddac}
.star-seal{position:absolute;left:849px;top:51px;width:55px;height:55px;border-radius:49% 51% 48% 52%;background:#eac350 url('assets/paper-fiber.svg');border:2px solid #bd983c65;box-shadow:1px 2px 2px #70502030;transform:rotate(12deg);z-index:8;pointer-events:none}
.star-seal svg{width:100%;height:100%;fill:#fff1ba}
.blue-stamp{left:524px;top:562px;z-index:2;font:25px/1 ArchiveHand,KaiTi,cursive;padding:13px 13px 5px;background:#9ac6db url('assets/paper-fiber.svg');transform:rotate(-7deg);box-shadow:1px 2px 2px #0002}
.copyright{display:none}.bottom-tab{display:none}
@media(max-width:600px){.mobile-open .profile{left:30px;top:42px;transform:scale(.87)}.mobile-open #cards{left:24px;top:658px;width:340px;transform:none}.mobile-open .work-art{width:340px}.mobile-open .work-title{font-size:20px}.mobile-open .project-tabs{right:-25px;top:165px;gap:32px}.mobile-open .project-tab{width:64px;font-size:11px}.mobile-open .red-sticker{left:267px;top:60px;transform:scale(.72)}.mobile-open .star-seal{left:329px;top:670px;width:44px;height:44px}.mobile-open .clip{left:40px;top:637px}.mobile-open .blue-stamp{left:40px;top:1190px!important}.mobile-open #sheet{height:1240px}.mobile-open .work-kicker{font-size:8px}}
.red-sticker{background-image:none!important}.cat-paper{position:absolute;inset:0;background:url(assets/xuan-kraft-sheet.webp?v=scrapbook-20261023) -301.6px -375.2px/409.6px 614.4px no-repeat;clip-path:polygon(0 10%,89% 0,100% 94%,12% 100%)}.red-sticker:before,.red-sticker:after{z-index:2}.slogan{margin-bottom:14px}.about dd{font-size:12px;line-height:1.55}.about{min-height:106px}
.profile .about{min-height:100px}.profile .about dd{font-size:12px;line-height:1.55}
/* Match the approved composition: generous artwork, narrow outer paper margin. */
.paper.top{inset:10px 30px 12px 15px;background:#faf7ef url('assets/paper-fiber.svg');background-size:210px 240px;border:0;clip-path:polygon(0 .5%,12% 0,29% .3%,48% 0,68% .3%,89% 0,100% .2%,99.8% 34%,100% 68%,99.7% 99.6%,80% 100%,59% 99.7%,37% 100%,17% 99.7%,.4% 100%,0 78%,.2% 49%)}
.paper.middle{inset:16px 22px 9px 23px}.paper.under{inset:22px 16px 6px 30px}
.profile{left:48px;top:35px;width:426px}
h1{font-size:74px;line-height:1.02;letter-spacing:-5px}
.profile-title h2{font-size:35px;line-height:1.2}.profile-title>b{font-size:12px;letter-spacing:4px;margin-top:7px}
.slogan{font-size:11px;letter-spacing:3px;margin:10px 0 17px}
.mini-tag{right:6px;top:-15px;font-size:10px;padding:5px 10px}
.profile dl>div{grid-template-columns:94px 1fr;min-height:51px}
.profile dt{font-size:22px;font-weight:900}.profile dt small{font-size:10px;letter-spacing:.5px}
.profile dd{font-size:20px;line-height:1.4;color:#141410}.profile dd.hand{font-size:33px}
.profile .skills{height:73px}.profile .skills dd{font-size:19px;line-height:1.5}
.profile .about{min-height:105px;padding:10px 0 3px}.profile .about dd{font-size:14px;line-height:1.5}
.bio-link{font-size:12px;margin-top:3px}.profile-footer{height:44px}.profile-footer .globe{font-size:33px}
.red-sticker{left:352px;top:48px;transform:scale(1.17)}.red-sticker:hover{transform:scale(1.17)}
.red-sticker:before{width:17px;height:17px;left:43px;top:1px;box-shadow:2px 4px 3px #58472260}
#cards{left:508px;top:18px;width:400px}.clip{left:534px;top:-6px}
.work-art{padding:30px 23px 64px;background-image:linear-gradient(115deg,#ffffff40,transparent 52%,#ffffff16),url('assets/paper-fiber.svg');background-size:auto,210px 240px;box-shadow:2px 4px 6px #233a4725}
.work-kicker{font-size:11px;padding:8px 24px 13px 12px;letter-spacing:.2px;color:#171813}
.work-cover{margin:16px -9px 12px;border:7px solid #faf7ed;aspect-ratio:auto;box-shadow:2px 4px 4px #433b302a}
.work-cover img{height:auto;aspect-ratio:16/9;object-fit:contain}
.work-cover:before{inset:-11px;background-size:110px 150px}
.work-title{font-size:26px;line-height:1.35;margin:9px 0 13px;font-weight:900}
.work-number{font-size:10px;color:#29291e;padding:5px 12px}
.work-role{font-size:13px;color:#282b29;padding-top:10px}.work-tags{font-size:12px;line-height:1.5;margin-top:4px;color:#171813}
.work-action{font-size:12px;color:#292d2a;bottom:26px}
.star-seal{left:858px;top:33px;width:64px;height:64px;transform:rotate(10deg);background-color:#e9c049;box-shadow:1px 2px 2px #70502030,inset 0 0 0 2px #f5d77b80}
.project-tabs{right:-57px;top:166px;gap:43px}.project-tab,.project-tab:first-child{width:71px;font-size:13px;min-height:53px;padding:8px}
.blue-stamp{left:525px;font-size:30px;padding:17px 15px 8px}
@media(max-width:600px){.mobile-open .paper.top{inset:14px 20px 14px 15px}.mobile-open .profile{left:30px;top:42px;width:385px;transform:scale(.87)}.mobile-open h1{font-size:66px}.mobile-open .profile-title h2{font-size:32px}.mobile-open .profile dd{font-size:18px}.mobile-open .profile .skills dd{font-size:17px}.mobile-open .profile .about dd{font-size:13px}.mobile-open .red-sticker{left:265px;top:67px;transform:scale(.85)}.mobile-open #cards{left:24px;top:658px;width:340px}.mobile-open .work-art{width:340px;padding:26px 18px 60px}.mobile-open .work-title{font-size:21px}.mobile-open .work-kicker{font-size:9px;padding-left:5px;padding-right:20px}.mobile-open .work-tags{font-size:11px}.mobile-open .project-tabs{right:-25px;gap:32px}.mobile-open .project-tab{width:64px;font-size:11px}.mobile-open .star-seal{left:322px;top:670px;width:49px;height:49px}.mobile-open .clip{left:40px;top:637px}.mobile-open .blue-stamp{top:1212px!important}.mobile-open #sheet{height:1270px}}
@font-face{font-family:ArchivePen;src:url('assets/fonts/longcang-subset.woff2') format('woff2');font-display:swap}
.profile dd,.profile .skills dd,.profile .about dd,.profile dd.hand,.blue-stamp{font-family:ArchivePen,ArchiveHand,KaiTi,cursive}
.profile dd{font-size:23px}.profile dd.hand{font-size:36px}.profile .skills dd{font-size:22px}.profile .about dd{font-size:17px;line-height:1.25}
@media(max-width:600px){.mobile-open .profile dd{font-size:21px}.mobile-open .profile dd.hand{font-size:31px}.mobile-open .profile .skills dd{font-size:20px}.mobile-open .profile .about dd{font-size:15px;line-height:1.3}}
.work-cover:before{clip-path:polygon(0% 1.20%,1% 1.23%,2% 1.16%,3% 0.11%,4% 0.77%,5% 0.55%,6% 0.69%,7% 0.17%,8% 0.25%,9% 0.58%,10% 0.29%,11% 0.59%,12% 0.03%,13% 0.11%,14% 0.92%,15% 0.55%,16% 0.67%,17% 0.95%,18% 0.47%,19% 0.07%,20% 1.02%,21% 0.77%,22% 0.86%,23% 0.81%,24% 1.26%,25% 0.47%,26% 0.99%,27% 0.48%,28% 0.74%,29% 0.86%,30% 0.41%,31% 0.11%,32% 0.62%,33% 0.93%,34% 0.77%,35% 0.58%,36% 0.84%,37% 0.24%,38% 0.23%,39% 0.42%,40% 1.06%,41% 0.25%,42% 0.15%,43% 0.13%,44% 0.05%,45% 0.36%,46% 0.74%,47% 1.07%,48% 0.43%,49% 0.48%,50% 0.38%,51% 0.40%,52% 1.01%,53% 0.71%,54% 0.34%,55% 0.14%,56% 1.02%,57% 0.92%,58% 1.08%,59% 0.31%,60% 0.71%,61% 1.19%,62% 0.77%,63% 1.23%,64% 0.22%,65% 1.27%,66% 0.07%,67% 0.54%,68% 0.03%,69% 1.05%,70% 0.89%,71% 1.27%,72% 1.05%,73% 1.23%,74% 0.70%,75% 1.28%,76% 0.97%,77% 0.45%,78% 1.27%,79% 0.49%,80% 0.25%,81% 0.10%,82% 0.61%,83% 0.26%,84% 1.21%,85% 1.24%,86% 0.28%,87% 0.13%,88% 0.69%,89% 0.22%,90% 0.71%,91% 1.06%,92% 0.33%,93% 0.55%,94% 1.17%,95% 0.58%,96% 0.45%,97% 1.16%,98% 1.06%,99% 1.16%,100% 0.89%,99.59% 1%,99.31% 2%,99.17% 3%,99.36% 4%,99.76% 5%,99.70% 6%,99.59% 7%,99.23% 8%,99.44% 9%,99.45% 10%,99.17% 11%,99.89% 12%,99.37% 13%,99.67% 14%,99.44% 15%,99.16% 16%,99.75% 17%,99.05% 18%,99.92% 19%,99.44% 20%,99.46% 21%,99.76% 22%,99.44% 23%,99.53% 24%,99.55% 25%,99.28% 26%,100.00% 27%,99.62% 28%,99.21% 29%,99.86% 30%,99.13% 31%,99.80% 32%,99.32% 33%,99.83% 34%,99.55% 35%,99.58% 36%,99.92% 37%,99.30% 38%,99.52% 39%,99.31% 40%,99.46% 41%,99.44% 42%,99.47% 43%,99.70% 44%,99.10% 45%,99.91% 46%,99.12% 47%,99.14% 48%,99.50% 49%,99.22% 50%,99.33% 51%,99.39% 52%,99.71% 53%,99.68% 54%,99.65% 55%,99.70% 56%,99.04% 57%,99.66% 58%,99.61% 59%,99.58% 60%,99.18% 61%,99.52% 62%,99.45% 63%,99.74% 64%,99.72% 65%,99.91% 66%,99.78% 67%,99.74% 68%,99.15% 69%,99.50% 70%,99.89% 71%,99.54% 72%,99.88% 73%,99.43% 74%,99.56% 75%,99.14% 76%,99.74% 77%,99.15% 78%,99.75% 79%,99.02% 80%,99.37% 81%,99.96% 82%,99.19% 83%,99.72% 84%,99.64% 85%,99.85% 86%,99.16% 87%,99.91% 88%,99.26% 89%,99.60% 90%,99.32% 91%,99.71% 92%,99.92% 93%,99.08% 94%,99.35% 95%,99.83% 96%,99.02% 97%,99.09% 98%,99.82% 99%,99.98% 100%,99% 99.21%,98% 99.82%,97% 99.05%,96% 99.39%,95% 99.08%,94% 99.26%,93% 99.00%,92% 98.93%,91% 99.22%,90% 99.23%,89% 99.58%,88% 99.83%,87% 99.88%,86% 98.89%,85% 99.73%,84% 99.45%,83% 99.59%,82% 99.19%,81% 99.31%,80% 98.88%,79% 99.43%,78% 99.53%,77% 99.15%,76% 99.03%,75% 98.80%,74% 99.59%,73% 98.85%,72% 98.72%,71% 98.72%,70% 99.83%,69% 99.51%,68% 98.99%,67% 98.92%,66% 99.95%,65% 99.49%,64% 99.06%,63% 99.01%,62% 99.30%,61% 99.73%,60% 99.47%,59% 99.92%,58% 99.59%,57% 99.44%,56% 98.93%,55% 99.23%,54% 99.46%,53% 99.68%,52% 99.59%,51% 99.13%,50% 99.42%,49% 99.77%,48% 98.93%,47% 99.25%,46% 98.74%,45% 99.30%,44% 99.19%,43% 99.44%,42% 99.21%,41% 98.81%,40% 98.72%,39% 99.14%,38% 99.44%,37% 99.92%,36% 98.91%,35% 99.49%,34% 99.50%,33% 99.93%,32% 99.96%,31% 99.49%,30% 98.73%,29% 99.04%,28% 99.08%,27% 99.13%,26% 99.65%,25% 99.78%,24% 99.22%,23% 99.92%,22% 99.24%,21% 99.33%,20% 99.29%,19% 99.84%,18% 99.91%,17% 99.38%,16% 99.81%,15% 99.17%,14% 99.60%,13% 99.19%,12% 99.02%,11% 99.21%,10% 99.31%,9% 99.74%,8% 99.55%,7% 98.73%,6% 99.65%,5% 99.63%,4% 99.36%,3% 99.29%,2% 98.97%,1% 99.62%,0% 98.75%,0.02% 99%,0.79% 98%,0.57% 97%,0.90% 96%,0.15% 95%,0.69% 94%,0.95% 93%,0.67% 92%,0.11% 91%,0.92% 90%,0.97% 89%,0.11% 88%,0.83% 87%,0.08% 86%,0.08% 85%,0.80% 84%,0.72% 83%,0.96% 82%,0.63% 81%,0.51% 80%,0.27% 79%,0.57% 78%,0.99% 77%,0.65% 76%,0.88% 75%,0.20% 74%,0.73% 73%,0.73% 72%,0.07% 71%,0.82% 70%,0.18% 69%,0.22% 68%,0.06% 67%,0.66% 66%,0.14% 65%,0.98% 64%,0.00% 63%,0.81% 62%,0.76% 61%,0.57% 60%,0.57% 59%,0.80% 58%,0.64% 57%,0.14% 56%,0.80% 55%,0.35% 54%,0.58% 53%,0.51% 52%,0.90% 51%,0.41% 50%,0.85% 49%,0.08% 48%,0.33% 47%,0.67% 46%,0.61% 45%,0.83% 44%,0.21% 43%,0.80% 42%,0.80% 41%,0.14% 40%,0.14% 39%,0.58% 38%,0.98% 37%,0.61% 36%,0.43% 35%,0.51% 34%,0.81% 33%,0.52% 32%,0.54% 31%,0.59% 30%,0.93% 29%,0.80% 28%,0.84% 27%,0.27% 26%,0.60% 25%,0.82% 24%,0.72% 23%,0.95% 22%,0.92% 21%,0.13% 20%,0.51% 19%,0.36% 18%,0.21% 17%,0.50% 16%,0.98% 15%,0.77% 14%,0.10% 13%,0.25% 12%,0.37% 11%,0.89% 10%,0.46% 9%,0.16% 8%,0.55% 7%,0.25% 6%,0.04% 5%,0.59% 4%,0.99% 3%,0.78% 2%,0.74% 1%)}
.slogan{margin-bottom:12px}.profile dl>div{min-height:49px}.profile .about dd{font-size:16px;line-height:1.2}.profile .about{min-height:100px}
/* Deckled outer archive paper and clear handwritten profile. */
.paper.top,.paper.middle,.paper.under{clip-path:polygon(0.000% 0.636%,0.333% 0.297%,0.667% 0.467%,1.000% 0.478%,1.333% 0.140%,1.667% 0.051%,2.000% 0.392%,2.333% 0.079%,2.667% 0.248%,3.000% 0.578%,3.333% 0.567%,3.667% 0.077%,4.000% 0.053%,4.333% 0.145%,4.667% 0.538%,5.000% 0.016%,5.333% 0.146%,5.667% 0.070%,6.000% 0.083%,6.333% 0.340%,6.667% 0.119%,7.000% 0.266%,7.333% 0.477%,7.667% 0.470%,8.000% 0.270%,8.333% 0.511%,8.667% 0.372%,9.000% 0.538%,9.333% 0.162%,9.667% 0.240%,10.000% 0.377%,10.333% 0.615%,10.667% 0.402%,11.000% 0.309%,11.333% 0.163%,11.667% 0.183%,12.000% 0.140%,12.333% 0.641%,12.667% 0.576%,13.000% 0.581%,13.333% 0.344%,13.667% 0.460%,14.000% 0.193%,14.333% 0.313%,14.667% 0.095%,15.000% 0.273%,15.333% 0.164%,15.667% 0.065%,16.000% 0.598%,16.333% 0.063%,16.667% 0.528%,17.000% 0.455%,17.333% 0.059%,17.667% 0.315%,18.000% 0.647%,18.333% 0.641%,18.667% 0.366%,19.000% 0.502%,19.333% 0.461%,19.667% 0.190%,20.000% 0.357%,20.333% 0.388%,20.667% 0.256%,21.000% 0.532%,21.333% 0.289%,21.667% 0.487%,22.000% 0.042%,22.333% 0.289%,22.667% 0.029%,23.000% 0.420%,23.333% 0.567%,23.667% 0.353%,24.000% 0.368%,24.333% 0.405%,24.667% 0.149%,25.000% 0.251%,25.333% 0.376%,25.667% 0.420%,26.000% 0.247%,26.333% 0.310%,26.667% 0.215%,27.000% 0.360%,27.333% 0.439%,27.667% 0.213%,28.000% 0.445%,28.333% 0.552%,28.667% 0.349%,29.000% 0.637%,29.333% 0.201%,29.667% 0.598%,30.000% 0.118%,30.333% 0.236%,30.667% 0.531%,31.000% 0.021%,31.333% 0.399%,31.667% 0.566%,32.000% 0.614%,32.333% 0.443%,32.667% 0.225%,33.000% 0.216%,33.333% 0.410%,33.667% 0.043%,34.000% 0.018%,34.333% 0.573%,34.667% 0.407%,35.000% 0.106%,35.333% 0.279%,35.667% 0.188%,36.000% 0.565%,36.333% 0.186%,36.667% 0.471%,37.000% 0.483%,37.333% 0.207%,37.667% 0.164%,38.000% 0.339%,38.333% 0.260%,38.667% 0.386%,39.000% 0.213%,39.333% 0.516%,39.667% 0.273%,40.000% 0.088%,40.333% 0.503%,40.667% 0.582%,41.000% 0.443%,41.333% 0.355%,41.667% 0.567%,42.000% 0.607%,42.333% 0.006%,42.667% 0.317%,43.000% 0.012%,43.333% 0.217%,43.667% 0.157%,44.000% 0.300%,44.333% 0.440%,44.667% 0.560%,45.000% 0.170%,45.333% 0.008%,45.667% 0.649%,46.000% 0.508%,46.333% 0.358%,46.667% 0.073%,47.000% 0.034%,47.333% 0.607%,47.667% 0.344%,48.000% 0.559%,48.333% 0.509%,48.667% 0.488%,49.000% 0.523%,49.333% 0.165%,49.667% 0.160%,50.000% 0.282%,50.333% 0.499%,50.667% 0.516%,51.000% 0.492%,51.333% 0.377%,51.667% 0.310%,52.000% 0.126%,52.333% 0.433%,52.667% 0.425%,53.000% 0.334%,53.333% 0.472%,53.667% 0.637%,54.000% 0.613%,54.333% 0.070%,54.667% 0.187%,55.000% 0.398%,55.333% 0.448%,55.667% 0.185%,56.000% 0.605%,56.333% 0.300%,56.667% 0.497%,57.000% 0.034%,57.333% 0.181%,57.667% 0.015%,58.000% 0.514%,58.333% 0.339%,58.667% 0.619%,59.000% 0.394%,59.333% 0.211%,59.667% 0.232%,60.000% 0.244%,60.333% 0.129%,60.667% 0.070%,61.000% 0.422%,61.333% 0.204%,61.667% 0.295%,62.000% 0.461%,62.333% 0.178%,62.667% 0.286%,63.000% 0.210%,63.333% 0.211%,63.667% 0.433%,64.000% 0.064%,64.333% 0.260%,64.667% 0.071%,65.000% 0.435%,65.333% 0.194%,65.667% 0.627%,66.000% 0.314%,66.333% 0.430%,66.667% 0.340%,67.000% 0.533%,67.333% 0.455%,67.667% 0.417%,68.000% 0.021%,68.333% 0.092%,68.667% 0.488%,69.000% 0.268%,69.333% 0.634%,69.667% 0.413%,70.000% 0.535%,70.333% 0.484%,70.667% 0.626%,71.000% 0.428%,71.333% 0.609%,71.667% 0.277%,72.000% 0.174%,72.333% 0.072%,72.667% 0.164%,73.000% 0.581%,73.333% 0.428%,73.667% 0.028%,74.000% 0.018%,74.333% 0.299%,74.667% 0.354%,75.000% 0.235%,75.333% 0.013%,75.667% 0.170%,76.000% 0.570%,76.333% 0.471%,76.667% 0.532%,77.000% 0.175%,77.333% 0.434%,77.667% 0.128%,78.000% 0.196%,78.333% 0.622%,78.667% 0.139%,79.000% 0.190%,79.333% 0.141%,79.667% 0.564%,80.000% 0.447%,80.333% 0.384%,80.667% 0.553%,81.000% 0.301%,81.333% 0.595%,81.667% 0.505%,82.000% 0.195%,82.333% 0.153%,82.667% 0.349%,83.000% 0.290%,83.333% 0.513%,83.667% 0.424%,84.000% 0.483%,84.333% 0.392%,84.667% 0.172%,85.000% 0.484%,85.333% 0.638%,85.667% 0.414%,86.000% 0.462%,86.333% 0.152%,86.667% 0.077%,87.000% 0.291%,87.333% 0.386%,87.667% 0.473%,88.000% 0.308%,88.333% 0.353%,88.667% 0.058%,89.000% 0.031%,89.333% 0.079%,89.667% 0.207%,90.000% 0.158%,90.333% 0.093%,90.667% 0.220%,91.000% 0.219%,91.333% 0.536%,91.667% 0.608%,92.000% 0.646%,92.333% 0.479%,92.667% 0.007%,93.000% 0.155%,93.333% 0.649%,93.667% 0.452%,94.000% 0.558%,94.333% 0.130%,94.667% 0.156%,95.000% 0.064%,95.333% 0.341%,95.667% 0.238%,96.000% 0.306%,96.333% 0.090%,96.667% 0.017%,97.000% 0.251%,97.333% 0.602%,97.667% 0.424%,98.000% 0.372%,98.333% 0.041%,98.667% 0.282%,99.000% 0.240%,99.333% 0.410%,99.667% 0.262%,100.000% 0.521%,100.000% 99.821%,99.667% 99.526%,99.333% 99.997%,99.000% 99.905%,98.667% 99.482%,98.333% 99.445%,98.000% 99.803%,97.667% 99.871%,97.333% 99.375%,97.000% 99.615%,96.667% 99.942%,96.333% 99.357%,96.000% 99.632%,95.667% 99.805%,95.333% 99.671%,95.000% 99.760%,94.667% 99.625%,94.333% 99.731%,94.000% 99.756%,93.667% 99.524%,93.333% 99.801%,93.000% 99.460%,92.667% 99.515%,92.333% 99.387%,92.000% 99.900%,91.667% 99.440%,91.333% 99.536%,91.000% 99.881%,90.667% 99.408%,90.333% 99.673%,90.000% 99.884%,89.667% 99.864%,89.333% 99.351%,89.000% 99.479%,88.667% 99.848%,88.333% 99.420%,88.000% 99.975%,87.667% 99.547%,87.333% 99.589%,87.000% 99.435%,86.667% 99.410%,86.333% 99.524%,86.000% 99.452%,85.667% 99.699%,85.333% 99.393%,85.000% 99.721%,84.667% 99.527%,84.333% 99.512%,84.000% 99.737%,83.667% 99.467%,83.333% 99.533%,83.000% 99.896%,82.667% 99.618%,82.333% 99.684%,82.000% 99.613%,81.667% 99.981%,81.333% 99.544%,81.000% 99.742%,80.667% 99.521%,80.333% 99.843%,80.000% 99.987%,79.667% 99.697%,79.333% 99.585%,79.000% 99.494%,78.667% 99.648%,78.333% 99.428%,78.000% 99.894%,77.667% 99.920%,77.333% 99.738%,77.000% 99.573%,76.667% 99.502%,76.333% 99.958%,76.000% 99.611%,75.667% 99.773%,75.333% 99.657%,75.000% 99.936%,74.667% 99.895%,74.333% 99.586%,74.000% 99.778%,73.667% 99.366%,73.333% 99.671%,73.000% 99.773%,72.667% 99.878%,72.333% 99.658%,72.000% 99.668%,71.667% 99.833%,71.333% 99.370%,71.000% 99.669%,70.667% 99.498%,70.333% 99.555%,70.000% 99.459%,69.667% 99.933%,69.333% 99.374%,69.000% 99.611%,68.667% 99.893%,68.333% 99.613%,68.000% 99.963%,67.667% 99.725%,67.333% 99.936%,67.000% 99.968%,66.667% 99.707%,66.333% 99.455%,66.000% 99.507%,65.667% 99.392%,65.333% 99.494%,65.000% 99.598%,64.667% 99.609%,64.333% 99.377%,64.000% 99.916%,63.667% 99.662%,63.333% 99.646%,63.000% 99.991%,62.667% 99.431%,62.333% 99.558%,62.000% 99.779%,61.667% 99.483%,61.333% 99.690%,61.000% 99.528%,60.667% 99.643%,60.333% 99.441%,60.000% 99.672%,59.667% 99.941%,59.333% 99.504%,59.000% 99.850%,58.667% 99.628%,58.333% 99.393%,58.000% 99.530%,57.667% 99.955%,57.333% 99.455%,57.000% 99.372%,56.667% 99.698%,56.333% 99.834%,56.000% 99.699%,55.667% 99.654%,55.333% 99.970%,55.000% 99.449%,54.667% 99.582%,54.333% 99.740%,54.000% 99.470%,53.667% 99.887%,53.333% 99.422%,53.000% 99.442%,52.667% 99.691%,52.333% 99.927%,52.000% 99.709%,51.667% 99.931%,51.333% 99.644%,51.000% 99.908%,50.667% 99.662%,50.333% 99.734%,50.000% 99.790%,49.667% 99.621%,49.333% 99.653%,49.000% 99.427%,48.667% 99.710%,48.333% 99.627%,48.000% 99.527%,47.667% 99.893%,47.333% 99.651%,47.000% 99.883%,46.667% 99.678%,46.333% 99.669%,46.000% 99.411%,45.667% 99.374%,45.333% 99.802%,45.000% 99.445%,44.667% 99.758%,44.333% 99.837%,44.000% 99.612%,43.667% 99.803%,43.333% 99.385%,43.000% 99.414%,42.667% 99.979%,42.333% 99.360%,42.000% 99.422%,41.667% 99.910%,41.333% 99.571%,41.000% 99.637%,40.667% 99.897%,40.333% 99.542%,40.000% 99.993%,39.667% 99.776%,39.333% 99.670%,39.000% 99.479%,38.667% 99.735%,38.333% 99.813%,38.000% 99.695%,37.667% 99.649%,37.333% 99.740%,37.000% 99.937%,36.667% 99.454%,36.333% 99.866%,36.000% 99.879%,35.667% 99.859%,35.333% 99.373%,35.000% 99.950%,34.667% 99.595%,34.333% 99.628%,34.000% 99.852%,33.667% 99.491%,33.333% 99.884%,33.000% 99.926%,32.667% 99.982%,32.333% 99.570%,32.000% 99.966%,31.667% 99.600%,31.333% 99.573%,31.000% 99.933%,30.667% 99.371%,30.333% 99.911%,30.000% 99.787%,29.667% 99.480%,29.333% 99.826%,29.000% 99.494%,28.667% 99.547%,28.333% 99.507%,28.000% 99.756%,27.667% 99.821%,27.333% 99.694%,27.000% 99.595%,26.667% 99.985%,26.333% 99.940%,26.000% 99.823%,25.667% 99.967%,25.333% 99.510%,25.000% 99.368%,24.667% 99.665%,24.333% 99.784%,24.000% 99.723%,23.667% 99.431%,23.333% 99.530%,23.000% 99.637%,22.667% 99.586%,22.333% 99.406%,22.000% 99.597%,21.667% 99.863%,21.333% 99.422%,21.000% 99.971%,20.667% 99.909%,20.333% 99.874%,20.000% 99.751%,19.667% 99.626%,19.333% 99.463%,19.000% 99.835%,18.667% 99.431%,18.333% 99.353%,18.000% 99.432%,17.667% 99.472%,17.333% 99.632%,17.000% 99.706%,16.667% 99.898%,16.333% 99.750%,16.000% 99.854%,15.667% 99.765%,15.333% 99.955%,15.000% 99.374%,14.667% 99.728%,14.333% 99.940%,14.000% 99.918%,13.667% 99.709%,13.333% 99.949%,13.000% 99.563%,12.667% 99.801%,12.333% 99.584%,12.000% 99.779%,11.667% 99.748%,11.333% 99.427%,11.000% 99.703%,10.667% 99.407%,10.333% 99.561%,10.000% 99.514%,9.667% 99.523%,9.333% 99.635%,9.000% 99.796%,8.667% 99.557%,8.333% 99.976%,8.000% 99.839%,7.667% 99.477%,7.333% 99.451%,7.000% 99.986%,6.667% 99.491%,6.333% 99.708%,6.000% 99.862%,5.667% 99.403%,5.333% 99.625%,5.000% 99.839%,4.667% 99.403%,4.333% 99.957%,4.000% 99.541%,3.667% 99.528%,3.333% 99.520%,3.000% 99.693%,2.667% 99.805%,2.333% 99.857%,2.000% 99.506%,1.667% 99.675%,1.333% 99.982%,1.000% 99.549%,0.667% 99.526%,0.333% 99.486%,0.000% 99.691%);border:0}
.profile dd,.profile dd.hand,.profile .skills dd,.profile .about dd,.blue-stamp{font-family:ArchiveHand,KaiTi,cursive}
.profile dd{font-size:19px;line-height:1.5}.profile dd.hand{font-size:32px;font-weight:500}.profile .skills dd{font-size:18px;line-height:1.5}.profile .about dd{font-size:13px;line-height:1.6}.blue-stamp{font-size:29px;letter-spacing:1px}
@media(max-width:600px){.mobile-open .profile dd{font-size:18px}.mobile-open .profile dd.hand{font-size:30px}.mobile-open .profile .skills dd{font-size:17px}.mobile-open .profile .about dd{font-size:13px;line-height:1.5}}
/* Hamal / Codrops 003: staggered flat stack, reduced for a readable archive. */
.stack-extra{position:absolute;inset:0;pointer-events:none;opacity:0;background:var(--page-back);border:1px solid #59605a25;background-image:url(assets/paper-fiber.svg);transform-origin:50% 55%}
.stack-extra-two{background-color:var(--page-under)}
#cards>.card-under{pointer-events:none;transform-origin:50% 55%}
#cards>.stack-extra,#cards>.card-under,#portfolioCard{transition:transform 500ms cubic-bezier(.16,1,.3,1),opacity 500ms ease,background-color 450ms ease}
#portfolioCard .work-cover img{transition:transform 850ms cubic-bezier(.22,1.35,.4,1);transform-origin:center}
#portfolioCard .work-number,#portfolioCard .work-tags{transition:translate 500ms cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
#cards:not(.stack-enabled):not(.is-tearing):hover>.stack-extra-one{opacity:.55;transform:translateY(0) rotate(-5deg) scale(1.035);transition-duration:1000ms;transition-delay:120ms}
#cards:not(.stack-enabled):not(.is-tearing):hover>.stack-extra-two{opacity:.7;transform:translateY(-5px) rotate(4deg) scale(1.035);transition-duration:1000ms;transition-delay:90ms}
#cards:not(.stack-enabled):not(.is-tearing):hover>.red-under{transform:translateY(-10px) rotate(-3deg) scale(1.035);transition-duration:1000ms;transition-delay:60ms}
#cards:not(.stack-enabled):not(.is-tearing):hover>.green-under{transform:translateY(-15px) rotate(2deg) scale(1.035);transition-duration:1000ms;transition-delay:30ms}
#cards:not(.stack-enabled):not(.is-tearing):hover>#portfolioCard{transform:translateY(-20px);transition-duration:1000ms}
#cards:not(.stack-enabled):not(.is-tearing):hover #portfolioCard .work-cover img{transform:scale(.86);transition:transform 1000ms cubic-bezier(.16,1,.3,1)}
#cards:not(.stack-enabled):not(.is-tearing):hover #portfolioCard .work-number{translate:-5px 0}
#cards:not(.stack-enabled):not(.is-tearing):hover #portfolioCard .work-tags{translate:5px 0}
}
@media(prefers-reduced-motion:reduce){#cards>.stack-extra{display:none}#portfolioCard .work-cover img{transform:none!important}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){#sheet>.clip{transition:translate 500ms cubic-bezier(.16,1,.3,1)}#sheet:has(#cards:not(.stack-enabled):not(.is-tearing):hover)>.clip{translate:0 -20px;transition-duration:1000ms}}
.cat-paper{background:#c89c59 url('assets/ragdoll-poster.jpg') center/100% 100% no-repeat;clip-path:none;inset:5px 1px 2px;transform:rotate(-7deg);box-shadow:1px 2px 2px #48382430;overflow:hidden}.cat-paper .cat-poster,.cat-paper video{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.cat-paper video{position:absolute;inset:0;opacity:0}.red-sticker.is-cat-playing .cat-paper video{opacity:1}.red-sticker{animation:none}
/* Remove only the green badge from the cover decoration sprite. */
.ideas{-webkit-mask-image:radial-gradient(ellipse 35px 35px at 137px 145px,transparent 98%,#000 100%);mask-image:radial-gradient(ellipse 35px 35px at 137px 145px,transparent 98%,#000 100%)}
/* The supplied return label is attached to the paper, and only exists in the open view. */
@property --return-peel {
syntax: '';
inherits: true;
initial-value: 0px;
}
#sheet > #back {
position: absolute;
left: 22px;
top: 4px;
z-index: 12;
width: 150px;
aspect-ratio: 1844 / 544;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
box-shadow: none;
transform: rotate(-2deg);
transform-origin: 12% 50%;
perspective: 500px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
#canvas:not(.opened) #sheet > #back { display: none; }
.archive-eyebrow .archive-eyebrow-title { font: inherit; letter-spacing: inherit; }
.opened .archive-eyebrow-title { visibility: hidden; }
#back .archive-return-art {
position: relative;
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(0 1px .7px #38291538);
transform-origin: 12% 50%;
pointer-events: none;
}
/* Frame the replacement paper (x:98, y:114, w:1844, h:544); keep the bitmap intact. */
#back .archive-return-art::before {
content: '';
position: absolute;
inset: 0;
background: url('assets/archive-return-label-soft.webp') no-repeat;
background-size: 109.6529% auto;
background-position: 55.0562% 48.7179%;
clip-path: polygon(0 0,100% 0,100% calc(100% - var(--return-peel)),calc(100% - var(--return-peel)) 100%,0 100%);
}
#back .archive-return-art img {
/* Keep the original asset in markup; the matched background permits a local corner fold. */
display: none;
}
#back .archive-return-art::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: var(--return-peel);
height: var(--return-peel);
background: linear-gradient(135deg,#b9a582 3%,#fff3d5 40%,#ecdab6 72%,#a38d68);
clip-path: polygon(0 0,100% 0,0 100%);
filter: drop-shadow(-1px -1px 1.2px #513c2a75);
}
#sheet > #back:focus-visible {
outline: 2px solid #89634e;
outline-offset: 4px;
}
.opened #back .archive-return-art { animation: return-label-attach 520ms cubic-bezier(.2,.75,.2,1); }
@keyframes return-label-attach {
0% { --return-peel: 24px; opacity: 0; transform: translateY(-3px) rotateX(12deg); filter: drop-shadow(0 4px 2px #38291538); }
30% { opacity: 1; }
100% { --return-peel: 0px; opacity: 1; transform: none; filter: drop-shadow(0 1px .7px #38291538); }
}
#sheet > #back:active .archive-return-art { --return-peel: 0px; transform: scale(.99); filter: drop-shadow(0 .4px .3px #38291528); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
#back .archive-return-art { transition: --return-peel 320ms ease, filter 320ms ease, transform 160ms ease; }
#sheet > #back:hover .archive-return-art { --return-peel: 22px; filter: drop-shadow(0 2.6px 1.6px #38291548); }
#sheet > #back:active .archive-return-art { --return-peel: 0px; filter: drop-shadow(0 .4px .3px #38291528); }
}
@media (max-width: 599px) {
.mobile-open #sheet > #back { width: 164px; top: 9px; left: 15px; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
#back .archive-return-art { animation: none !important; transition: none !important; --return-peel: 0px; }
}