/* 作品頁共用樣式（works.html 與單一作品頁 /works/<id>/） */
:root{--cream:#FBF4E8;--ink:#2B1F18;--tan:#F27A2E;--bg:#A9BE93;--line:rgba(43,31,24,.3)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:"Bricolage Grotesque","Noto Sans TC","PingFang TC",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}
body.lock{overflow:hidden}
.mono{font-size:12px;letter-spacing:.08em;font-weight:500}
a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.45;z-index:50;mix-blend-mode:multiply}
#fc{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
main{position:relative;z-index:1;padding:0 3.2vw 14vh}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes rise{from{opacity:0;transform:translateY(46px)}}
.top{padding-top:17vh;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4vw;margin-bottom:6vh}
h1{font-weight:500;font-size:clamp(64px,13vw,260px);letter-spacing:-.06em;line-height:.85}
h1 sup{font-size:.22em;letter-spacing:0;vertical-align:top;margin-left:.3em;font-weight:500;position:relative;top:.5em}
.top p{max-width:20em;line-height:1.8;font-size:clamp(14px,1.1vw,18px)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:5vh}
.filters button{font:inherit;color:inherit;background:none;border:1px solid var(--line);padding:.55em 1.1em;cursor:pointer;transition:.25s}
.filters button:hover{border-color:currentColor}.filters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.list{column-count:3;column-gap:2.4vw}
.item{display:block;break-inside:avoid;margin-bottom:6vh;cursor:pointer}.item.hide{display:none}
.fr{position:relative;overflow:hidden;background:var(--c);color:var(--f);box-shadow:inset 0 0 0 1.5px rgba(43,31,24,.18);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.item:hover .fr{transform:scale(1.02)}
.item:nth-child(1) .fr{aspect-ratio:16/9}.item:nth-child(2) .fr{aspect-ratio:9/14}.item:nth-child(3) .fr{aspect-ratio:1/1}
.item:nth-child(4) .fr{aspect-ratio:4/5}.item:nth-child(5) .fr{aspect-ratio:16/9}.item:nth-child(6) .fr{aspect-ratio:3/4}
.fr .no{position:absolute;left:.5em;bottom:.12em;font-weight:500;letter-spacing:-.06em;line-height:1;font-size:clamp(56px,9vw,150px);font-style:normal}
.fr .cap{position:absolute;right:14px;top:14px;font-size:11px;letter-spacing:.12em;font-weight:500;font-style:normal;opacity:.7}
.meta{display:flex;justify-content:space-between;gap:1em;margin-top:14px;align-items:baseline}
.meta b{font-weight:600;font-size:clamp(15px,1.3vw,22px);letter-spacing:-.02em}.meta span{opacity:.7}
.foot{margin-top:8vh;display:flex;justify-content:space-between;align-items:end;gap:4vw}
.foot .big{font-weight:500;font-size:clamp(34px,5.6vw,104px);letter-spacing:-.045em;line-height:1}.foot .big u{text-decoration:none;color:var(--tan)}
.foot a{border-bottom:1.5px solid currentColor;padding-bottom:3px}

/* 單一作品：從被點的格子展開成整頁 */
#dt{position:fixed;inset:0;z-index:40;visibility:hidden;background:var(--c,#F27A2E);color:var(--f,#2B1F18);overflow-y:auto;transition:clip-path .75s cubic-bezier(.7,0,.2,1),background .5s,color .5s}
#dt.open{visibility:visible}
#dt .in{min-height:100%;padding:16vh 3.2vw 10vh;display:grid;grid-template-columns:1.5fr 1fr;gap:4vw;align-content:start;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
#dt.show .in{opacity:1;transform:none;transition-delay:.35s}
#dt .x{position:fixed;right:3.2vw;top:calc(3.2vh + 56px);z-index:2;font:inherit;color:inherit;background:none;border:1px solid currentColor;padding:.55em 1.1em;cursor:pointer}
#dt .x:hover{background:var(--f);color:var(--c)}
#dt .media{aspect-ratio:16/9;border:1.5px dashed currentColor;display:grid;place-items:center;position:relative;opacity:.9}
#dt .media::before{content:"+";position:absolute;font-size:36px;font-weight:300;opacity:.6;transform:translateY(-1.3em)}
#dt .media span{letter-spacing:.14em;font-weight:500;font-size:13px;opacity:.7;transform:translateY(.8em)}
#dt .info .no{display:block;font-size:clamp(70px,12vw,200px);font-weight:500;letter-spacing:-.07em;line-height:.8;margin-bottom:.15em}
#dt h1,#dt h2{font-weight:500;font-size:clamp(34px,4.6vw,84px);letter-spacing:-.05em;line-height:1}
#dt .tags{margin:18px 0 26px;display:flex;gap:10px;opacity:.75}
#dt .desc{line-height:1.9;font-size:clamp(14px,1.15vw,19px);max-width:30em}
#dt .pn{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:8vh;border-top:1px solid currentColor;padding-top:2.4vh}
#dt .pn a,#dt .pn button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:.4em 0}
#dt .pn a:hover,#dt .pn button:hover{text-decoration:underline}
@media(max-width:800px){.top{grid-template-columns:1fr}.list{column-count:2}#dt .in{grid-template-columns:1fr}}

/* 單一作品頁（/works/<id>/）：展開後的樣子直接當整頁 */
.work,.work body{background:var(--c)}
#dt.page{position:relative;inset:auto;min-height:100vh;clip-path:none;overflow:visible}
#dt.page .x{text-decoration:none}