.work-detail{position:fixed;inset:0;z-index:85;background:var(--orange);color:var(--ink);overflow:visible;isolation:isolate}
.work-detail::before{content:'';position:absolute;top:0;left:calc(-1 * var(--window-bleed,0px));right:calc(-1 * var(--window-bleed,0px));bottom:calc(-1 * var(--window-bleed,0px));background:var(--orange);z-index:-1;pointer-events:none}
.work-detail[hidden]{display:none}
.work-content{position:absolute;inset:0;clip-path:inset(0)}
body[data-work-detail] .work-detail .topbar{opacity:1;pointer-events:none;color:var(--ink)}
.work-detail .topbar nav,.work-detail .home-button{pointer-events:auto}
.work-gallery{--work-size:min(18.3vw,30svh);position:absolute;left:0;right:0;top:max(88px,10.6svh);height:var(--work-size);z-index:2;touch-action:pan-y;cursor:grab}
.work-gallery:active{cursor:grabbing}
.work-track{display:flex;align-items:flex-start;width:max-content;gap:clamp(10px,.9vw,24px);height:100%;will-change:transform}
.work-tile{position:relative;flex:0 0 auto;width:var(--work-size);height:var(--work-size);border:0;padding:0;background:#a39f96;transition:width .38s cubic-bezier(.22,.75,.18,1),height .38s cubic-bezier(.22,.75,.18,1);color:#514e49;cursor:pointer}
.work-tile:nth-child(3n){background:#78766f;color:#dedbd4}
.work-tile:nth-child(3n + 2){background:#c5c0b7}
.work-tile span{position:absolute;left:12px;bottom:10px;font:12px Arial,sans-serif;letter-spacing:.08em}
.work-tile:focus-visible{width:calc(var(--work-size)*2);height:calc(var(--work-size)*2);z-index:5}
@media(hover:hover){.work-tile:hover{width:calc(var(--work-size)*2);height:calc(var(--work-size)*2);z-index:5}}
.work-type{position:absolute;top:calc(max(88px,10.6svh) + min(18.3vw,30svh) + 1vw);left:3%;width:94%;height:auto;overflow:visible;pointer-events:none}
/* Only native Asset outlines: no stroke, synthetic weight or axis distortion. */
.work-type text{fill:currentColor;font-family:'Asset',serif;font-weight:400;font-style:normal;font-synthesis:none;font-size:100px;letter-spacing:-.015em;word-spacing:0}
.work-detail .corner-identity{color:var(--ink)}
.work-detail .corner-return{display:flex}
@font-face{font-family:ArchiveWorkNav;src:url('assets/navigation-work-switch.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap}
.work-switch{position:absolute;bottom:70px;left:auto;right:3.35%;z-index:6;min-height:36px;padding:2px 0 8px;border:0;background:transparent;color:var(--ink);font-family:ArchiveWorkNav,ArchiveNav,"Noto Serif TC","SimSun",serif;font-size:clamp(16px,1.3vw,26px);font-weight:900;letter-spacing:.09em;-webkit-text-stroke:.45px currentColor;white-space:nowrap;cursor:pointer;transition:color 150ms linear}
.work-switch[data-destination="photography"]{left:1.7%;right:auto}
@media(max-width:650px){.work-switch{right:18px;font-size:15px;letter-spacing:.02em}.work-switch[data-destination="photography"]{left:18px}}
@media(max-width:480px){.work-switch[data-destination="photography"]{bottom:110px}}
.work-switch:hover{color:#fff}
.work-switch:focus-visible{outline:1px dotted currentColor;outline-offset:5px}
body[data-work-detail] main{pointer-events:none}
@media(max-width:650px){.work-gallery{--work-size:42vw;top:90px}.work-type{top:calc(90px + 42vw + 14px)}}
@media(prefers-reduced-motion:reduce){.work-tile{transition:none}}