/* 品牌区的几何与结构：标记与字标的尺寸、对齐、两个颜色槽。
   规范见 docs/design/brand-vi-v2_2026-09-23.html。

   颜色不在这里 —— 各页面的样式表按自己的主题提供：
     --wm-accent   Like 与插入符的品牌色（深色青柠 / 浅色蓝）
     容器墨色      由 .brand 的 color 决定，Native 跟它走

   这个文件必须被 index.html 与 landing.html 同时引入。分开写两份的话，
   迟早会有一边漏掉某条规则 —— 字标就会因为拿不到宽高比而塌成一条线。 */

.brand { display: inline-flex; align-items: center; gap: 9px; }

/* 标记：与字标同高即上下端对齐 —— 两者图形都贴着自己画布的上下边线 */
.brand-mark { display: block; flex: none; }

/* 字标：SVG 轮廓。只给 height 的话宽度会塌成 0，必须补上宽高比。
   wm-full 带插入符（大写高 = 687/829 倍高度）；大写高 < 13px 时换 wm-tight。 */
.wm { display: block; flex: none; width: auto; }
.wm-full { aspect-ratio: 4897 / 829; height: 20.5px; }
.wm-tight { aspect-ratio: 4897 / 737; height: 20.5px; }

/* Like 与插入符共用一个颜色槽 */
.accent-g { color: var(--wm-accent); }

/* 副标：界面文字，不属于标识组合 —— 靠间距和更弱的字号区分 */
.brand-sub { font-size: 13px; font-weight: 500; letter-spacing: .02em; margin-left: 3px; }

@media (max-width: 560px) {
  /* 同高缩到 17px，大写高 14.1px —— 仍高于 13px 的带符下限，故不换降级版 */
  .brand-mark { width: 17px; height: 17px; }
  .wm-full, .wm-tight { height: 17px; }
  .brand-sub { display: none; }
}