@font-face{font-family:ArchiveNav;src:url('assets/navigation-serif.ttf') format('truetype');font-weight:900;font-display:swap}
:root{--orange:#ef661e;--ink:#231b12;--red:#f52d1d;--ease:cubic-bezier(.22,.75,.18,1)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#fff}
body{overflow:hidden;color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,.file-card:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
button[aria-disabled=true]{cursor:default}
main{position:relative;height:100svh;min-height:360px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.orange-curtain{position:fixed;inset:0;background:var(--orange);transform:scaleY(0);transform-origin:50% 0;pointer-events:none}
.topbar{position:absolute;z-index:80;inset:16px 3.35% auto 1.7%;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.home-button{padding:0;border:0;background:none;width:32px;height:36px;opacity:0;transform:translateX(-100px);pointer-events:auto}
.home-button svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
nav{display:flex;align-items:center;gap:clamp(28px,4.3vw,90px);opacity:0;transform:translateX(120px);pointer-events:auto}
nav button{padding:2px 0 8px;border:0;background:transparent;font-family:ArchiveNav,"Noto Serif TC","SimSun",serif;font-weight:900;font-size:clamp(16px,1.3vw,26px);letter-spacing:.09em;white-space:nowrap}
nav button{position:relative;-webkit-text-stroke:.45px currentColor}
.nav-en{position:absolute;top:100%;left:0;width:100%;font:600 12px Arial,sans-serif;letter-spacing:.13em;-webkit-text-stroke:0;opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100%);transition:transform .25s ease,opacity .25s ease,clip-path .25s ease;pointer-events:none}
nav button:hover .nav-en,nav button:focus-visible .nav-en{opacity:1;transform:translateY(4px);clip-path:inset(0 0 0)}
.stage{position:absolute;inset:0}
.scene-space{position:absolute;left:50%;top:50%;width:900px;height:1000px;transform:translate(-50%,-50%) scale(var(--scene-scale,.65));transform-origin:center;isolation:isolate}
.archive{position:relative;width:900px;height:1000px;isolation:isolate;opacity:0;transform-origin:50% 93%;--glass-blur:18px}
.glass{position:absolute;inset:0;pointer-events:none}
/* Animate motion, not ancestor opacity: opacity changes the backdrop-filter root. */
.archive{will-change:transform}
.glass-back{z-index:1;clip-path:polygon(0% 4.4%,55.8% 0%,55.8% 75%,3.4% 76.4%);background:linear-gradient(125deg,rgba(255,240,220,.22),rgba(255,236,215,.08))}
.glass-right{z-index:2;clip-path:polygon(55.8% 0%,100% 48.6%,98% 83.5%,55.8% 75%);background:linear-gradient(125deg,rgba(255,235,211,.14),rgba(255,230,200,.25))}
.glass-left{z-index:20;clip-path:polygon(0% 4.4%,40.78% 60.5%,40.78% 99.8%,3.4% 76.4%);background:linear-gradient(115deg,rgba(255,244,228,.27),rgba(236,241,244,.14) 55%,rgba(239,244,247,.29));backdrop-filter:blur(var(--glass-blur)) saturate(.68);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(.68);pointer-events:auto}
.back-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;fill:none;stroke:rgba(255,226,197,.38);stroke-width:2.4;stroke-linejoin:round}
.box-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:21;fill:none;stroke:rgba(255,226,197,.38);stroke-width:2.4;stroke-linejoin:round}
.front-panel{position:absolute;top:0;left:0;width:532px;height:394px;z-index:30;transform-origin:0 0;background:linear-gradient(110deg,#f37013,#ed620c);border-radius:9px 7px 5px 5px;border:1px solid rgba(170,68,0,.3);box-shadow:inset 3px 1px 5px rgba(255,151,58,.52),inset -5px -2px 8px rgba(156,58,0,.14);padding:29px 22px 25px;display:grid;grid-template-rows:repeat(3,1fr);gap:22px;pointer-events:auto}
.front-panel i{display:block;border-radius:9px;background:#e85d0a;box-shadow:inset 3px 5px 7px rgba(127,48,0,.25),inset -1px -1px 3px rgba(255,165,54,.24);border:1px solid rgba(180,66,0,.1)}
.file-slot{position:absolute;inset:0;pointer-events:none;z-index:10}
.file-slot[data-file="02"]{z-index:11}.file-slot[data-file="01"]{z-index:12}
.file-card{position:absolute;left:0;top:0;width:480px;height:480px;transform-origin:0 0;border-radius:15px;isolation:isolate;box-shadow:1px 1px 3px rgba(27,20,10,.3),4px 12px 25px rgba(74,29,1,.12);cursor:pointer;pointer-events:auto;color:#fff;transition:transform .68s var(--ease),box-shadow .5s ease;outline-offset:5px;user-select:none}
.file-card>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
.file-card{-webkit-tap-highlight-color:transparent;overflow:hidden}
.file-card>img{transform:scaleX(var(--photo-compensation,1));transition:transform .68s var(--ease)}
body[data-returning=true] .file-controls{opacity:0;visibility:hidden;transition:none}
.topbar{transition:opacity .4s ease}
body[data-returning=true] main{pointer-events:none}
body[data-returning=true] .file-card,body[data-returning=true] .detail-shade,body[data-returning=true] .front-panel,body[data-returning=true] .glass,body[data-returning=true] nav,body[data-returning=true] .home-button{pointer-events:none}
.file-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 1px 1px 1px rgba(255,255,255,.45);pointer-events:none}
.file-card[data-file="01"]{color:var(--red)}
.file-number{position:absolute;left:8.7%;top:15%;font-family:Arial,Helvetica,sans-serif;font-size:102px;font-weight:700;line-height:1;letter-spacing:-.075em;pointer-events:none}
.file-title{position:absolute;right:7.7%;top:8.5%;writing-mode:vertical-rl;font-family:"PMingLiU","MingLiU","SimSun",serif;font-size:32px;letter-spacing:.11em;line-height:1.08;font-weight:400;pointer-events:none}
/* Selection preserves 03 < 02 < 01, so a rear file cannot cover a front file. */
.file-slot.is-selected .file-card{box-shadow:2px 4px 9px rgba(56,20,1,.18),9px 19px 30px rgba(56,20,1,.14)}
.file-slot.is-expanded{z-index:70}
/* Continue the actual front lip (367,605) -> (900,486) into the return
   corridor, then follow the outer edge to (883,836). A horizontal cut at
   y=486 leaves a square notch at the sloping lip/side-panel junction. */
.archive[data-inserting-home-work=true]>.file-slot[data-file="02"]{clip-path:polygon(-500% -500%,500% -500%,500% -31.775%,100% 48.6%,98.111% 83.6%,98.111% 500%,-500% 500%)}
.file-card{border:0}
.is-expanded .file-card::after{box-shadow:inset .5px .5px 0 rgba(230,235,238,.23);background:radial-gradient(ellipse 30px 22px at 0 0,rgba(240,245,248,.28),transparent),radial-gradient(ellipse 24px 18px at 100% 100%,rgba(240,245,248,.19),transparent)}
.file-card[data-file="01"] .file-title{font-weight:600;-webkit-text-stroke:.55px currentColor;text-shadow:0 .25px .3px rgba(114,20,14,.15)}
.file-card .file-number{font-size:104px;letter-spacing:-.06em;-webkit-text-stroke:.3px currentColor}
.file-card .file-title{font-family:"SimSun","Songti SC","PMingLiU",serif;font-weight:400;-webkit-text-stroke:.35px currentColor;letter-spacing:.08em}
.file-card[data-file="01"]{color:#ed3024}
.file-card:not([data-file="01"]){color:#f8f7f3}
.file-slot.is-expanded .file-card{cursor:default;box-shadow:0 24px 42px rgba(20,10,0,.34)}
.file-controls{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .25s ease;pointer-events:none}
.is-expanded .file-controls{opacity:1;visibility:visible;transition-delay:.25s}
.file-controls button{position:absolute;border:1px solid rgba(255,255,255,.17);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:auto;backdrop-filter:blur(12px)}
.file-controls svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.back-button{left:4%;top:4%;width:56px;height:56px;border-radius:50%;background:rgba(153,150,145,.38)}
.back-button svg{transform:rotate(180deg)}
.back-button{transition:background-color 150ms linear}
.back-button:hover,.back-button:focus-visible{background:var(--orange)}
.enter-button{bottom:4%;right:4%;min-width:205px;height:56px;border-radius:30px;background:rgba(50,50,50,.72);font:700 18px Georgia,"SimSun",serif;letter-spacing:.035em;gap:16px;padding:0 22px}
.enter-button{background:rgba(100,100,100,.48);transition:background-color 150ms linear}
.enter-button:hover{background:var(--orange)}
.detail-shade{position:absolute;inset:-4000px;z-index:60;background:rgba(20,13,5,.52);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility .55s}
.archive[data-state="expanded"] .detail-shade{visibility:visible;opacity:1;pointer-events:auto}
body[data-state="expanded"] .topbar{pointer-events:none;opacity:.4}
body[data-state="expanded"] nav{pointer-events:none}
.no-script{position:absolute;inset:auto 20px 20px;text-align:center}
body[data-phase="loading"] .file-slot,body[data-phase="intro"] .file-slot{pointer-events:none}
body[data-phase="loading"] .file-card,body[data-phase="intro"] .file-card{pointer-events:none;transition:none}
@media(max-width:650px){
 .topbar{inset:18px 18px auto;align-items:center;gap:20px}
 .home-button{width:26px;height:30px;flex-shrink:0}
 nav{gap:clamp(12px,3vw,22px);flex-wrap:wrap;justify-content:flex-end;max-width:310px}
 nav button{font-size:15px;letter-spacing:.02em;padding:2px 0}
 .scene-space{top:51%}
}
@media(prefers-reduced-motion:reduce){.file-card,.detail-shade,.file-controls{transition-duration:.01ms!important;transition-delay:0s!important}}
.file-slot[hidden]{display:none}
.file-slot[data-group="works"] .file-card{color:#f8f7f3}
.file-slot[data-group="works"] img{object-fit:contain;transform:none}
.file-slot[data-group="works"] .file-number{top:7%}
.file-slot[data-group="works"] [data-category="photography"] img{object-fit:cover;object-position:50% 50%}
.file-english{position:absolute;left:8.7%;bottom:17%;font:700 24px Arial,sans-serif;letter-spacing:.025em;pointer-events:none}
body[data-file-group="works"] .corner-return{display:flex}
body[data-group-transition="true"] .file-card{pointer-events:none;transition:none}
body[data-group-transition="true"] .file-controls{visibility:hidden;opacity:0}