/* 共享导航样式（提取自 css/style.css） */

.header{overflow:visible;top:0;top:1px}
.header,.header-blur-block{left:0;position:fixed;width:100%;z-index:1000}
.header-blur-block{background-color:#000;display:block;height:1px;top:0}
.header__inner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-webkit-box-pack:justify;align-items:center;display:-webkit-box;display:flex;flex-direction:row;height:100%;justify-content:space-between;padding:15px;pointer-events:none;position:relative;width:100%;z-index:1}
@media (min-width:768px){.header__inner{padding:18px 37.5px;-webkit-transform:translateY(12px);transform:translateY(12px)}}
.header__bg{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:center top;transform-origin:center top;width:100%;z-index:0}
.header__bg-inner{-webkit-box-flex:1;flex:1 1 100%;height:100%;-webkit-transform:scaleY(1.1);transform:scaleY(1.1);-webkit-transform-origin:bottom;transform-origin:bottom}
.header__bg-inner{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.1)));background:linear-gradient(1turn,rgba(0,0,0,.5),rgba(0,0,0,.1))}
.header__bg-inner{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.8)),to(rgba(0,0,0,.9)));background:linear-gradient(1turn,rgba(0,0,0,.8),rgba(0,0,0,.9))}

.header__logo{width:103px!important;height:36px!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;font-size:0;height:36px;margin-bottom:0;pointer-events:auto;text-decoration:none;width:84.76px;z-index:2}
.header__logo svg{width:100%;height:auto}
.nav{left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}
@media (min-width:768px){.nav{pointer-events:auto;position:relative;width:auto}}
.nav__list{-webkit-box-align:center;-webkit-box-pack:center;align-items:center;justify-content:center;list-style:none;margin:0;padding:81.76px 0 51.76px;pointer-events:none}
@media (min-width:768px){.nav__list{-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:flex;justify-content:center;padding:0;pointer-events:auto}}
.nav__item{-webkit-box-pack:center;display:-webkit-box;display:flex;justify-content:center;margin-bottom:18px;overflow:hidden;padding:0 0 6px;visibility:hidden}
@media (min-width:768px){.nav__item{margin-bottom:0;margin-right:30px;visibility:visible}}
.nav__link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:#fff;cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.025em;line-height:1.2;overflow:hidden;text-decoration:none;text-transform:uppercase;-webkit-transition:color .5s cubic-bezier(.5,1,.89,1);transition:color .5s cubic-bezier(.5,1,.89,1)}
@media (min-width:768px){.nav__link{color:#9a9a9a}}
@media (min-width:768px){.nav__item.isActive .nav__link,.nav__link:hover{color:#fff}}
@media (min-width:1919px){.nav__link{font-size:16px}}
@media (min-width:1921px){.nav__link{font-size:inherit}}
.nav__link__chars{padding-top:6px;display:inline-block}
.nav-toggle{-webkit-box-align:center;-webkit-box-pack:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#8052ff;border:none;border-radius:50%;display:-webkit-box;display:flex;height:39px;justify-content:center;padding:12px;position:fixed;right:15px;top:16.2px;width:39px;z-index:1001}
@media (min-width:768px){.nav-toggle{display:none}}
.nav-toggle svg{height:100%;pointer-events:none;width:100%}
.nav-toggle__cross{display:none}
.nav__bg{border-bottom:1px solid hsla(0,0%,100%,.1);height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:center top;transform-origin:center top;width:100%;z-index:-1}
.nav__bg-inner{-webkit-box-flex:1;flex:1 1 100%;height:100%;-webkit-transform:scaleY(1.1);transform:scaleY(1.1);-webkit-transform-origin:bottom;transform-origin:bottom}

/* ---- 状态驱动（首页由 theme.js 控制；内容页由 nav.js 切换类名） ---- */
.header.is-scrolled .header__bg { transform: scaleY(1); }
.js-menu-open .header__bg { transform: scaleY(1); }
.js-menu-open .nav__item { visibility: visible; }
.js-menu-open .nav-toggle__burger { display: none; }
.js-menu-open .nav-toggle__cross { display: block; }

@keyframes sb-nav-char-hop {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  50% { transform: translateY(-15%); animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  100% { transform: translateY(0); }
}
.nav__link:hover .nav__link__chars { animation: sb-nav-char-hop .5s both; }
.nav__link:hover .nav__link__chars:nth-child(1) { animation-delay: 0s; }
.nav__link:hover .nav__link__chars:nth-child(2) { animation-delay: .035s; }
.nav__link:hover .nav__link__chars:nth-child(3) { animation-delay: .07s; }
.nav__link:hover .nav__link__chars:nth-child(4) { animation-delay: .105s; }
.nav__link:hover .nav__link__chars:nth-child(5) { animation-delay: .14s; }
.nav__link:hover .nav__link__chars:nth-child(6) { animation-delay: .175s; }

/* ============================================================
   v3.3 · 导航几何对齐官网首页（index.html 为唯一基准）
   ------------------------------------------------------------
   背景：本文件是 11 个内容页的共享导航样式，但首页走的是 css/style.css
   且自带内联覆盖块；两者对 logo 的处理不同，导致点导航换页时
   「导航位置和 logo 大小跳变」。实测（1920×1080，根字号 16px）：
      首页       header 84 ｜ logo 137.4×48（svg 137.4×44）｜ nav x=608
      内容页原先 header 74 ｜ logo 103×36 （svg 103×33）   ｜ nav x=584
   下面 5 组规则把内容页对齐到首页：1920 下 12 页逐项一致（仅 logo 宽/导航 x
   残差 1/64px，见 ① 的说明）；1440 / 1280 / 1100 下 6 页逐位相同。
   ============================================================ */

/* ① 复刻首页的流体根字号（来源：css/style.css 的
      html{font-size:clamp(12px,375px,.8333333vw)}）。
      这个 clamp 的「首选值」写的是 375px，恒大于上限 .8333333vw，所以它在任何
      视口下都只会落到两个值之一：流体值 .8333333vw（≥1440 时）或下限 12px。
      首页 logo 的 2.75rem 就跟着它走，窗口变窄时首页 logo 等比变小。
      作用域限定在 .header 内，不改动页面其它 rem 内容。

      关于写法（浏览器实测，勿再改）：clamp 与数学等价的 max(12px,.8333333vw)
      在 1920 下结果**完全相同**（都解析为 44px），差别不在 clamp/max。
      真正的 1/64px 残差来自单位类型：裸 rem 由根字号乘出来后会被 Chrome 向下
      取整到布局最小单位 1/64px（LayoutUnit）—— 首页 2.75rem = 2.75×15.99999936
      = 43.999998 → 43.984375px；而 calc() 会先把 clamp 快照成 16px 再乘 → 44px。
      故内容页比首页「高」1/64px（0.0156px，DPR2 下 1/32 设备像素）；1440 及以下
      两页同为 12px 根字号，结果逐位相同。像素级比对差异 0.000%，
      属基准页自身取整残差：不可见，且再加补偿反而会在窄视口引入反向误差。 */
.header {
    --hdr-fs: clamp(12px, 375px, .8333333vw);
}
/* ② 关键补充：vw 含滚动条宽度，100vw ＞ 100%。首页用 asscroll 隐藏了原生滚动条，
      内容页有 15px 原生滚动条，若用 width:100% 会让导航横向少 7px；
      换成 100vw 后横向自动对齐，且不必隐藏滚动条（长页面保留滚动位置反馈）。
      实测 1920 下 scrollWidth == clientWidth，无横向溢出。
      ⚠️ 只在桌面断点生效：手机宽度下 100vw 会把 .header 撑出可视区
      （实测 375 下 nav__item 由 360 → 375），而移动端导航是竖排浮层、不存在
      「横向少 7px」问题，故保持原有的 width:100%。 */
@media (min-width: 768px) {
    .header {
        width: 100vw;
    }
}

/* ③ logo 尺寸：去掉原先写死的 103×36 / 84.76px，改回「按高度等比」，
      与首页 .header__logo{width:auto} + svg{height:2.75rem} 同源。
      条高 74 → 84 是自发结果：.header__inner 是 flex 居中，
      条高 = 最高子元素 + 上下 18px 内边距；logo 48 高于按钮 38 后即得 84。 */
.header__logo {
    width: auto !important;
    height: calc(3 * var(--hdr-fs)) !important;
}
.header__logo svg {
    width: auto;
    height: calc(2.75 * var(--hdr-fs));
}

/* ④ 导航项下内边距：原写死 6px，首页为 .5rem。改用 --hdr-fs 换算后
      1920 下 = 8px（对齐首页 0 0 8px）；窄窗口下 = 6px，与首页同步收窄。
      （1920 下 nav__item padding-bottom 8+? 实测 index 与内容页均为 0 0 8px） */
.nav__item {
    padding: 0 0 calc(.5 * var(--hdr-fs));
}

/* ⑤ 头部按钮字号：join.css 的 .hdr-btn{font-size:.875rem} 也是 rem 单位，
      首页根字号是流体的（1440 下 12px → 10.5px），内容页根字号固定 16px → 14px，
      按钮因此宽 21px，把 space-between 的导航整体挤偏 10px。
      这里用 --hdr-fs 换算复刻首页；选择器 (0,2,0) 高于 join.css 的 (0,1,0)，
      且不写 height/padding，保留 join.css 自身与它的响应式断点行为。
      注：join.css 也被 agent.html 引用，但本规则限定在 .header__actions 内，不影响它。 */
.header__actions .hdr-btn {
    font-size: calc(.875 * var(--hdr-fs));
}
/* 与 join.css 现有断点一一对应，只是把 rem 换成 --hdr-fs（在首页二者恒等） */
@media (min-width: 768px) and (max-width: 1199px) {
    .header__actions .hdr-btn {
        font-size: calc(.8 * var(--hdr-fs));
    }
}
@media (max-width: 767px) {
    .header__actions .hdr-btn {
        font-size: calc(.78 * var(--hdr-fs));
    }
}