/* ============================================================
 * Fate Cycle — 传统纹样层 (v2)
 * Layered on top of loom.css. Same page geometry, same greys, same
 * gold; this file only adds the paper ground, the 五色 palette, the
 * seal / bagua / 竖排 motifs. Nothing here moves the comp's layout.
 * ============================================================ */

:root {
  /* 宣纸底 —— 比 --page 暖一档，保持同亮度层级 */
  --paper:     #F6F4EF;
  --paper-2:   #FBFAF7;

  /* 五色 (--el-*) 定义在 loom.css —— 命格选择器每页都要用 */
  --cinnabar:  #9E2B25;   /* 印泥 */
  --sheng:     #4E7A5B;   /* 相生 */
  --ke:        #9E2B25;   /* 相克 */

  --wen:   "ZCOOL XiaoWei", "Noto Serif SC", "STKaiti", serif;
  --brush: "Ma Shan Zheng", "ZCOOL XiaoWei", "STKaiti", cursive;
}

/* 纸纹：极淡的纤维噪点 + 一道横向帘纹，缩放后仍不抢内容 */
body.paper {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg, rgba(0,0,0,.012) 0 1px, transparent 1px 7px);
}
body.paper .panel,
body.paper .editorial--solid { background: var(--paper-2); }
body.paper .pillar,
body.paper .why__glyph,
body.paper .story__av { background: var(--paper); }

/* 回纹角标：细金线 + 四角短勾，代替普通描边 */
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid var(--gold); opacity: .45;
  --corner: linear-gradient(#000, #000) no-repeat;
  -webkit-mask: var(--corner) left    top    / 24px 24px,
                var(--corner) right   top    / 24px 24px,
                var(--corner) left    bottom / 24px 24px,
                var(--corner) right   bottom / 24px 24px;
          mask: var(--corner) left    top    / 24px 24px,
                var(--corner) right   top    / 24px 24px,
                var(--corner) left    bottom / 24px 24px,
                var(--corner) right   bottom / 24px 24px;
}

/* 竖排小标题 */
.vtitle {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--wen); font-size: 26px; line-height: 1;
  letter-spacing: .22em; color: var(--ink-3);
  border-right: 1px solid var(--rule); padding-right: 18px;
}

/* 朱砂印 */
.seal {
  display: inline-grid; place-items: center; flex: none;
  background: var(--cinnabar); color: #FBF6EE;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28),
              inset 0 0 14px rgba(0, 0, 0, .18);
}
.seal__ch {
  font-family: var(--wen); line-height: 1.05; letter-spacing: .02em;
  text-align: center; opacity: .96;
}
.seal--sm { border-radius: 3px; }

/* 八卦环：绝对定位在圆盘之后 */
.bagua { position: absolute; inset: 0; width: 100%; height: 100%; }
.taiji { color: var(--ink); }

/* 五行生克图节点色 */
.el-wood  { fill: var(--el-wood); }
.el-fire  { fill: var(--el-fire); }
.el-earth { fill: var(--el-earth); }
.el-metal { fill: var(--el-metal); }
.el-water { fill: var(--el-water); }

/* 五色条：替换 loom.css 里一律金色的进度条 */
.elembar__t i.el-wood  { background: var(--el-wood); }
.elembar__t i.el-fire  { background: var(--el-fire); }
.elembar__t i.el-earth { background: var(--el-earth); }
.elembar__t i.el-metal { background: var(--el-metal); }
.elembar__t i.el-water { background: var(--el-water); }

/* 命盘：天干在上、地支在下，与线下排盘一致 */
.plate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plate__col {
  background: var(--paper); border-radius: var(--r-card);
  padding: 18px 0 14px; text-align: center;
}
.plate__col.is-day { box-shadow: inset 0 0 0 1px var(--gold); }
.plate__gan, .plate__zhi {
  display: block; font-family: var(--brush); line-height: 1.15;
  font-size: 44px; color: var(--ink);
}
.plate__zhi { color: var(--ink-2); }
.plate__rule { width: 26px; height: 1px; margin: 7px auto; background: var(--rule); }
.plate__lab {
  display: block; margin-top: 9px;
  font-size: 12px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase;
}
.plate__lab b { display: block; font-family: var(--wen); font-size: 14px;
                font-weight: 400; letter-spacing: .1em; color: var(--ink-3); }

/* 落款行：细线 + 印 */
.colophon {
  display: flex; align-items: center; gap: 16px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.colophon p {
  margin: 0; font-family: var(--body); font-size: 13px; line-height: 21px; color: var(--ink-3);
}

/* 经文引句 */
.sutra {
  font-family: var(--wen); font-size: 21px; line-height: 38px;
  letter-spacing: .06em; color: var(--ink-2);
}
.sutra cite {
  display: block; margin-top: 10px;
  font-family: var(--body); font-style: normal;
  font-size: 12px; letter-spacing: .1em; color: var(--ink-3);
}