:root{color-scheme:dark;--bg:#060708;--paper:#0c0e10;--ivory:#eadac2;--muted:#8c8d8e;--red:#c9342f;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#eee;font-family:"Helvetica Neue","Hiragino Sans GB","PingFang SC",sans-serif}button,a{color:inherit}a{text-decoration:none}
header{height:104px;padding:0 clamp(24px,5vw,82px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:rgba(6,7,8,.92);backdrop-filter:blur(16px)}
.brand strong{display:block;color:var(--ivory);font:400 21px/1.2 "Songti SC","Yu Mincho",serif;letter-spacing:.25em}.brand small{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:8px;letter-spacing:.45em;color:#aaa}.brand i{width:6px;height:6px;border-radius:50%;background:var(--red)}.meta{text-align:right}.meta span{display:block;font:400 14px/1.4 "Songti SC",serif;letter-spacing:.18em}.meta small{font-size:8px;letter-spacing:.25em;color:#888}
.gallery-nav{display:flex;align-items:flex-start;gap:28px}.gallery-links{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:20px;white-space:nowrap}.home-link,.back-link{font:400 10px "Songti SC",serif;letter-spacing:.12em;color:#c1bdb6;transition:color .2s}.home-link:hover,.back-link:hover{color:#fff}
main{max-width:1680px;margin:auto;padding:0 clamp(22px,4vw,64px) 100px}.intro{min-height:390px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line)}.intro>p{font-size:9px;letter-spacing:.35em;color:var(--red)}.intro h1{margin:18px 0 22px;color:var(--ivory);font:400 clamp(56px,8vw,116px)/1 "Songti SC","Yu Mincho",serif;letter-spacing:.12em}.intro div span{display:block;font:400 16px/1.8 "Songti SC",serif;letter-spacing:.12em;color:#bbb}.intro div small{font-size:8px;letter-spacing:.28em;color:#777}
.filters{display:flex;gap:34px;padding:19px 0;border-bottom:1px solid var(--line);position:sticky;top:104px;z-index:9;background:rgba(6,7,8,.94)}.filters a{color:rgba(241,238,232,.6);font:400 9px Arial,sans-serif;letter-spacing:.2em}.filters b{margin-left:5px;color:#aaa;font:400 8px Arial,sans-serif;letter-spacing:0}.filters a:hover{color:var(--ivory)}
.gallery-section{padding-top:42px;scroll-margin-top:150px}.gallery{display:grid;gap:clamp(10px,1.25vw,20px);align-items:start}.gallery.landscape{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery.portrait{grid-template-columns:repeat(5,minmax(0,1fr))}.gallery.panorama{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo{display:block;width:100%;border:0;padding:0;background:none;text-align:left;cursor:zoom-in;overflow:hidden}.photo img{display:block;width:100%;height:auto;background:#111;transition:opacity .25s,transform .45s}.photo span{display:block;padding:9px 0 2px;color:#666;font-size:8px;letter-spacing:.2em}.photo:hover img{transform:scale(1.012);opacity:.88}.photo:hover span{color:#bbb}
footer{max-width:1680px;margin:auto;padding:30px clamp(22px,4vw,64px) 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#666;font-size:8px;letter-spacing:.25em}
dialog{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.97);color:#fff;overflow:hidden}dialog::backdrop{background:#000}.close{position:absolute;right:24px;top:18px;z-index:3;width:45px;height:45px;border:0;background:none;color:#aaa;font:200 34px sans-serif;cursor:pointer}.arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:58px;height:58px;border:1px solid #333;border-radius:50%;background:rgba(0,0,0,.35);font-size:20px;cursor:pointer}.arrow:hover,.close:hover{color:#fff;border-color:#777}.prev{left:24px}.next{right:24px}dialog figure{width:100%;height:100%;margin:0;padding:58px 90px 44px;display:flex;flex-direction:column;align-items:center;justify-content:center}dialog figure img{display:block;max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;object-fit:contain}dialog figcaption{height:28px;padding-top:10px;color:#888;font-size:9px;letter-spacing:.24em}
@media(max-width:900px){header{height:82px}.filters{top:82px}.gallery.landscape{grid-template-columns:repeat(2,1fr)}.gallery.portrait{grid-template-columns:repeat(3,1fr)}.gallery.panorama{grid-template-columns:1fr}.intro{min-height:300px}.arrow{width:42px;height:42px}.prev{left:10px}.next{right:10px}dialog figure{padding:54px 48px 35px}}
@media(max-width:560px){.meta small{display:none}.brand strong{font-size:17px}.gallery-nav{gap:12px}.gallery-links{gap:10px}.home-link,.back-link{font-size:8px}.filters{gap:20px;overflow:auto}.gallery.portrait{grid-template-columns:repeat(2,1fr)}.gallery{gap:10px}.gallery-section{padding-top:36px}.intro h1{font-size:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo img{transition:none}}

/* More exhibition-like breathing room between works. */
.gallery{column-gap:clamp(18px,2vw,32px);row-gap:clamp(24px,2.6vw,42px)}
@media(max-width:560px){.gallery{column-gap:14px;row-gap:24px}}

/* Final spacious gallery rhythm: twice the previous spacing. */
.gallery{column-gap:clamp(36px,4vw,64px);row-gap:clamp(48px,5.2vw,84px)}
@media(max-width:560px){.gallery{column-gap:28px;row-gap:48px}}

/* Warm light-gray exhibition wall; the full-screen viewer remains black. */
body.light-theme{background:#e8e5df;color:#242424}
body.light-theme header{background:rgba(232,229,223,.94);border-color:rgba(25,25,25,.16)}
body.light-theme .brand strong,body.light-theme .intro h1,body.light-theme .section-title h2{color:#29251f}
body.light-theme .brand small,body.light-theme .meta small,body.light-theme .intro div small,body.light-theme .section-title p,body.light-theme .photo span,body.light-theme footer{color:#76736e}
body.light-theme .meta span,body.light-theme .intro div span{color:#45413b}
body.light-theme .intro,body.light-theme .filters,body.light-theme footer{border-color:rgba(25,25,25,.16)}
body.light-theme .filters{background:rgba(232,229,223,.96)}
body.light-theme .filters b{color:#827f79}
body.light-theme .filters a:hover,body.light-theme .photo:hover span{color:#111}
body.light-theme .photo img{background:#d5d2cc}

/* Balanced warm mid-gray: softer than black, calmer than paper white. */
body.light-theme{background:#504f4c;color:#f1eee8}
body.light-theme header{background:rgba(80,79,76,.95);border-color:rgba(255,255,255,.2)}
body.light-theme .brand strong,body.light-theme .intro h1,body.light-theme .section-title h2{color:#f0dfc6}
body.light-theme .brand small,body.light-theme .meta small,body.light-theme .intro div small,body.light-theme .section-title p,body.light-theme .photo span,body.light-theme footer{color:#c1bdb6}
body.light-theme .meta span,body.light-theme .intro div span{color:#f0ede7}
body.light-theme .intro,body.light-theme .filters,body.light-theme footer{border-color:rgba(255,255,255,.2)}
body.light-theme .filters{background:rgba(80,79,76,.97)}
body.light-theme .filters b{color:#c5c0b8}
body.light-theme .filters a:hover,body.light-theme .photo:hover span{color:#fff}
body.light-theme .photo img{background:#444340}

/* Uniform museum-style thumbnail frames: preserve every original composition. */
.gallery.landscape .photo{aspect-ratio:3/2}
.gallery.portrait .photo{aspect-ratio:2/3}
.gallery.panorama .photo{aspect-ratio:3/1}
.photo{display:flex;align-items:center;justify-content:center;background:#504f4c}
body.light-theme .photo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;background:transparent;box-sizing:border-box;border:1px solid #77746f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.72),0 2px 5px rgba(0,0,0,.24)}
.photo span{display:none}

/* Keep the equal gallery slots, but fit the frame to the photograph itself. */
.photo{border:0}
dialog figure img{cursor:zoom-out}

/* Large photograph: Leica-inspired restraint—one warm-gray hairline and quiet depth. */
dialog figure img{box-sizing:border-box;padding:0;border:1px solid rgba(174,169,160,.72);background:transparent;box-shadow:0 9px 26px rgba(0,0,0,.48)}