@charset "UTF-8";
/*!
 * wuxiameng — v1.5.0 / v1.6.0 / v1.6.2 增强层
 * 一 · 浏览器滚动条：与「换江湖」名册同款竹节（随江湖主色换色）
 * 二 · 图片 logo：十四套风格各自可换图，文字旗号保留在结构里
 * 三 · 山门旗号副标题与 logo 同一条左基准线
 * 四 · 文章列表缩略图：左图 · 右文，图形由 --wxm-thumb-mask（SVG）剪出
 * 五 · 评论框：自定义背景图 + 焦点态美化
 * 六 · 页脚名牌：此刻江湖 · <江湖名>
 * 七 · 字体与字韵：后台选的字族／字号／行距（v1.6.2）
 * 颜色一律走 base.css 的 --wxm-* 变量，十四套江湖自动换色，不写死色值。
 * 本文件必须最后加载（在 head.css 之后）。
 * Author: randaxia | https://daimarushi.cn
 */

/* ============================================================
 * 一 · 浏览器滚动条 · 竹节
 * 与 head.css 里 .wxm13-sheet / .wxm-maskpanel-inner 同一套手法：
 * 轨道透明，滑块取「主色 → 辅色」渐变，3px 透明 border 内缩成细圆头。
 * ============================================================ */
html.wxm,
body.wxm {
  scrollbar-width: thin;
  scrollbar-color: var(--wxm-accent) transparent;
}
html.wxm::-webkit-scrollbar { width: 11px; height: 11px; }
html.wxm::-webkit-scrollbar-track { background: transparent; }
html.wxm::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-image: linear-gradient(180deg, var(--wxm-accent), var(--wxm-accent-2));
  background-clip: padding-box;
}
html.wxm::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, var(--wxm-accent-2), var(--wxm-accent));
}
html.wxm::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(180deg, var(--wxm-accent), var(--wxm-accent));
}
html.wxm::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
 * 二 · 图片 logo
 * DOM：<a class="wxm-logo[ has-img]"><img class="wxm-logo-img"><span class="wxm-logo-text">…</span></a>
 * 有图时显示图、藏起文字（文字仍在文档里，供搜索与读屏）。
 * ============================================================ */
.wxm-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: inherit;
  line-height: 1.15;
}
.wxm-logo-img {
  display: none;
  width: auto;
  height: clamp(34px, 10vw, 54px);
  max-width: min(76vw, 340px);
  object-fit: contain;
}
.wxm-logo.has-img .wxm-logo-img { display: block; }
.wxm-logo.has-img .wxm-logo-text { display: none; }
.wxm-logo:not(.has-img) .wxm-logo-img { display: none; }
.wxm-logo.has-img:hover { opacity: .9; }

/* ============================================================
 * 三 · 山门旗号（副标题）与 logo 同一左基准
 * 左起版式的门面下，旗号与副标题都贴左、且去掉字尾间距补正，二者左边缘对齐。
 * ============================================================ */
[data-wxm-skin="fei"] .wxm-logo, [data-wxm-skin="fei"] .wxm-desc,
[data-wxm-skin="lian"] .wxm-logo, [data-wxm-skin="lian"] .wxm-desc,
[data-wxm-skin="tian"] .wxm-logo, [data-wxm-skin="tian"] .wxm-desc,
[data-wxm-skin="lu"] .wxm-logo, [data-wxm-skin="lu"] .wxm-desc,
[data-wxm-skin="xiao"] .wxm-logo, [data-wxm-skin="xiao"] .wxm-desc,
[data-wxm-skin="shu"] .wxm-logo, [data-wxm-skin="shu"] .wxm-desc,
[data-wxm-skin="xia"] .wxm-logo, [data-wxm-skin="xia"] .wxm-desc,
[data-wxm-skin="yi"] .wxm-logo, [data-wxm-skin="yi"] .wxm-desc,
[data-wxm-skin="bi"] .wxm-logo, [data-wxm-skin="bi"] .wxm-desc {
  text-indent: 0;
  text-align: left;
  align-self: flex-start;
}
/* 居中版式保持居中，但让副标题的缩进补正与 logo 一致，避免错半个字 */
[data-wxm-skin="xue"] .wxm-desc,
[data-wxm-skin="she"] .wxm-desc,
[data-wxm-skin="bai"] .wxm-desc,
[data-wxm-skin="shen"] .wxm-desc,
[data-wxm-skin="yuan"] .wxm-desc {
  text-indent: .18em;
}

/* ============================================================
 * 四 · 文章列表缩略图（左图 · 右文，SVG 遮罩）
 * 结构：<article class="wxm-post wxm-post--row">
 *          <a class="wxm-post-thumb"><span class="wxm-thumb-frame"><img class="wxm-thumb-img"></span></a>
 *          <div class="wxm-post-body">…meta / 题 / 摘 / 脚…</div>
 *        </article>
 * ============================================================ */
.wxm-post--row {
  display: grid;
  grid-template-columns: clamp(92px, 27vw, 156px) minmax(0, 1fr);
  column-gap: clamp(.7rem, 3.2vw, 1.15rem);
  align-items: start;
}
.wxm-post--row > .wxm-post-thumb { grid-column: 1; grid-row: 1; margin: 0; }
.wxm-post--row > .wxm-post-body { grid-column: 2; grid-row: 1; min-width: 0; }

/* 缩略图容器：清掉 base.css 的方框描边，改由遮罩定形 */
.wxm-post-thumb,
.wxm-post-thumb--seal {
  display: block;
  position: relative;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.wxm-post-thumb--seal { aspect-ratio: auto; }

/* 遮罩图形本体：--wxm-thumb-mask 由后台/默认 SVG 下发 */
.wxm-thumb-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--wxm-accent), var(--wxm-accent-2));
  -webkit-mask-image: var(--wxm-thumb-mask);
          mask-image: var(--wxm-thumb-mask);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: drop-shadow(0 7px 13px rgba(0, 0, 0, .22));
  transition: transform .4s ease;
}
.wxm-post:hover .wxm-thumb-frame { transform: translateY(-2px); }
.wxm-post .wxm-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform .6s ease;
}
.wxm-post:hover .wxm-thumb-img { transform: scale(1.05); }

/* 无自定义封面时的印章兜底（题名首字） */
.wxm-post-thumb--seal .wxm-thumb-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wxm-post-thumb--seal .wxm-thumb-frame b {
  font-family: var(--wxm-font-song);
  font-weight: 700;
  color: var(--wxm-seal-ink);
  font-size: clamp(1.7rem, 11vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0;
  opacity: .92;
}

/* 两栏式下正文的紧凑排版（移动端尤其重要） */
.wxm-post--row .wxm-post-title { font-size: clamp(1rem, 4.4vw, 1.24rem); margin-bottom: .5rem; }
.wxm-post--row .wxm-post-meta { margin-bottom: .5rem; }
.wxm-post--row .wxm-post-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* 取图诊断角标（v1.6.1）：地址后加 ?wxmthumb=1 时，缩略图右上角标出来源。
   field = 自定义字段 / content = 正文配图 / attach = 附件 / seal = 首字印章。
   只在带参数时出现，平时完全不显示、不占位。 */
html[data-wxm-thumbdebug] .wxm-thumb-frame::after {
  content: attr(data-wxm-thumb);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0 .3em;
  font-family: var(--wxm-font-song);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--wxm-surface);
  background: var(--wxm-ink);
  opacity: .82;
  border-bottom-left-radius: 4px;
}

/* 极窄屏（< 330px）：缩略图再收一档，保证右侧正文不挤 */
@media (max-width: 330px) {
  .wxm-post--row { grid-template-columns: clamp(80px, 30vw, 108px) minmax(0, 1fr); }
  .wxm-post--row .wxm-post-excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ============================================================
 * 五 · 评论框：自定义背景图 + 美化
 * .wxm-respond--bg 时，::before 铺背景图（18% 透明，压在卡片底色上，
 * 面板底色不透明 —— 所以深浅江湖都读得清字）。
 * ============================================================ */
.wxm-respond { position: relative; overflow: hidden; }
.wxm-respond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: var(--wxm-comment-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .4s ease;
}
.wxm-respond--bg::before { opacity: .18; }
.wxm-respond > * { position: relative; z-index: 1; }

/* 「但说无妨 · 江湖子弟 · 快意恩仇」的题头 */
.wxm-respond-motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: -.15rem 0 1rem;
  font-family: var(--wxm-font-song);
  font-size: .84rem;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--wxm-accent);
  text-align: center;
}
.wxm-respond-motto::before,
.wxm-respond-motto::after {
  content: "";
  flex: 1 1 2rem;
  max-width: 4.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wxm-line-strong), transparent);
}

/* 输入框焦点态与整体质感 */
.wxm-respond input[type="text"],
.wxm-respond input[type="email"],
.wxm-respond input[type="url"],
.wxm-respond textarea {
  border-radius: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
  background-color: transparent;
}
.wxm-respond input:focus,
.wxm-respond textarea:focus {
  outline: none;
  border-color: var(--wxm-accent);
  box-shadow: 0 0 0 3px rgba(127, 127, 127, .18);
}
.wxm-respond textarea {
  background-color: var(--wxm-surface);
  background-color: color-mix(in srgb, var(--wxm-surface) 70%, transparent);
}
.wxm-respond button[type="submit"] {
  border-radius: 6px;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .5);
  transition: transform .15s ease, opacity .2s ease;
}
.wxm-respond button[type="submit"]:active { transform: translateY(1px); }

/* ============================================================
 * 六 · 页脚名牌（v1.6.0）
 * 「此刻江湖 · <江湖名>」里的江湖名由 JS 就地换字（见 wuxiameng.js · apply()），
 * 这里只把它用一点主色提出来，免得跟周围的小字糊成一团。
 * ============================================================ */
.wxm-foot-badge b { font-weight: 400; color: var(--wxm-accent); }


/* ============================================================
 * 七 · 字体与字韵（v1.6.2 新增）
 * ------------------------------------------------------------
 * 变量由后台「七 · 字体与字韵」下发，header.php 里输出成
 *   <style id="wxm-font">:root{ … }</style>
 * · --wxm-font-body    正文字族；没设时退回主题主字族 --wxm-font-song
 * · --wxm-font-song    正文字族同时改它 —— 页面里凡取「宋体」的角色
 *                     （正文、列表摘要、题名、印章字…）一起换字
 * · --wxm-font-display 标题字族；**只在选了具体标题字族时才下发**
 * · --wxm-body-size / --wxm-line-height  字号与行距（档位为默认时不写）
 *
 * 标题那一组规则挂在 html[data-wxm-fonttitle="1"] 之下，由 header.php 同步输出
 * 该属性。这样「标题字体＝随风格」时规则整组不生效，各江湖自带的标题字
 * （连城诀的楷体、侠客行的等宽字…）原样保留 —— 不用写 !important，也不打架。
 *
 * 选择器一律写成「html[data-wxm-fonttitle] body.wxm 元件」三段，
 * 是为了盖过 head.css / skins.css 里那些 [data-wxm-skin="xx"] .某元件 的
 * 分风格字体点缀（那类选择器是 0,2,0，这里是 0,3,2）—— 用户既然在后台
 * 明确选了标题字，就该他说了算。
 * ============================================================ */
body.wxm {
  font-family: var(--wxm-font-body, var(--wxm-font-song));
  line-height: var(--wxm-line-height, 1.9);
}

html[data-wxm-fonttitle="1"] body.wxm .wxm-logo,
html[data-wxm-fonttitle="1"] body.wxm .wxm-desc,
html[data-wxm-fonttitle="1"] body.wxm .wxm-nav-list a,
html[data-wxm-fonttitle="1"] body.wxm .wxm-hero-verse,
html[data-wxm-fonttitle="1"] body.wxm .wxm-hero-novel,
html[data-wxm-fonttitle="1"] body.wxm .wxm-archive-head h1,
html[data-wxm-fonttitle="1"] body.wxm .wxm-single-head h1,
html[data-wxm-fonttitle="1"] body.wxm .wxm-post-title,
html[data-wxm-fonttitle="1"] body.wxm .wxm-widget-title,
html[data-wxm-fonttitle="1"] body.wxm .wxm-foot-verse,
html[data-wxm-fonttitle="1"] body.wxm h1,
html[data-wxm-fonttitle="1"] body.wxm h2,
html[data-wxm-fonttitle="1"] body.wxm h3,
html[data-wxm-fonttitle="1"] body.wxm h4,
html[data-wxm-fonttitle="1"] body.wxm h5,
html[data-wxm-fonttitle="1"] body.wxm h6 {
  font-family: var(--wxm-font-display, var(--wxm-font-song));
}

/* 列表摘要原本写死 2.05 行高；这里改成「正文行距 + .15」——
   行距档位为默认（不下发 --wxm-line-height）时算出 2.05，与旧版逐字相同；
   选了紧凑／疏朗则跟着正文一起收放。 */
.wxm-post-excerpt {
  line-height: calc(var(--wxm-line-height, 1.9) + .15);
}