:root{
  --bg:#0a0a0b;
  --bg-soft:#101012;
  --ink:#efeae2;
  --muted:#8b857c;
  --line:rgba(239,234,226,.10);
  --gold:#c8a97e;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(200,169,126,.28)}

/* film grain */
.grain{
  position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>");
  mix-blend-mode:overlay;
}

/* top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background:rgba(10,10,11,.72);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);padding-top:16px;padding-bottom:16px;
}
.brand{display:flex;align-items:baseline;gap:14px}
.mark{
  font-family:"Songti SC","Noto Serif CJK SC",Georgia,serif;
  font-size:19px;letter-spacing:.34em;
}
.sub{font-size:10px;letter-spacing:.42em;color:var(--muted)}
.meta{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;color:var(--muted)}
.meta .count{color:var(--gold)}
.dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6}

/* hero */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 24px 80px;position:relative;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 38%,rgba(200,169,126,.10),transparent 62%);
}
.title{
  margin:0;font-weight:400;
  font-family:"Songti SC","Noto Serif CJK SC",Georgia,serif;
  font-size:clamp(76px,16vw,190px);line-height:.95;letter-spacing:.08em;
  animation:rise 1.4s var(--ease) both;
}
.lede{
  margin:34px 0 0;color:var(--muted);font-size:clamp(13px,1.4vw,15px);
  line-height:2.1;letter-spacing:.08em;animation:rise 1.4s .18s var(--ease) both;
}
.rule{width:1px;height:64px;background:linear-gradient(var(--gold),transparent);margin:38px 0;animation:fade 1.6s .4s both}
.hint{font-size:10px;letter-spacing:.4em;color:rgba(139,133,124,.75);animation:fade 1.6s .7s both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* 系列标签 */
.tabs{
  display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,44px);
  padding:0 24px clamp(34px,5vw,58px);flex-wrap:wrap;
}
.tab{
  background:none;border:0;padding:6px 0;cursor:pointer;
  font:inherit;font-size:10px;letter-spacing:.3em;color:var(--muted);
  position:relative;transition:color .35s var(--ease);
}
.tab:hover{color:rgba(239,234,226,.8)}
.tab.on{color:var(--ink)}
.tab.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.tab .n{
  margin-left:9px;font-size:9px;letter-spacing:.1em;color:var(--muted);opacity:.65;
}

/* gallery */
.gallery{
  columns:3;column-gap:clamp(12px,1.6vw,22px);
  padding:0 clamp(16px,4vw,56px) 40px;
}
@media(max-width:1100px){.gallery{columns:2}}
@media(max-width:640px){.gallery{columns:1}}

.item{
  break-inside:avoid;margin:0 0 clamp(12px,1.6vw,22px);
  position:relative;overflow:hidden;background:var(--bg-soft);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.item.in{opacity:1;transform:none}
.item img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:#151517;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
  filter:saturate(.96) contrast(1.01);
}
.item:hover img{transform:scale(1.035);filter:saturate(1.04) contrast(1.03)}
.veil{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:16px 18px;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(to top,rgba(8,8,9,.78),rgba(8,8,9,.06) 46%,transparent);
}
.item:hover .veil{opacity:1}
.no{font-family:"Songti SC",Georgia,serif;font-size:13px;letter-spacing:.2em;color:var(--gold)}
.view{font-size:9px;letter-spacing:.36em;color:rgba(239,234,226,.72)}

.sentinel{height:1px}

/* footer */
.foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:56px clamp(16px,4vw,56px) 64px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.3em;color:rgba(139,133,124,.8);
}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,7,.94);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  opacity:0;pointer-events:none;transition:opacity .42s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:94vw}
.lb-stage img{
  max-width:min(94vw,1600px);max-height:78svh;object-fit:contain;
  box-shadow:0 40px 120px rgba(0,0,0,.65);
  transform:scale(.985);transition:transform .5s var(--ease)
}
.lightbox.open .lb-stage img{transform:none}
.lb-cap{display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:.28em;color:var(--muted)}
.lb-no{color:var(--gold);font-family:"Songti SC",Georgia,serif;font-size:13px}
.lb-dl{
  color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(239,234,226,.3);
  padding-bottom:3px;transition:border-color .3s,color .3s
}
.lb-dl:hover{color:var(--gold);border-color:var(--gold)}
.lb-close{
  position:absolute;top:22px;right:26px;background:none;border:0;color:rgba(239,234,226,.7);
  font-size:30px;line-height:1;cursor:pointer;padding:8px;transition:color .3s,transform .3s
}
.lb-close:hover{color:var(--ink);transform:rotate(90deg)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;color:rgba(239,234,226,.55);font-size:46px;line-height:1;
  cursor:pointer;padding:18px 22px;transition:color .3s
}
.lb-nav:hover{color:var(--ink)}
.lb-nav.prev{left:8px}
.lb-nav.next{right:8px}
@media(max-width:640px){.lb-nav{font-size:34px;padding:10px 8px}}

/* 缩略图还没生成时的占位 */
.item img[style*="hidden"]{visibility:hidden}
.item{background-image:linear-gradient(135deg,#141416,#1b1b1e)}