*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:#0c0d0f;color:#d8d6d0;font-family:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.8}
a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;padding:18px 5vw;background:linear-gradient(#0c0d0fcc,transparent);letter-spacing:.2em;backdrop-filter:blur(4px)}
.nav nav a{margin-left:24px;font-size:.9rem;opacity:.7}.nav a:hover{opacity:1}
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 6vw;background:radial-gradient(ellipse at 50% 120%,#2b3a45 0,#0c0d0f 65%)}
.hero h1{font-weight:300;font-size:clamp(2.8rem,9vw,6rem);letter-spacing:.35em;padding-left:.35em}
.hero p{margin:14px 0 34px;opacity:.6;letter-spacing:.12em}
.btn{display:inline-block;border:1px solid #ffffff55;padding:8px 28px;letter-spacing:.3em;transition:.3s}.btn:hover{background:#fff;color:#000}
.gallery{columns:3 320px;column-gap:14px;padding:8vh 4vw}
.gallery figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;cursor:zoom-in;position:relative;background:#16181b}
.gallery img{width:100%;display:block;opacity:0;transition:opacity .8s,transform .6s}
.gallery img.ok{opacity:1}.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:.85rem;letter-spacing:.1em;background:linear-gradient(transparent,#000a);opacity:0;transition:.3s}
.gallery figure:hover figcaption{opacity:1}
.about{max-width:640px;margin:0 auto;padding:10vh 6vw;text-align:center}
.about h2{font-weight:300;letter-spacing:.4em;margin-bottom:20px}.about p{opacity:.7}
footer{text-align:center;padding:30px;font-size:.8rem;opacity:.4}
.lb{position:fixed;inset:0;z-index:10;background:#000e;display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb figure{max-width:90vw;max-height:90vh;text-align:center}
.lb img{max-width:90vw;max-height:82vh;object-fit:contain}
.lb figcaption{margin-top:10px;opacity:.7;letter-spacing:.1em}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:3rem;cursor:pointer;opacity:.6;padding:10px 20px}.lb button:hover{opacity:1}
.x{top:6px;right:10px}.p{left:4px}.n{right:4px}
@media(max-width:600px){.gallery{columns:2 140px;column-gap:8px;padding:6vh 3vw}.gallery figure{margin-bottom:8px}.lb .p,.lb .n{font-size:2rem;padding:10px}}