/* ========== 全景东至 · 结构样式（主题无关） ========== */
:root{
  --serif:'Noto Serif SC','Songti SC','STSong',serif;
  --sans:-apple-system,'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--text);color:var(--bg)}

.wrap{max-width:1440px;margin:0 auto;padding:0 4vw}
.label-en{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--text-50);font-weight:400}
.serif{font-family:var(--serif)}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.solid{border-bottom-color:var(--line)}
.nav-inner{max-width:1440px;margin:0 auto;padding:0 4vw;height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:14px}
.brand .cn{font-family:var(--serif);font-size:20px;letter-spacing:.35em;font-weight:600}
.brand .en{font-size:10px;letter-spacing:.3em;color:var(--text-50);text-transform:uppercase}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{font-size:13px;letter-spacing:.15em;color:var(--text-70);padding:6px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nav-links a:hover,.nav-links a.on{color:var(--text);border-bottom-color:var(--text)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg::after{content:'';position:absolute;inset:0}
.hero-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:11vh}
.hero-kicker{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.hero-kicker .dash{width:56px;height:1px;background:var(--line-strong)}
.hero h1{font-family:var(--serif);font-size:clamp(52px,9vw,128px);font-weight:600;letter-spacing:.12em;line-height:1.15}
.hero-sub{margin-top:26px;max-width:520px;color:var(--text-70);font-size:15px;letter-spacing:.06em}
.hero-cta{margin-top:44px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.btn-line{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line-strong);padding:15px 34px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:background .4s,color .4s}
.btn-line:hover{background:var(--text);color:var(--bg)}
.btn-text{font-size:12px;letter-spacing:.3em;color:var(--text-70);border-bottom:1px solid var(--line-strong);padding-bottom:6px;transition:color .3s}
.btn-text:hover{color:var(--text)}
.hero-scroll{position:absolute;right:4vw;bottom:11vh;z-index:2;writing-mode:vertical-rl;font-size:10px;letter-spacing:.4em;color:var(--text-50);display:flex;align-items:center;gap:16px}
.hero-scroll::after{content:'';width:1px;height:64px;background:var(--line-strong);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 数据条 ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:56px 4vw;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .num{font-family:var(--serif);font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:.02em}
.stat .num sup{font-size:.45em;color:var(--text-50);margin-left:4px}
.stat .cap{margin-top:10px;font-size:12px;letter-spacing:.25em;color:var(--text-50)}

/* ---------- 章节头 ---------- */
.sec{padding:120px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:30px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:.15em;margin-top:18px}
.sec-more{font-size:12px;letter-spacing:.3em;color:var(--text-70);border-bottom:1px solid var(--line-strong);padding-bottom:6px;white-space:nowrap}
.sec-more:hover{color:var(--text)}

/* ---------- 作品网格 ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.feat-grid.pad{gap:24px;padding:0 4vw;max-width:1440px;margin:0 auto}
.work{position:relative;overflow:hidden;background:var(--bg-soft);cursor:pointer;display:block}
.work .ph{transition:opacity .5s}
.work::after{content:'';position:absolute;inset:0;transition:opacity .5s}
.work .meta{position:absolute;left:28px;right:28px;bottom:24px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;transition:opacity .45s,transform .45s}
.work .t{font-family:var(--serif);font-size:22px;letter-spacing:.12em;font-weight:600}
.work .s{font-size:11px;letter-spacing:.25em;margin-top:6px;text-transform:uppercase}
.work .idx{font-size:11px;letter-spacing:.2em}
.w-a{grid-column:span 7;aspect-ratio:16/10}
.w-b{grid-column:span 5;aspect-ratio:16/13.2}
.w-c{grid-column:span 5;aspect-ratio:16/13.2}
.w-d{grid-column:span 7;aspect-ratio:16/10}

/* ---------- 视频卡片 ---------- */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:0 4vw;max-width:1440px;margin:0 auto}
.vcard{display:block}
.vcard .screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.vcard .screen img{transition:opacity .5s}
.vcard:hover .screen img{opacity:.75}
.vcard .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .4s,transform .4s;
}
.vcard .play::after{content:'';border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.vcard:hover .play{background:rgba(255,255,255,.15);transform:translate(-50%,-50%) scale(1.08)}
.vcard .dur{
  position:absolute;right:16px;bottom:14px;padding:3px 10px;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;letter-spacing:.15em;
}
.vcard .cap{display:flex;justify-content:space-between;align-items:baseline;padding:16px 2px 0;gap:16px}
.vcard .cap .t{font-family:var(--serif);font-size:19px;letter-spacing:.12em;font-weight:600}
.vcard .cap .s{font-size:11px;letter-spacing:.2em;color:var(--text-50);white-space:nowrap}

/* ---------- 分类索引 ---------- */
.cats{border-top:1px solid var(--line)}
.cat-row{display:flex;align-items:baseline;gap:4vw;padding:44px 0;border-bottom:1px solid var(--line);transition:padding .4s,background .4s}
.cat-row:hover{padding-left:24px}
.cat-row .no{font-size:12px;letter-spacing:.2em;color:var(--text-30);width:48px;flex-shrink:0}
.cat-row .name{font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);font-weight:600;letter-spacing:.2em;flex-shrink:0}
.cat-row .en{font-size:11px;letter-spacing:.3em;color:var(--text-50);text-transform:uppercase}
.cat-row .cnt{margin-left:auto;font-size:12px;letter-spacing:.2em;color:var(--text-50);white-space:nowrap}
.cat-row .arr{margin-left:3vw;color:var(--text-30);transition:color .3s,transform .3s}
.cat-row:hover .arr{color:var(--text);transform:translateX(6px)}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line);padding:80px 0 48px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer .big{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);letter-spacing:.2em;font-weight:600}
.footer-links{display:flex;gap:40px;flex-wrap:wrap}
.footer-links a{font-size:13px;letter-spacing:.15em;color:var(--text-70)}
.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.2em;color:var(--text-30)}
.style-switch{font-size:11px;letter-spacing:.25em;color:var(--text-50);border-bottom:1px solid var(--line-strong);padding-bottom:4px}
.style-switch:hover{color:var(--text)}

/* ---------- 列表页 ---------- */
.page-head{padding:180px 0 70px;border-bottom:1px solid var(--line)}
.page-head h1{font-family:var(--serif);font-size:clamp(38px,6vw,72px);font-weight:600;letter-spacing:.15em;margin-top:20px}
.page-head .intro{margin-top:22px;max-width:560px;color:var(--text-70);font-size:14px;letter-spacing:.05em}
.filter{display:flex;gap:36px;flex-wrap:wrap;padding:34px 0;border-bottom:1px solid var(--line)}
.filter a{font-size:13px;letter-spacing:.2em;color:var(--text-50);padding-bottom:6px;border-bottom:1px solid transparent;transition:.3s}
.filter a:hover{color:var(--text)}
.filter a.on{color:var(--text);border-bottom-color:var(--text)}
.list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px 0 100px}
.list-grid.pad{gap:24px;padding:40px 4vw 100px;max-width:1440px;margin:0 auto}
.list-grid .work{aspect-ratio:3/2}
.list-count{padding:26px 0 0;font-size:12px;letter-spacing:.25em;color:var(--text-50)}
.videos-wrap{max-width:1440px;margin:0 auto;padding:40px 4vw 100px}
.videos-wrap .video-grid{padding:0}

/* ---------- 全景/视频 详情页 ---------- */
.viewer-page{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.viewer-bar{height:68px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;border-bottom:1px solid var(--line);background:var(--bg);z-index:10}
.viewer-bar .back{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.25em;color:var(--text-70)}
.viewer-bar .back:hover{color:var(--text)}
.viewer-bar .tt{font-family:var(--serif);font-size:16px;letter-spacing:.25em;font-weight:600}
.viewer-bar .ops{display:flex;gap:26px}
.viewer-bar .ops a{font-size:11px;letter-spacing:.25em;color:var(--text-50);text-transform:uppercase;cursor:pointer}
.viewer-bar .ops a:hover{color:var(--text)}
#viewer{flex:1;position:relative;background:#000}
.viewer-fallback{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--text-50);font-size:12px;letter-spacing:.3em;text-align:center;padding:0 20px}
.viewer-info{flex-shrink:0;border-top:1px solid var(--line);background:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 3vw;flex-wrap:wrap}
.viewer-info .desc{font-size:13px;color:var(--text-70);letter-spacing:.05em;max-width:640px}
.viewer-info .tags{display:flex;gap:22px;font-size:11px;letter-spacing:.25em;color:var(--text-50);white-space:nowrap}
.video-stage{flex:1;background:#000;display:flex;align-items:center;justify-content:center;min-height:0;position:relative}
.video-stage video{width:100%;height:100%;object-fit:contain}
.video-sound{position:absolute;right:26px;bottom:26px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.35);padding:10px 20px;font-size:13px;letter-spacing:.15em;cursor:pointer;backdrop-filter:blur(6px);z-index:5;transition:background .3s}
.video-sound:hover{background:rgba(255,255,255,.18)}
.psv-navbar{display:none!important}

/* ---------- 关于页 ---------- */
.about-statement{padding:200px 0 120px;border-bottom:1px solid var(--line)}
.about-statement .big{font-family:var(--serif);font-size:clamp(30px,4.6vw,60px);font-weight:600;letter-spacing:.08em;line-height:1.6;max-width:1000px;margin-top:26px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:100px 0;border-bottom:1px solid var(--line)}
.two-col h3{font-family:var(--serif);font-size:26px;letter-spacing:.15em;font-weight:600;margin:14px 0 22px}
.two-col p{color:var(--text-70);font-size:14px;letter-spacing:.04em;margin-bottom:14px}
.timeline{border-top:1px solid var(--line)}
.tl-row{display:flex;gap:4vw;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tl-row .yr{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.1em;width:110px;flex-shrink:0}
.tl-row .ev{font-size:14px;color:var(--text-70);letter-spacing:.05em}
.tl-row .ev b{color:var(--text);font-weight:600;letter-spacing:.08em}

/* ---------- 作者页 ---------- */
.author-head{padding:190px 0 80px;border-bottom:1px solid var(--line);display:flex;gap:56px;align-items:center;flex-wrap:wrap}
.author-ava{width:148px;height:148px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid var(--line)}
.author-info h1{font-family:var(--serif);font-size:clamp(32px,4.5vw,54px);font-weight:600;letter-spacing:.15em;margin:14px 0 16px}
.author-info .bio{max-width:560px;color:var(--text-70);font-size:14px;letter-spacing:.05em}
.author-stats{display:flex;gap:56px;margin-top:28px;flex-wrap:wrap}
.author-stats .it .n{font-family:var(--serif);font-size:30px;font-weight:600}
.author-stats .it .c{font-size:11px;letter-spacing:.25em;color:var(--text-50);margin-top:6px}
.author-contact{margin-top:26px;display:flex;gap:24px;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
  .stat{border-top:1px solid var(--line);padding:36px 4vw}
  .stat:nth-child(-n+2){border-top:none}
  .w-a,.w-b,.w-c,.w-d{grid-column:span 12;aspect-ratio:16/10}
  .list-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .nav-links{display:none;position:fixed;top:76px;left:0;right:0;flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:12px 4vw 24px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;font-size:14px}
  .nav-toggle{display:block}
  .hero-scroll{display:none}
  .list-grid{grid-template-columns:1fr}
  .feat-grid.pad{gap:32px}
  .cat-row{flex-wrap:wrap;gap:12px}
  .cat-row .cnt{margin-left:0}
  .sec{padding:80px 0}
  .viewer-bar .ops{display:none}
  .author-head{padding:150px 0 60px;gap:32px}
}
