:root { --ink:#171717; --muted:#777; --line:#e2e2e2; --paper:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Serif TC","Songti TC","PMingLiU",serif; }
button,a { color:inherit; font:inherit; }
button { cursor:pointer; }
header { height:78px; margin:0 3vw; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.brand { text-decoration:none; font:12px Arial,sans-serif; letter-spacing:.18em; line-height:1; }
.brand span { display:block; margin-top:6px; color:var(--muted); font-size:9px; letter-spacing:.25em; }
header p { margin:0; color:var(--muted); font:9px Arial,sans-serif; letter-spacing:.18em; }
main { padding:0 3vw; }
.intro { min-height:150px; padding:32px 1vw 24px; display:flex; align-items:end; justify-content:space-between; }
.intro small { color:var(--muted); font:9px Arial,sans-serif; letter-spacing:.2em; }
.intro h1 { margin:8px 0 0; font-size:clamp(28px,3vw,46px); font-weight:400; letter-spacing:.14em; }
.intro>p { margin:0; color:var(--muted); font-size:12px; line-height:1.9; letter-spacing:.08em; }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:42px 20px; padding:10px 0 72px; }
.card { min-width:0; padding:0; border:0; background:none; text-align:left; }
.image-wrap { display:flex; align-items:center; justify-content:center; height:26vw; min-height:260px; max-height:440px; padding:8px; background:#f7f7f7; overflow:hidden; transition:.25s ease; }
.image-wrap img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(0,0,0,.12)); transition:.3s ease; }
.card:hover .image-wrap { background:#f1f1f1; transform:translateY(-3px); }
.card:hover img { transform:scale(1.012); }
.card-meta { display:grid; grid-template-columns:38px 1fr; margin-top:13px; }
.card-meta>b { color:#444; font:10px Arial,sans-serif; }
.card-meta>span { font-size:13px; letter-spacing:.09em; }
.card-meta small { display:block; margin-top:5px; color:#999; font:8px Arial,sans-serif; letter-spacing:.15em; }
footer { height:72px; margin:0 3vw; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:9px Arial,sans-serif; letter-spacing:.18em; }
footer p { font-family:inherit; font-size:12px; }
.lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:34px 78px 52px; background:rgba(8,8,8,.91); backdrop-filter:blur(4px); animation:fade-in .2s ease-out; }
.lightbox[hidden] { display:none; }
.lightbox img { width:100%; height:calc(100vh - 86px); object-fit:contain; filter:drop-shadow(0 20px 50px rgba(0,0,0,.55)); animation:image-in .28s ease-out; }
.lightbox-close { position:absolute; top:16px; right:22px; z-index:2; border:0; background:none; color:#fff; font:32px Arial,sans-serif; opacity:.85; }
.lightbox-arrow { position:absolute; top:50%; z-index:2; transform:translateY(-50%); padding:20px 14px; border:0; background:rgba(255,255,255,.08); color:#fff; font:28px Arial,sans-serif; }
.lightbox-arrow.left { left:8px; }.lightbox-arrow.right { right:8px; }
.lightbox p { position:absolute; bottom:17px; margin:0; color:#ddd; font-size:12px; letter-spacing:.12em; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes image-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@media(max-width:900px) { .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 12px; } .image-wrap { height:55vw; min-height:220px; } }
@media(max-width:560px) { header,main,footer { margin-left:16px; margin-right:16px; } main { padding:0; } .intro { min-height:125px; padding:24px 2px 18px; } .intro>p,footer p { display:none; } .gallery { gap:28px 8px; } .image-wrap { height:60vw; min-height:190px; padding:4px; } .card-meta { grid-template-columns:28px 1fr; } .lightbox { padding:46px 42px; } .lightbox img { height:calc(100vh - 92px); } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }