* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: dark; --bg:#404040; --page:#3f3f3f; --panel:#363636; --panel-soft:#4a4a4a; --line:#666; --line-soft:#555; --text:#f4f4f4; --muted:#d0d0d0; --accent:#e0c27b; --accent-2:#9fd0dd; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; } button,a { -webkit-tap-highlight-color:transparent; }
.topbar { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:0 clamp(18px,4vw,56px); background:rgba(50,50,50,.82); border-bottom:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:baseline; gap:12px; min-width:0; }
.brand-cn { font-family:LiSu,"隶书","STLiti","Microsoft YaHei",serif; font-size:26px; font-weight:400; white-space:nowrap; }
.brand-en { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:14px; }
.nav a:hover,.nav-button:hover { color:var(--text); }
.nav-button { border:0; padding:0; color:var(--muted); background:transparent; cursor:pointer; font:inherit; }
.hero { --hero-bg:none; position:relative; height:clamp(560px,36vw,860px); display:grid; align-items:end; overflow:hidden; border-bottom:1px solid var(--line-soft); background:#404040; }
.hero::before { content:""; position:absolute; inset:-24px; background-image:var(--hero-bg); background-size:cover; background-position:center; filter:blur(18px) saturate(.85); opacity:.46; transform:scale(1.04); }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; opacity:0; transform:scale(.995); transition:opacity 360ms ease, transform 700ms ease; }
.hero-image.is-loaded { opacity:.98; transform:scale(1); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(35,35,35,.70),rgba(64,64,64,.08) 50%,rgba(35,35,35,.56)),linear-gradient(0deg,rgba(64,64,64,.80),rgba(64,64,64,0) 44%); }
.hero-copy { position:relative; z-index:2; width:min(760px,calc(100% - 36px)); margin:0 clamp(18px,6vw,76px) clamp(64px,9vh,104px); }
.kicker,.eyebrow { margin:0 0 10px; color:var(--accent); font-size:13px; text-transform:uppercase; }
h1 { margin:0; font-family:LiSu,"隶书","STLiti","Microsoft YaHei",serif; font-weight:400; font-size:clamp(48px,9vw,118px); line-height:1; letter-spacing:0; }
.hero-title { margin:18px 0 0; color:#f0f0f0; font-size:clamp(18px,2.2vw,28px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { min-height:42px; padding:9px 16px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:rgba(62,62,62,.88); cursor:pointer; font:inherit; }
.button.primary { background:var(--text); color:#333; border-color:var(--text); } .button.compact { min-height:36px; padding:6px 12px; }
.hero-count { position:absolute; right:clamp(18px,4vw,56px); bottom:28px; z-index:2; color:var(--muted); font-size:13px; }
.works-section,.about-section,.contact-section { padding:clamp(36px,6vw,72px) clamp(18px,4vw,56px); background:var(--page); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
h2 { margin:0; font-size:clamp(26px,4vw,48px); line-height:1.12; }
.gallery-meta { min-height:24px; color:var(--muted); font-size:13px; margin-bottom:12px; }
.empty-state { grid-column:1/-1; min-height:140px; display:grid; place-items:center; padding:28px; border:1px dashed #727272; border-radius:4px; color:var(--muted); background:rgba(255,255,255,.035); text-align:center; }
.series-group-title { grid-column:1/-1; margin:34px 0 10px; color:var(--text); font-size:clamp(26px,4vw,48px); line-height:1.12; font-weight:700; letter-spacing:0; }
.series-group-meta { grid-column:1/-1; margin:-4px 0 12px; color:var(--muted); font-size:13px; }
.series-group-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-bottom:18px; }
.folder-grid,.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.folder-card,.photo-card { display:grid; grid-template-rows:auto 1fr; min-width:0; overflow:hidden; border:1px solid #6a6a6a; border-radius:4px; background:var(--panel-soft); color:var(--text); cursor:pointer; padding:0; text-align:left; }
.folder-card:hover,.photo-card:hover { border-color:var(--accent); }
.card-label { min-height:34px; padding:7px 9px; color:#f7f7f7; background:rgba(40,40,40,.9); font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-image { position:relative; aspect-ratio:4/3; background:#4a4a4a; overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 260ms ease, opacity 260ms ease; }
.folder-card:hover img,.photo-card:hover img { transform:scale(1.035); opacity:.92; }
.card-caption { position:absolute; left:8px; right:48px; bottom:8px; min-height:24px; display:flex; align-items:center; padding:2px 8px; color:#fff; background:rgba(25,25,25,.62); border:1px solid rgba(255,255,255,.22); border-radius:3px; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-count { position:absolute; right:8px; bottom:7px; min-width:26px; padding:2px 7px; border-radius:999px; color:#333; background:var(--accent); font-size:12px; text-align:center; }
.about-section { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:#454545; } .text-block { max-width:920px; } .text-block p:last-child { color:var(--muted); font-size:17px; }
.contact-line { display:flex; flex-wrap:wrap; gap:16px; align-items:center; color:var(--muted); } .contact-line span:first-child { color:var(--accent-2); text-transform:uppercase; font-size:13px; }
.viewer[hidden] { display:none; } .viewer { position:fixed; inset:0; z-index:50; display:grid; grid-template-columns:74px minmax(0,1fr) 74px; align-items:center; background:rgba(48,48,48,.97); }
.viewer-frame { margin:0; min-width:0; text-align:center; } .viewer-frame img { max-width:100%; max-height:calc(100vh - 106px); border:1px solid #8a8a8a; background:#4a4a4a; }
.viewer-frame figcaption { display:flex; justify-content:center; gap:14px; min-height:34px; padding-top:10px; color:var(--muted); font-size:14px; }
.viewer-close,.viewer-nav { border:1px solid var(--line); background:rgba(58,58,58,.88); color:var(--text); cursor:pointer; } .viewer-close { position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:6px; font-size:30px; line-height:1; } .viewer-nav { width:48px; height:74px; margin:auto; border-radius:6px; font-size:42px; line-height:1; }
body.private-mode { --accent:#9fd0dd; }
@media (max-width:760px) { .topbar{min-height:58px}.brand{display:grid;gap:0}.brand-cn{font-size:22px}.brand-en{font-size:11px}.nav{gap:12px;font-size:13px}.hero{height:clamp(420px,68vw,640px)}.folder-grid,.photo-grid,.series-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.viewer{grid-template-columns:1fr;padding:64px 12px 22px}.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%)}.viewer-prev{left:10px}.viewer-next{right:10px}.viewer-frame img{max-height:calc(100vh - 150px)} }