/* ══════════════════════════════════════════════════════════════════
   悟垣字标锁版 —— 照抄自《悟垣设计系统手册 v1.5》, 一个字没改。
   依赖 wutrix-tokens.css。

   顶栏那个品牌名就是用这套排的。要改比例只动 --lk 一个值, 其余全部由它
   推导 —— **不要单独调其中任何一项**, 调了就不是这套字标了。

   本仓库对它做的唯一偏离(写在 base.html 里, 不在这个文件):
   净空那条 padding/负 margin 没有启用。它的用意是「留出净空但不改变视觉
   位置」, 可在 flex 顶栏里, 负 margin 会把第一个元素往左拽出容器内边距。
   顶栏靠自身的 padding(24px)和 gap(32px)已经满足 .4×--lk 的净空要求。
   ══════════════════════════════════════════════════════════════════ */

/* 悟垣字标锁版 —— 品牌名称的唯一实现
   依赖 brand/tokens.css。两个仓库共用。

   构成：[字标] + [中文名] + [拉丁名]
     悟垣·天枢  wutrixflow
     └图标┘ └中文┘ └─拉丁─┘

   三个字标名一律连写，不加空格：wutrixstory / wutrixstudio /
   wutrixflow / wutrixcolor。前半 wutrix 用品牌金，后半产品名用产品色 ——
   这一笔颜色分割就是「母品牌 + 子品牌」的全部表达，不要再加符号或连字符。 */

.wx-lockup{
  --lk: 44px;                    /* 唯一尺寸旋钮：字标边长。其余全部由它推导 */
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lk) * .25);    /* 图标与文字的间距 = 边长 × 0.25 */
  line-height: 1;
  white-space: nowrap;
}
.wx-lockup__mark{ width: var(--lk); height: var(--lk); flex: none; display: block; }
.wx-lockup__text{ display: flex; flex-direction: column; gap: calc(var(--lk) * .07); }

/* 中文 —— 思源宋 900（Black），不是 700。字距 .13em 是定值。
   用 900 的理由见 tokens.css 里 --wx-lockup-cn-weight 的注释：700 的横画在
   44px 锁版下只有 0.75 CSS px，抗锯齿会把它抹成灰，整行发虚。
   **网页要记得把 900 这一档也加进字体请求**，只请求 700 的话浏览器会用
   合成加粗顶上，那个假粗会把宋体的横细竖粗全糊掉，比不加粗还难看。
   末字后必须补等量负 margin：letter-spacing 会在最后一个字后面也加一份，
   不抵掉的话中英之间会比规格宽出 .13em，是这套字标最常见的翻车点。 */
.wx-lockup__cn{
  font-family: var(--wx-font-display-cn);
  font-weight: var(--wx-lockup-cn-weight);
  font-size: calc(var(--lk) * .43);
  letter-spacing: var(--wx-lockup-cn-ls);
  margin-right: calc(var(--wx-lockup-cn-ls) * -1);
  color: var(--wx-paper);
}
/* 分隔点 —— 定宽字身，不交给字体去排。
   U+00B7 在不同中文字体里字身宽度差一倍以上：思源宋是 .335em 的比例字身，
   而 Songti SC / SimSun 一类把它做成 1em 全角字身，点两侧各自带 .39em 空白。
   直接排出来的话，点两侧的墨色间隙实测 .24em（思源宋）到 .55em（全角字身），
   而汉字之间只有 .16em —— 点会浮在中间，字标断成两截。

   解法是把它塞进一个 .30em 的定宽盒子里居中：字身比盒子宽就向两侧等量溢出，
   点始终落在盒子正中，间距于是与字体无关。实测两侧墨隙 .10–.14em，
   比汉字间距略紧 —— 点的墨量小，排得和汉字一样松会显得更散。

   width 用 inline-flex + justify-content 而不是 text-align：内容比盒子宽时
   Chromium 的 text-align:center 会退回左对齐，居中不生效。 */
.wx-lockup__sep{
  display: inline-flex;
  justify-content: center;
  width: .30em;
  letter-spacing: 0;                                        /* 去掉点后面那一份字距 */
  margin-right: .04em;
  margin-left: calc(.04em - var(--wx-lockup-cn-ls));        /* 抵掉前一字尾部的字距，两侧才等宽 */
  opacity: .40;
}

/* 拉丁 —— Sora 700，连写 */
.wx-lockup__lat{
  font-family: var(--wx-font-display-en);
  font-weight: 700;
  font-size: calc(var(--lk) * .29);
  letter-spacing: .005em;
}
.wx-lockup__lat b{ color: var(--wx-gold); font-weight: inherit; }   /* wutrix */
.wx-lockup__lat i{ color: var(--wx-pc-text); font-style: normal; }  /* 产品名 */

/* 竖排：图标在上，文字居中。用于方形位（头像、卡片、加载页） */
.wx-lockup--stack{ flex-direction: column; gap: calc(var(--lk) * .22); }
.wx-lockup--stack .wx-lockup__text{ align-items: center; gap: calc(var(--lk) * .1); }
.wx-lockup--stack .wx-lockup__cn{ margin-right: 0; }  /* 居中时负 margin 会把整行拉偏 */

/* 只有母标时：没有产品名，中文就是「悟垣」，拉丁全金 */
.wx-lockup--master .wx-lockup__lat i{ display: none; }

/* 净空 —— 四周留不小于字标边长的 40%。这是硬下限，不是建议值。 */
.wx-lockup{ padding: calc(var(--lk) * .4); margin: calc(var(--lk) * -.4); }

/* 最小尺寸
   横排 --lk 不得小于 28px：再小中文的宋体横画会断。
   竖排不得小于 40px。低于下限时只用字标，不带文字。 */