/* ═══════════════════════════════════════════════
   品牌层 · TAROVIE 字标
   ───────────────────────────────────────────────
   换字标：只换 tarovie.svg 这一个文件，然后改下面的 --brand-ratio（宽÷高）
   改大小：改 --brand-h-nav / --brand-h-hero
   改颜色：改 --brand-color-nav / --brand-color-hero
   以上三样都不需要碰任何 HTML 或 JS。
   ═══════════════════════════════════════════════ */

:root {
  /* 字标本身的宽高比 —— 换新字标时量一下 bbox 改这里 */
  --brand-ratio: 6.148;

  /* 尺寸：只写高度，宽度按比例自己算 */
  --brand-h-nav:  20px;   /* 导航栏里的字标 */
  --brand-h-hero: 44px;   /* 开场 logo 页的字标 */

  /* 颜色 */
  --brand-color-nav:  var(--color-accent-300, #d2cefd);
  --brand-color-hero: #d2cefd;

  /* 开场页字标的辉光（跟原来的 text-shadow 对齐） */
  --brand-glow-hero: drop-shadow(0 0 24px rgba(22, 24, 38, .95));
}

/* 字标本体：SVG 当遮罩，颜色由 CSS 给 —— 所以能跟着主题变 */
.brand-mark {
  display: inline-block;
  height: var(--brand-h);
  width: calc(var(--brand-h) * var(--brand-ratio));
  background-color: currentColor;
  -webkit-mask: url('tarovie.svg') no-repeat center / contain;
          mask: url('tarovie.svg') no-repeat center / contain;
  vertical-align: baseline;
  flex: 0 0 auto;
}

.brand-mark--nav {
  --brand-h: var(--brand-h-nav);
  color: var(--brand-color-nav);
}

.brand-mark--hero {
  --brand-h: var(--brand-h-hero);
  color: var(--brand-color-hero);
  filter: var(--brand-glow-hero);
}

/* 手机上字标自动收小一号 */
@media (max-width: 560px) {
  :root {
    --brand-h-nav:  16px;
    --brand-h-hero: 30px;
  }
}