/* ==========================================================================
 *  site.css —— 全站共用样式（书斋夜色 + 宣纸 + 古铜金）
 *  配色只有一组：墨底、宣纸、古铜、朱砂
 * ========================================================================== */
@font-face {
  font-family: "Zhongchun Fangsong";
  src: url("../fonts/ZhongchunFangsong-Sub.woff2") format("woff2"),
       url("../fonts/ZhongchunFangsong-Sub.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0a09;
  --ink-2: #14110e;
  --paper: #e8dcc0;
  --gold: #c8a86a;
  --gold-dim: rgba(200, 168, 106, 0.36);
  --line: rgba(200, 168, 106, 0.18);
  --vermilion: #a8332b;
  --text: rgba(232, 220, 192, 0.87);
  --text-dim: rgba(232, 220, 192, 0.46);
  --text-faint: rgba(232, 220, 192, 0.28);
  --serif: "Zhongchun Fangsong", "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "KaiTi", "楷体", "STKaiti", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }

/* 悬浮 UI 层：所有贴边控件都靠这个定位 */
.ui { position: fixed; z-index: 10; }

/* 氛围层 ---------------------------------------------------------------- */
/* 流动山水：多层公共领域山水画，以不同速度缓慢横移 + 带雾气流动 */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0a0908; }
.bg-layer {
  position: absolute; inset: -6% -22%;
  background-repeat: repeat-x; background-position: 0 50%; background-size: auto 104%;
  will-change: background-position;
}
.bg-layer.far {
  background-image: url("../assets/pd/yunshan-band.jpg");
  background-position: 0 52%; background-size: auto 126%;
  opacity: .58; filter: saturate(.40) brightness(.74) contrast(1.12) blur(.5px);
  animation: panFar 300s linear infinite;
}
.bg-layer.mid {
  background-image: url("../assets/pd/xisai-band.jpg");
  opacity: .30; filter: saturate(.4) brightness(.68) contrast(1.05) blur(2.4px);
  background-size: auto 140%; background-position-y: 52%;
  animation: panMid 150s linear infinite reverse;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 8%, rgba(0,0,0,.9) 42%, rgba(0,0,0,0) 88%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 8%, rgba(0,0,0,.9) 42%, rgba(0,0,0,0) 88%);
}
@keyframes panFar { from { background-position-x: 0; } to { background-position-x: -50%; } }
@keyframes panMid { from { background-position-x: 0; } to { background-position-x: -50%; } }
/* 雾：单独一层真实云雾图，慢速横移 */
.bg-layer.mistimg {
  background-image: url("../assets/pd/xisai-mist.jpg");
  background-size: auto 130%; background-position-y: 44%;
  opacity: .26; filter: saturate(.3) brightness(.95) blur(4px);
  animation: panMid 190s linear infinite;
}
/* 雾气：两层错相位横移的柔光带，做出"水气流动" */
.mist { position: absolute; inset: 0; }
.mist::before, .mist::after {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(52% 34% at 26% 58%, rgba(228,214,186,.10), rgba(0,0,0,0) 70%),
    radial-gradient(46% 28% at 74% 44%, rgba(214,206,190,.08), rgba(0,0,0,0) 72%),
    radial-gradient(64% 40% at 50% 78%, rgba(180,168,144,.07), rgba(0,0,0,0) 76%);
  animation: mistA 96s ease-in-out infinite alternate;
}
.mist::after { animation: mistB 132s ease-in-out infinite alternate; opacity: .7; }
@keyframes mistA { from { transform: translate3d(-4%, 1.5%, 0) scale(1); } to { transform: translate3d(6%, -2%, 0) scale(1.12); } }
@keyframes mistB { from { transform: translate3d(5%, -1%, 0) scale(1.08); } to { transform: translate3d(-5%, 2.5%, 0) scale(1); } }

/* 手卷式细双线画框 */
.frame { position: fixed; inset: 13px; z-index: 8; pointer-events: none;
  border: 1px solid rgba(200,168,106,.15); }
.frame::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(200,168,106,.07); }

.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 38%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.72) 100%);
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* 顶部导航 -------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 16px 30px; pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-brand { display: flex; flex-direction: column; gap: 4px; }
.nav-title {
  font-size: 19px; letter-spacing: .3em; color: var(--text);
  text-shadow: 0 1px 16px rgba(0,0,0,.9); padding-left: .3em;
}
.nav-sub { font-size: 11.5px; letter-spacing: .22em; color: var(--text-faint); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; font-size: 13.5px; letter-spacing: .26em; padding: 6px 2px; margin-left: 26px;
  color: var(--text-dim); transition: .26s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold); transition: right .3s ease;
}
.nav-links a:hover { color: #f3e6c8; }
.nav-links a:hover::after { right: 0; }
.nav-links a.on { color: var(--gold); }
.nav-links a.on::after { right: 0; opacity: .6; }

/* 页脚 ------------------------------------------------------------------ */
.foot {
  position: relative; z-index: 10; margin-top: 60px; padding: 34px 30px 44px;
  border-top: 1px solid rgba(200,168,106,.10);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: baseline;
  font-size: 12.5px; letter-spacing: .16em; color: var(--text-faint);
}
.foot .seal-mini { height: 42px; width: auto; opacity: .78; }

/* 通用按钮 -------------------------------------------------------------- */
.btn {
  font-family: var(--serif); font-size: 14px; letter-spacing: .16em; cursor: pointer;
  color: var(--text); background: rgba(20,17,14,.62); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px; transition: .22s;
}
.btn:hover { color: #f3e6c8; border-color: var(--gold-dim); background: rgba(200,168,106,.12); }
.btn.primary { color: var(--gold); border-color: var(--gold-dim); }
.btn:disabled { opacity: .35; cursor: default; }

/* ==========================================================================
 *  诗集总览页
 * ========================================================================== */
.page-wrap { position: relative; z-index: 10; padding: 108px 30px 0; max-width: 1400px; margin: 0 auto; }
.page-head { margin-bottom: 34px; }
.page-head h1 {
  font-size: 30px; font-weight: 400; letter-spacing: .38em; margin: 0 0 12px;
  color: var(--text); padding-left: .38em;
}
.page-head p { margin: 0; font-size: 13.5px; letter-spacing: .2em; color: var(--text-dim); line-height: 2; }
.head-rule { width: 76px; height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent); margin: 16px 0 14px; }

/* 诗箋卡片网格 */
.cards {
  display: grid; gap: 34px 28px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.poem-card {
  position: relative; cursor: pointer; border: 0; padding: 0; background: none;
  display: flex; flex-direction: column; gap: 14px; text-align: left; font-family: var(--serif);
}
.poem-card .paper {
  position: relative; display: block; width: 100%;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 1px 0 rgba(255,240,210,.05);
  transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s;
  background: #e8dcc0;
}
.poem-card .paper canvas { display: block; width: 100%; height: auto; }
.poem-card .paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,250,235,.10), rgba(0,0,0,.06) 60%, rgba(0,0,0,.14));
  mix-blend-mode: multiply;
}
.poem-card:hover .paper {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 22px 48px rgba(0,0,0,.62), 0 0 0 1px var(--gold-dim);
}
.poem-card .meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.poem-card .meta .t { font-size: 15.5px; letter-spacing: .12em; color: var(--text); }
.poem-card .meta .g {
  font-size: 12px; letter-spacing: .18em; color: var(--gold); opacity: .82;
  border: 1px solid var(--gold-dim); border-radius: 999px; padding: 2px 9px;
}
.poem-card .meta .d { font-size: 12px; letter-spacing: .14em; color: var(--text-faint); }
.poem-card .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: 13px; letter-spacing: .25em; }

/* 灯箱 */
.lightbox {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: rgba(6,5,4,.90); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox.open { display: grid; grid-template-columns: 1fr minmax(240px, 330px); }
.lightbox .stage-img {
  display: grid; place-items: center; padding: 46px 26px; overflow: auto;
}
.lightbox .stage-img img, .lightbox .stage-img canvas {
  max-width: 100%; max-height: calc(100vh - 92px); width: auto; height: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
}
.lightbox .panel {
  border-left: 1px solid rgba(200,168,106,.12); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 18px; overflow: auto;
}
.lightbox h2 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: .2em; }
.lightbox .rows { display: flex; flex-direction: column; gap: 9px; font-size: 13px; letter-spacing: .14em; color: var(--text-dim); }
.lightbox .rows b { color: var(--text); font-weight: 400; }
.lightbox .acts { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.lightbox .close {
  position: absolute; top: 18px; right: 22px; z-index: 2; font-size: 22px; line-height: 1;
  background: none; border: 0; color: var(--text-dim); cursor: pointer; font-family: var(--sans);
}
.lightbox .close:hover { color: var(--text); }

/* 加载态 */
.busy { display: grid; place-items: center; gap: 14px; padding: 90px 0; color: var(--text-dim); letter-spacing: .3em; font-size: 13px; }
.busy .ring { width: 34px; height: 34px; border: 1px solid var(--gold-dim); border-top-color: var(--gold); border-radius: 50%; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .nav { padding: 12px 16px; }
  .nav-title { font-size: 15px; }
  .nav-links a { padding: 6px 10px; font-size: 12.5px; letter-spacing: .12em; }
  .page-wrap { padding: 92px 16px 0; }
  .page-head h1 { font-size: 22px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
  .lightbox.open { grid-template-columns: 1fr; }
  .lightbox .panel { border-left: 0; border-top: 1px solid rgba(200,168,106,.12); }
}