/* ===== Scene 05 · layout.css v2.1 · 十二经典 =====
   十二宫=选择入口 · 主题殿=全屏overlay(左海报55%右七模块45%)
   框架封死，内容活（只改 themes.js） */

* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#040302; --gold:#FFD45A; --gold-bright:#FFF7B8; --gold-deep:#B87816;
  --gold-soft:#FFE08A; --text:#FFF3D8; --muted:#c4b596;
  --line:rgba(255,212,90,0.22);
  --font-lishu:"华文隶书","STLiti","LiSu","Source Han Serif SC","SimSun",serif;
  --font-songti:"Noto Serif SC","Source Han Serif SC","SimSun",serif;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font-songti);line-height:1.9;overflow-x:hidden;}

.bg-skylight{position:fixed;top:-20vh;left:50%;width:100vw;height:70vh;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 60%,rgba(255,212,90,0.18),transparent 60%);pointer-events:none;z-index:0;}
.bg-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,0.55) 100%);}

.container{max-width:1100px;margin:0 auto;padding:0 24px 80px;position:relative;z-index:1;}

/* 首屏 */
.head{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;}
.head .eyebrow{color:var(--gold-deep);font-size:clamp(20px,3vw,28px);letter-spacing:16px;margin-bottom:48px;font-family:'JetBrains Mono','Consolas',monospace;font-weight:bold;}
.head h1{font-family:var(--font-lishu);font-size:clamp(56px,8vw,96px);font-weight:400;letter-spacing:12px;background:linear-gradient(180deg,#FFF7B8,#FFD45A,#B87816);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 14px rgba(255,217,138,.35),0 0 42px rgba(255,180,60,.18);}
.head .head-line{width:300px;max-width:76vw;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:44px auto;}
.head .creed{color:var(--gold-soft);font-size:clamp(17px,2.8vw,24px);letter-spacing:5px;font-weight:300;line-height:2;margin-bottom:16px;}
.head .choose{color:var(--gold);font-size:clamp(16px,2.4vw,20px);letter-spacing:8px;margin-top:48px;animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);opacity:0.5;}50%{transform:translateY(14px);opacity:1;}}

/* 馆筛选按钮 */
.filter-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 0 40px;}
.filter-btn{
  background:transparent;border:1px solid var(--line);
  color:var(--muted);font-family:var(--font-lishu);
  font-size:clamp(14px,2vw,18px);letter-spacing:4px;
  padding:10px 24px;border-radius:2px;cursor:pointer;
  transition:all .3s;
}
.filter-btn:hover{border-color:var(--gold);color:var(--gold-soft);}
.filter-btn.active{border-color:var(--gold);color:var(--bg);background:var(--gold);}

/* 十二宫（固定3列4行=12格，不可变） */
.poster-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,auto);gap:20px;padding:20px 0 60px;}
.door{position:relative;cursor:pointer;overflow:hidden;border:2px solid var(--line);background:#080604;transition:border-color .4s,box-shadow .4s;aspect-ratio:3/4;}
.door::before,.door::after{content:'';position:absolute;width:24px;height:24px;border-color:var(--gold);opacity:0.5;z-index:3;transition:opacity .4s;}
.door::before{top:8px;left:8px;border-top:2px solid;border-left:2px solid;}
.door::after{bottom:8px;right:8px;border-bottom:2px solid;border-right:2px solid;}
.door img{width:100%;height:100%;object-fit:cover;filter:brightness(0.5);}
.door-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 12px;background:linear-gradient(180deg,transparent 35%,rgba(4,3,2,0.9) 100%);z-index:2;}
.door-num{color:var(--gold-deep);font-size:11px;letter-spacing:3px;margin-bottom:6px;font-family:var(--font-lishu);}
.door-title{font-family:var(--font-lishu);font-size:clamp(18px,2.4vw,28px);color:var(--gold-soft);letter-spacing:3px;text-shadow:0 0 16px rgba(255,212,90,0.5);text-align:center;}
.door:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(255,212,90,0.15);}
.door:hover img{filter:brightness(0.8);}
.door:hover::before,.door:hover::after{opacity:1;}
.door{position:relative;cursor:pointer;overflow:hidden;border:2px solid var(--line);background:#080604;transition:all .5s;aspect-ratio:3/4;}
.door::before,.door::after{content:'';position:absolute;width:24px;height:24px;border-color:var(--gold);opacity:0.5;z-index:3;transition:opacity .4s;}
.door::before{top:8px;left:8px;border-top:2px solid;border-left:2px solid;}
.door::after{bottom:8px;right:8px;border-bottom:2px solid;border-right:2px solid;}
.door img{width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .4s;filter:brightness(0.5);}
.door-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 12px;background:linear-gradient(180deg,transparent 35%,rgba(4,3,2,0.9) 100%);z-index:2;}
.door-num{color:var(--gold-deep);font-size:11px;letter-spacing:3px;margin-bottom:6px;font-family:var(--font-lishu);}
.door-title{font-family:var(--font-lishu);font-size:clamp(18px,2.4vw,28px);color:var(--gold-soft);letter-spacing:3px;text-shadow:0 0 16px rgba(255,212,90,0.5);text-align:center;}
.door:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(255,212,90,0.15);}
.door:hover img{filter:brightness(0.8);}
.door:hover::before,.door:hover::after{opacity:1;}
.door-vol{color:var(--gold);font-size:13px;letter-spacing:4px;margin-bottom:6px;font-family:var(--font-lishu);font-weight:bold;}
.door-empty{border:2px dashed var(--line);background:rgba(8,6,4,0.5);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;}
.door-empty span{color:var(--muted);font-size:16px;letter-spacing:6px;font-family:var(--font-lishu);opacity:0.4;}

/* 导航入口 */
.nav-entry{text-align:center;padding:48px 24px 32px;}
.nav-link{display:inline-block;color:var(--gold);font-size:clamp(16px,2.6vw,22px);letter-spacing:5px;text-decoration:none;border:1px solid var(--gold);padding:16px 40px;border-radius:2px;transition:all .4s;font-family:var(--font-lishu);}
.nav-link:hover{background:var(--gold);color:var(--bg);}

/* 馆尾 */
.foot{text-align:center;padding:50px 24px;border-top:1px solid var(--line);margin-top:20px;}
.foot p{color:var(--gold);font-size:clamp(16px,2.6vw,22px);letter-spacing:5px;font-weight:300;}
.foot .en{margin-top:12px;color:var(--muted);font-size:13px;letter-spacing:2px;font-style:italic;}

/* ===== 主题殿（全屏 overlay）===== */
.theme-hall{
  display:none;
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(135deg,#060503,#0a0806);
  overflow-y:auto;
}
.theme-hall.active{display:flex;animation:hallIn .5s ease;}
@keyframes hallIn{from{opacity:0;}to{opacity:1;}}

/* 返回按钮（固定左上）*/
.hall-back{
  position:fixed; top:24px; left:24px; z-index:110;
  color:var(--gold); font-size:16px; letter-spacing:4px;
  cursor:pointer; background:rgba(4,3,2,0.8);
  border:1px solid var(--line); border-radius:4px;
  padding:10px 20px; transition:all .3s;
  font-family:var(--font-songti);
}
.hall-back:hover{border-color:var(--gold); letter-spacing:8px;}

/* 左海报 55% */
.hall-poster{
  flex:0 0 55%; height:100vh; position:sticky; top:0;
  display:flex; align-items:center; justify-content:center;
  padding:60px 40px;
}
.hall-poster .poster-wrap{
  position:relative; max-width:480px; width:100%;
  border:2px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,0.8), 0 0 60px rgba(255,212,90,0.1);
  background:#080604; overflow:hidden;
}
.hall-poster .poster-wrap::before,.hall-poster .poster-wrap::after{
  content:''; position:absolute; width:36px; height:36px;
  border-color:var(--gold); opacity:0.7; z-index:2;
}
.hall-poster .poster-wrap::before{top:12px;left:12px;border-top:2px solid;border-left:2px solid;}
.hall-poster .poster-wrap::after{bottom:12px;right:12px;border-bottom:2px solid;border-right:2px solid;}
.hall-poster img{width:100%;display:block;}

/* 右七模块 45% */
.hall-content{
  flex:0 0 45%; padding:80px 48px 80px 24px;
  display:flex; flex-direction:column; gap:48px;
}
.hall-num{color:var(--gold-deep);font-size:16px;letter-spacing:8px;border:1px solid var(--gold-deep);padding:5px 16px;border-radius:2px;align-self:flex-start;font-family:var(--font-lishu);}
.hall-title{font-family:var(--font-lishu);font-size:clamp(40px,5vw,64px);font-weight:400;color:var(--gold-soft);letter-spacing:8px;text-shadow:0 0 32px rgba(255,212,90,0.4);}
.hall-quote{font-size:clamp(18px,2.6vw,24px);color:var(--text);letter-spacing:3px;font-weight:300;font-style:italic;line-height:2;}

.hall-module{border-left:2px solid var(--gold-deep);padding-left:20px;}
.hall-label{color:var(--gold-deep);font-size:13px;letter-spacing:5px;margin-bottom:12px;font-family:'JetBrains Mono',monospace;}
.hall-def{font-size:clamp(16px,2.4vw,20px);color:var(--text);letter-spacing:2px;font-weight:300;line-height:2.1;}
.hall-why{font-size:clamp(15px,2.2vw,18px);color:var(--gold-soft);letter-spacing:2px;font-weight:300;line-height:2;}

.hall-insights{list-style:none;}
.hall-insights li{color:var(--text);font-size:16px;letter-spacing:2px;padding:6px 0;font-weight:300;}
.hall-insights li::before{content:'• ';color:var(--gold);}

.hall-books{display:flex;flex-wrap:wrap;gap:10px;}
.hall-book{color:var(--gold);font-size:15px;letter-spacing:2px;border:1px solid var(--gold-deep);padding:8px 18px;border-radius:2px;font-family:var(--font-lishu);text-decoration:none;transition:all .3s;display:inline-flex;flex-direction:column;gap:3px;}
.hall-book small{color:var(--muted);font-size:11px;letter-spacing:1px;font-family:var(--font-songti);}
.hall-book:hover{border-color:var(--gold);background:rgba(255,212,90,0.08);transform:translateY(-2px);}

.hall-resources{display:flex;flex-wrap:wrap;gap:16px;}
.hall-res{color:var(--muted);font-size:14px;letter-spacing:1px;}
.hall-res b{color:var(--gold);font-size:18px;margin-right:3px;}

.hall-start{
  color:var(--gold);font-size:clamp(17px,2.6vw,22px);letter-spacing:10px;
  border:1px solid var(--gold);padding:16px 40px;border-radius:2px;
  cursor:pointer;font-family:inherit;background:transparent;transition:all .4s;
  align-self:flex-start;
}
.hall-start:hover{background:var(--gold);color:var(--bg);}

@media(max-width:900px){
  .poster-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .theme-hall.active{flex-direction:column;}
  .hall-poster{flex:0 0 auto;height:auto;position:relative;padding:80px 24px 20px;}
  .hall-poster .poster-wrap{max-width:340px;}
  .hall-content{flex:0 0 auto;padding:0 24px 60px;}
}
@media(max-width:600px){
  .container{padding:0 16px 60px;}
  .head h1{letter-spacing:6px;}
}