:root{font-family:Arial,"Microsoft YaHei",sans-serif;color:#24262b;background:#f3f4f7;font-synthesis:none;--ease:cubic-bezier(.22,1,.36,1);--scale:1}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 50% 43%,#fff 0%,#f7f8fa 36%,#f0f1f5 100%);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #293c75;outline-offset:5px}button{border:0;background:none}button:disabled{cursor:default}button span{margin-left:6px}.skip{position:fixed;top:-60px;background:#fff;padding:15px;z-index:50}.skip:focus{top:10px}.site-header{position:absolute;inset:28px 34px auto;display:flex;align-items:center;justify-content:space-between;z-index:5;font-size:11px}.brand{display:flex;align-items:center;gap:11px;font-weight:600}.brand-mark{font-family:"Arial Black",Arial,sans-serif;font-size:16px;font-weight:900;letter-spacing:-2px}.brand-sub{font-weight:400;color:#96989f;margin-left:15px}.site-header p{margin:0;color:#878a92;font-size:10px}#home{min-height:100dvh;display:flex;flex-direction:column}.stage{position:relative;flex:1;min-height:540px;perspective:1600px;cursor:grab;touch-action:pan-y;user-select:none}.stage.dragging{cursor:grabbing}.fit{position:absolute;width:620px;height:360px;left:50%;top:48%;margin-left:-310px;margin-top:-160px;transform:translateY(0) scale(var(--scale));transform-style:preserve-3d;transition:transform .8s var(--ease),top .8s var(--ease)}.expanded .fit{top:57%;transform:translateY(50px) scale(var(--scale))}.rotation{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s var(--ease)}.dragging .rotation{transition:none}.back-board,.front-board,.paper,.paper-back,.folder-back,.paper-edge{position:absolute;inset:0;background:#fffefa;border:1px solid rgba(35,40,52,.07);border-radius:7px 7px 13px 13px;backface-visibility:hidden}.back-board{transform:translateZ(-33px);box-shadow:0 8px 10px #242b3a0a}.paper-back{transform:rotateY(180deg);background:#fffefb}.folder-back{transform:translateZ(-36px) rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:linear-gradient(135deg,#fff 0%,#fdfdfb 65%,#f6f6f4 100%);box-shadow:0 10px 12px #1e243514}.folder-back small{font-size:9px;letter-spacing:3px;color:#92959c}.wordmark{font-family:"Arial Black","Arial",sans-serif;font-weight:1000;font-size:67px;letter-spacing:-4px;line-height:1.1;transform:scaleX(1.19);display:inline-block}.folder-back .wordmark{font-size:65px}.folder-back p{font-size:11px;color:#8a8c92}.folder-back .back-index{position:absolute;bottom:22px;font-size:8px;letter-spacing:2px;color:#a1a3aa}.front-board{top:110px;height:250px;transform:translateZ(26px);background:linear-gradient(160deg,#fffefa,#fff 65%,#fafaf8);box-shadow:0 4px 4px #252a3610,0 13px 16px -12px #171e3a40;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:transform .8s var(--ease),top .8s var(--ease),height .8s var(--ease);transform-origin:50% 100%;cursor:pointer}.front-board:before{content:"";position:absolute;top:8px;left:12px;right:12px;height:1px;background:#fff}.front-board .wordmark{font-size:59px;letter-spacing:-3.8px}.cover-eyebrow{font-size:8px;letter-spacing:3px;color:#9a9a9d;margin-bottom:17px}.cover-description{font-size:10px;color:#8d8e93;margin-top:17px;letter-spacing:1px}.cover-bottom{position:absolute;bottom:22px;left:27px;right:27px;display:flex;justify-content:space-between;font-size:8px;color:#9a9da5;letter-spacing:1px}.expanded .front-board{top:174px;height:186px;transform:translateY(28px) translateZ(58px) rotateX(-17deg)}.expanded .front-board .wordmark{font-size:44px}.expanded .cover-eyebrow{margin-bottom:10px}.expanded .cover-description{margin-top:10px}.paper-position{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease);transition-delay:calc(var(--i)*22ms);pointer-events:none}.paper-lift{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s var(--ease);transform:translateY(0) translateZ(0)}.paper{background:linear-gradient(180deg,var(--paper),#fffefa 89%);padding:17px 23px;box-shadow:0 3px 4px #292c3910;pointer-events:none}.paper:after{content:"";position:absolute;inset:5px 4px -4px;border:1px solid #d7d8de57;border-top:none;border-radius:0 0 12px 12px;transform:translateZ(-2px);pointer-events:none}.paper.active{box-shadow:0 12px 24px -15px #1b23396e}.paper h2{font-size:17px;font-weight:800;letter-spacing:-.5px;margin:0}.sheet-meta{display:flex;align-items:center;justify-content:space-between}.sheet-meta small{font-size:8px;color:#777d86;letter-spacing:1px}.sheet-subtitle{font-size:9px;color:#8b8d92;margin:8px 0 16px}.sheet-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.project-link{min-width:0;display:block;pointer-events:none;transition:transform .17s ease;cursor:pointer}.project-link:hover{transform:translateY(-4px)}.project-link img{width:100%;height:100px;object-fit:cover;display:block;border-radius:3px;background:#eeeeec;box-shadow:0 2px 8px #20263a0d}.project-link strong{display:block;font-size:10px;font-weight:600;margin-top:10px;line-height:1.5}.project-link small{font-size:8px;color:#909097;display:block;margin-top:4px}.project-link .view-project{margin-top:13px;font-size:8px;color:#626671}.active .project-link{pointer-events:auto}.anchor{position:absolute;top:-28px;left:0;right:0;height:64px;pointer-events:none;transform:translateZ(2px);backface-visibility:hidden}.category-tab{position:absolute;left:calc(8px + var(--i)*75px);top:0;padding:0;width:72px;height:29px;border-radius:6px 6px 0 0;background:var(--color);font-size:10px;font-weight:700;box-shadow:inset 0 1px 1px #fff8;pointer-events:auto;cursor:pointer;white-space:nowrap}.anchor-title{position:absolute;left:0;right:0;top:29px;height:34px;pointer-events:none}.expanded .anchor-title{pointer-events:auto}.paper-edge{height:360px;transform-origin:50% 100%;pointer-events:none;background:#fffefb;border-color:#e0e2e575;transition:transform .8s var(--ease)}.back-view .paper-position,.back-view .front-board{pointer-events:none}.back-view .category-tab,.back-view .anchor-title,.back-view .project-link{pointer-events:none}.empty-sheet{font-size:11px;color:#8f9399;line-height:2.2;padding-top:25px}.empty-sheet strong{display:block;color:#4f555e;font-weight:500}.ground-shadow{position:absolute;left:50%;top:69%;width:550px;height:70px;border-radius:50%;background:#555c6c17;filter:blur(23px);transform:translateX(-50%);pointer-events:none;transition:width .8s,top .8s}.expanded .ground-shadow{width:660px;top:80%;background:#555c6c12}.scene-caption{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;color:#92959d;font-size:10px;white-space:nowrap;cursor:default}.caption-line{width:15px;height:1px;background:#a4a8b1}.site-footer{position:relative;z-index:10;text-align:center;padding:15px 20px 20px}.controls{display:flex;justify-content:center;align-items:center;gap:23px;font-size:10px;color:#777b84;margin-bottom:18px}.controls button{padding:6px 0;white-space:nowrap}.controls button:hover{color:#23262d}.controls #toggle{color:#393e47}.desktop-hint span{color:#b6b9c1;margin:0 8px}#category-nav{display:flex;gap:7px;justify-content:center}#category-nav button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:5px;padding:10px 13px;background:#ffffffa6;font-size:10px;transition:background .2s,box-shadow .2s}#category-nav button:hover{background:#fff;box-shadow:0 3px 12px #262b3a0a}#category-nav button[aria-pressed=true]{background:#fff;box-shadow:0 0 0 1px var(--color),0 3px 8px #262b3a06}#category-nav i{width:7px;height:7px;background:var(--color);border-radius:2px}.preview-note{font-size:9px;color:#b1b4bd;margin:15px 0 0;letter-spacing:.4px}#mobile-preview{display:none}[hidden]{display:none!important}#detail{max-width:1060px;margin:auto;padding:122px 45px 65px;min-height:100dvh}.detail-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#848995;margin-bottom:70px}.back-link{padding:10px 0;cursor:pointer}.category-label{display:flex;align-items:center;gap:9px}.category-label i{width:8px;height:8px;border-radius:2px;background:var(--color)}.detail-title{font-size:clamp(34px,5vw,64px);font-weight:700;letter-spacing:-2px;line-height:1.2;margin:0 0 20px}.detail-summary{font-size:15px;color:#767b84;line-height:1.9;max-width:650px}.detail-artwork{background:#fff;border:1px solid #e7e9ed;border-radius:5px;padding:12px;margin:45px 0 22px;cursor:zoom-in;display:block;width:100%}.detail-artwork img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.detail-note{font-size:11px;line-height:1.8;color:#9499a3}.detail-next{margin-top:60px;padding-top:25px;border-top:1px solid #dfe2e8;display:flex;justify-content:space-between;font-size:12px}.detail-next a{padding:12px 0}.detail-header .brand-sub{display:none}dialog{position:fixed;inset:0;border:0;background:#f6f7f9;border-radius:5px;width:min(1200px,96vw);max-height:95dvh;padding:50px 20px 15px}dialog::backdrop{background:#20232cc9}dialog img{display:block;max-width:100%;max-height:78dvh;margin:auto;object-fit:contain}.lightbox-close{position:absolute;top:15px;right:20px;font-size:12px}dialog p{text-align:center;font-size:11px;color:#858a93}.reduced .rotation{transform:rotateX(0deg) rotateY(0deg)!important}@media(max-height:760px) and (min-width:701px){.stage{min-height:420px}.site-header{top:23px}.site-footer{padding-bottom:12px}.scene-caption{bottom:5px}.controls{margin-bottom:10px}.preview-note{margin-top:10px}.expanded .fit{top:56%}}
@media(max-width:700px){.site-header{inset:23px 22px auto}.site-header p{display:none}.brand-sub{font-size:9px;margin-left:9px}.stage{flex:none;height:440px;min-height:0;perspective:1400px;cursor:default}.fit{top:49%;margin-top:-180px}.expanded .fit{top:48%;transform:translateY(50px) scale(var(--scale))}.ground-shadow{width:240px;height:30px;top:72%}.expanded .ground-shadow{width:300px;top:80%}.scene-caption{bottom:13px;font-size:9px}.site-footer{display:flex;flex-direction:column;padding:12px 15px 20px}.controls{order:1;gap:24px;font-size:11px;margin:0 0 15px}.desktop-hint{display:none}#category-nav{order:2;justify-content:flex-start;overflow-x:auto;padding:6px 5px 10px;scrollbar-width:thin}#category-nav button{min-height:44px;padding:10px 12px;flex-shrink:0;font-size:11px}.preview-note{order:3}.expanded #mobile-preview{display:block;margin:0 22px 8px;padding-top:20px;border-top:1px solid #e1e4ea}#mobile-preview h2{font-size:20px;margin:0 0 5px}#mobile-preview .mobile-category-sub{font-size:10px;color:#9297a1;margin:0 0 22px}#mobile-preview .project-link{pointer-events:auto;display:grid;grid-template-columns:110px 1fr;column-gap:17px;margin-bottom:23px}#mobile-preview .project-link img{grid-row:1/5;height:85px}#mobile-preview .project-link strong{font-size:12px;margin-top:2px}#mobile-preview .project-link small{font-size:10px}#mobile-preview .project-link .view-project{font-size:10px;margin-top:7px}#mobile-preview .empty-sheet{padding:0 0 15px}.paper .project-link{pointer-events:none!important}#detail{padding:100px 22px 40px}.detail-top{margin-bottom:45px}.detail-title{letter-spacing:-1px}.detail-summary{font-size:13px}.detail-artwork{margin-top:30px;padding:5px}.detail-next{gap:20px;font-size:11px}.detail-note{font-size:10px}}
.back-board,.folder-back{transition:transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}.rotation{transform:rotateX(0deg) rotateY(0deg)!important}}
@media(max-width:700px){.stage{order:0}.site-footer{order:1}.expanded #mobile-preview{order:2;margin-top:12px}}
.document-cover{height:100px;display:flex;align-items:center;justify-content:center;background:#f1eee6;color:#6d6656;font-size:16px;font-weight:700;letter-spacing:2px}.collection-link{display:inline-block;margin-top:18px;font-size:11px;padding:8px 0}.media-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.media-actions a,.read-pdf{padding:13px 18px;background:#fff;border:1px solid #dfe3e8;border-radius:5px;font-size:12px}.media-actions a:hover,.read-pdf:hover{border-color:#9caa9f}.project-video{display:block;width:100%;max-height:70dvh;background:#111;border-radius:6px;margin:28px 0}.pdf-reader{display:block;width:100%;height:75dvh;border:1px solid #dce0e5;margin:30px 0}.read-pdf{display:block;margin:24px 0}.gallery-item{margin:30px 0 50px}.gallery-item .detail-artwork{margin:0 0 12px}.gallery-item figcaption{font-size:12px;color:#9297a0}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;margin-top:45px}.collection-grid .project-link{pointer-events:auto}.collection-grid .project-link img,.collection-grid .document-cover{height:180px}.collection-grid .project-link strong{font-size:15px}.collection-grid .project-link small{font-size:11px}.collection-grid .view-project{font-size:11px}.video-error{font-size:13px;padding:16px;background:#fff}.video-error a{text-decoration:underline}@media(max-width:700px){.collection-grid{grid-template-columns:1fr 1fr;gap:28px 15px}.collection-grid .project-link img{height:110px}.collection-grid .project-link strong{font-size:12px}.media-actions a{font-size:11px;padding:12px}.document-cover{min-width:100px}.gallery-item{margin-bottom:30px}}
.detail-title:focus{outline:none}
.sheet-arrival{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
/* Tabs are part of the lifted sheet. The transparent anchor only stabilizes hover. */
.paper-lift>.category-tab{top:-28px;transform:translateZ(1px)}
.tab-hit{position:absolute;top:0;left:calc(8px + var(--i)*75px);width:72px;height:29px;padding:0;pointer-events:auto;background:transparent}
.back-view .tab-hit{pointer-events:none}
/* Frosted polypropylene shell: translucent leaves, with highlights and fine grain. */
.front-board,.folder-back,.back-board{background:linear-gradient(125deg,rgba(255,255,255,.78),rgba(248,250,252,.49) 44%,rgba(238,242,247,.65));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #77849b29,0 8px 18px -10px #37415738;backdrop-filter:blur(7px) saturate(.75);-webkit-backdrop-filter:blur(7px) saturate(.75)}
.front-board:after,.folder-back:after,.back-board:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.065'/%3E%3C/svg%3E");opacity:.33}
.front-board:before{top:5px;left:8px;right:8px;height:12px;background:linear-gradient(#ffffff8a,#ffffff00);border-top:1px solid #fff9;border-radius:5px}
.front-board .wordmark.signed-wordmark,.folder-back .wordmark.signed-wordmark{font-size:34px;letter-spacing:-1.9px;transform:scaleX(1.12);white-space:nowrap;position:relative;z-index:1}
.expanded .front-board .wordmark.signed-wordmark{font-size:29px;letter-spacing:-1.5px}
.folder-back .wordmark.signed-wordmark{font-size:36px}
.front-board .cover-eyebrow,.front-board .cover-description,.cover-bottom{position:relative;z-index:1}.cover-bottom{position:absolute}
.brand-mark{font-size:13px;letter-spacing:-.6px;font-weight:900}.brand-sub{margin-left:0;font-size:10px}
.folder-spine{position:absolute;top:0;left:0;width:620px;transform-origin:50% 0;pointer-events:none;background:repeating-linear-gradient(0deg,#cdd4df24 0px,#fff7 1px,#f5f7fa30 3px,#edf0f530 20px),linear-gradient(90deg,#c7cfdb55,#fff9 2%,#edf1f547 50%,#fff9 98%,#bbc5d155);border:1px solid #cbd3df60;border-radius:0 0 4px 4px;box-shadow:inset 0 0 8px #fff9;transition:height .8s var(--ease),transform .8s var(--ease);backface-visibility:visible}
.spine-seam{position:absolute;left:0;right:0;height:2px;background:#e3e8efb3;box-shadow:0 1px 0 #fff9}.spine-seam-back{top:0}.spine-seam-front{bottom:0}
@media(prefers-reduced-motion:reduce){.folder-spine{transition:none}}
/* The bottom stays seated inside the shell while the top of the sheet rises. */
.paper-lift{transition:transform .38s var(--ease),bottom .38s var(--ease)}
.paper.active{pointer-events:auto;box-shadow:0 4px 7px #292c3914}
.paper{padding-top:14px}.sheet-subtitle{margin:5px 0 9px}.paper .project-link img,.paper .document-cover{height:70px}.paper .project-link strong{margin-top:6px}.paper .project-link .view-project{margin-top:6px}
.paper .project-link :is(strong,small,.view-project){display:none}
.paper .collection-link{position:absolute;right:23px;top:31px;margin:0;padding:5px 0;font-size:9px}
/* Only visible paper surfaces and tabs receive input; old header anchors must not mask raised artwork. */
.anchor-title,.expanded .anchor-title{pointer-events:none}
.paper{pointer-events:auto}.back-view .paper{pointer-events:none}
/* The shell follows every real page foot; no diagonal plane can cut through the pages. */
.folder-spine{inset:0;width:620px;height:360px!important;transform:none!important;transform-style:preserve-3d;background:none;border:0;box-shadow:none;transition:none}
.spine-fold{position:absolute;top:0;left:0;width:620px;transform-origin:50% 0;background:linear-gradient(0deg,#d9e1ebc7,#f3f6f9d6 16%,#ffffffb5 80%,#d3dce7b3);border-left:1px solid #bdc8d788;border-right:1px solid #bdc8d788;border-top:1px solid #faffffbf;box-shadow:inset 0 1px 1px #ffffffd9,inset 0 -1px 2px #8b9bb92e;transition:height .8s var(--ease),transform .8s var(--ease);backface-visibility:visible}
.paper:after{bottom:0}.paper-edge{display:none}
@media(prefers-reduced-motion:reduce){.spine-fold{transition:none}}
/* Constant cover dimensions, with a light pivot around its real lower edge. */
.expanded .front-board{top:110px;height:250px;transform:translateZ(58px) rotateX(-12deg)}
.expanded .front-board .wordmark.signed-wordmark{font-size:34px;letter-spacing:-1.9px}
.expanded .cover-eyebrow{margin-bottom:17px}.expanded .cover-description{margin-top:17px}
.shell-side{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;backface-visibility:visible;background:repeating-linear-gradient(90deg,rgba(220,228,237,.05) 0,rgba(254,255,255,.24) 1px,rgba(211,222,234,.07) 2px,rgba(250,252,255,.09) 29px),linear-gradient(110deg,rgba(255,255,255,.25),rgba(221,231,241,.12) 48%,rgba(255,255,255,.32));border:1px solid #dce5ed77;box-shadow:inset 0 0 8px #fff6;transition:width .8s var(--ease),height .8s var(--ease),transform .8s var(--ease),clip-path .8s var(--ease)}
@media(prefers-reduced-motion:reduce){.shell-side{transition:none}}
/* Establish the scene before its entrance wave so two animations never fight on load. */
.scene-booting :is(.paper-position,.paper-lift,.rotation,.fit,.back-board,.folder-back,.front-board,.spine-fold,.shell-side){transition:none!important}
.sheet-arrival[data-entrance]{will-change:transform}