/* yvfng 子页面导航（方案A · 与首页同款）
   用法：子页面引入本文件 + 放置首页同款 <header class="nav"> 结构 + nav.js
   说明：令牌按首页纸感体系就地定义（作用域限 .nav），随 html[data-theme] 双主题自适配 */

/* —— 令牌（与 css/style.css 同值，作用域限定在 .nav 内） —— */
.nav{
  --paper:#f1efe9; --paper-2:#e8e5dc; --ink:#1d1f24; --ink-2:#4b4e55; --muted:#7d7a70;
  --rule:#d6d2c6; --rule-strong:#b9b4a6; --red:#a93b2e; --red-ink:#f1efe9;
  --serif:var(--font-display,"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,serif);
  --mono:var(--font-mono,"Cascadia Code",Consolas,"Courier New",monospace);
  --gutter:clamp(20px,4vw,56px);
}
html[data-theme="dark"] .nav{
  --paper:#1c1a15; --paper-2:#242019; --ink:#ece6d7; --ink-2:#c3baa6; --muted:#a69d88;
  --rule:#3a352b; --rule-strong:#5d5646; --red:#e07a5f; --red-ink:#f4f1ea;
}

/* —— 结构（与首页一致） —— */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav a{color:inherit;text-decoration:none}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px;max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.01em}
.seal{display:inline-grid;place-items:center;width:26px;height:26px;background:var(--red);color:var(--red-ink);border-radius:2px;font-family:var(--serif);font-size:15px;line-height:1;padding-top:1px}
.nav-links{display:flex;gap:26px;font-size:14.5px;color:var(--ink-2)}
.nav-links a{padding:4px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-color:var(--rule-strong)}
.nav-side{margin-left:auto;display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.nav-side span{cursor:default}
.theme-sw{position:relative;display:inline-flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:12px;background:none;border:0;padding:1px 0;cursor:pointer}
.theme-sw .s{color:var(--muted);border-bottom:1px solid transparent;transition:color .15s ease}
.theme-sw .s.on{color:var(--ink);border-bottom-color:currentColor}
.theme-sw:hover .s{color:var(--ink)}
.menu-btn{display:none}
.nav-menu{display:none}

/* —— 移动端（与首页一致） —— */
@media (max-width:640px){
  .nav .wrap{height:46px;flex-wrap:nowrap;align-items:center;gap:14px;padding-block:0;position:relative}
  .nav{border-bottom:none}
  .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);pointer-events:none;transform:translateY(var(--navline,42px));transition:transform .42s cubic-bezier(.2,.6,.35,1) .36s}
  .nav.compact::after{transform:translateY(0);transition:transform .36s cubic-bezier(.5,.05,.55,.95) .06s}
  .nav-links{position:absolute;left:0;right:0;top:100%;display:flex;gap:24px;white-space:nowrap;padding:3px var(--gutter) 10px;transition:opacity .12s ease .14s,visibility 0s linear .14s}
  .nav-links::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--paper);z-index:-1;pointer-events:none;transform-origin:top;transition:transform .42s cubic-bezier(.2,.6,.35,1) .36s}
  .nav-links a{display:inline-block;transform-origin:50% 50%;transition:transform .32s cubic-bezier(.3,.62,.35,1),opacity .32s ease}
  .nav-links a:nth-child(1){transition-delay:.28s}
  .nav-links a:nth-child(2){transition-delay:.32s}
  .nav-links a:nth-child(3){transition-delay:.36s}
  .nav-links a:nth-child(4){transition-delay:.40s}
  .nav-links a:nth-child(5){transition-delay:.44s}
  .nav-links a{padding:2px 0}
  .nav-side{transform-origin:50% 50%;transition:transform .32s cubic-bezier(.3,.62,.35,1) .48s,opacity .32s ease .48s,visibility 0s linear .48s}
.nav.compact .nav-side{opacity:0;transform:translate(var(--fx,6px),var(--fy,-14px)) scale(.05);pointer-events:none;visibility:hidden;transition:transform .32s cubic-bezier(.5,.05,.55,.95),opacity .34s ease-in,visibility 0s linear .50s}
  .nav a,.nav button{-webkit-tap-highlight-color:transparent}
.nav .lang-sw{outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.nav .lang-sw:focus-visible{outline:2px solid var(--rule-strong);outline-offset:3px}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:26px;height:22px;background:none;border:0;padding:0;cursor:pointer;position:absolute;right:calc(var(--gutter) - 3px);top:12px;opacity:0;transform:translateX(-10px);pointer-events:none;visibility:hidden;outline:none;-webkit-user-select:none;user-select:none;transition:opacity .14s ease .04s,transform .2s ease .02s,visibility 0s linear .2s}
  .menu-btn:focus-visible{outline:2px solid var(--rule-strong);outline-offset:3px}
  .menu-btn span{display:block;height:1.5px;width:20px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
  
  .nav.compact .nav-links{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .12s ease .68s,visibility 0s linear .80s}
  .nav.compact .nav-links::before{transform:scaleY(0);transition:transform .36s cubic-bezier(.5,.05,.55,.95) .06s}
  .nav.compact .nav-links a{transform:translate(var(--fx,6px),var(--fy,-14px)) scale(.12);opacity:0;transition:transform .32s cubic-bezier(.5,.05,.55,.95),opacity .34s ease-in}
  .nav.compact .nav-links a:nth-child(1){transition-delay:.12s}
  .nav.compact .nav-links a:nth-child(2){transition-delay:.09s}
  .nav.compact .nav-links a:nth-child(3){transition-delay:.06s}
  .nav.compact .nav-links a:nth-child(4){transition-delay:.03s}
  .nav.compact .nav-links a:nth-child(5){transition-delay:0s}
  .nav.compact .menu-btn{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .14s ease .42s,transform .2s ease .40s,visibility 0s linear 0s}
  .nav.menu-open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav.menu-open .menu-btn span:nth-child(2){opacity:0}
  .nav.menu-open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .nav-menu{display:block;position:absolute;left:0;right:0;top:100%;overflow:hidden;pointer-events:none}
  .nm-in{background:var(--paper);border-bottom:1px solid var(--rule);transform:translateY(-101%);transition:transform .38s cubic-bezier(.5,.08,.5,.95)}
  .nav.menu-open .nav-menu{pointer-events:auto}
  .nav.menu-open .nm-in{transform:none;transition:transform .45s cubic-bezier(.32,.72,.28,1)}
  .nav .wrap::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(26,22,16,.18);z-index:-1;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s ease .06s,visibility 0s linear .34s}
  .nav.menu-open .wrap::after{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s}
  .nav-menu a{display:block;padding:13px var(--gutter);border-bottom:1px solid var(--rule);font-size:15px}
  .nav-menu a:hover{background:var(--paper-2)}
  .nm-in a,.nm-lang,.nm-foot .theme-sw{transform-origin:50% 50%;transform:translate(var(--mx,20px),var(--my,-60px)) scale(.22);opacity:0;transition:transform .28s cubic-bezier(.5,.05,.55,.95),opacity .3s ease-in}
  .nav.menu-open .nm-in a,.nav.menu-open .nm-lang,.nav.menu-open .nm-foot .theme-sw{transform:none;opacity:1;transition:transform .3s cubic-bezier(.3,.62,.35,1),opacity .3s ease}
  .nav.menu-open .nm-in a:nth-child(1){transition-delay:.05s}
  .nav.menu-open .nm-in a:nth-child(2){transition-delay:.085s}
  .nav.menu-open .nm-in a:nth-child(3){transition-delay:.12s}
  .nav.menu-open .nm-in a:nth-child(4){transition-delay:.155s}
  .nav.menu-open .nm-in a:nth-child(5){transition-delay:.19s}
  .nav.menu-open .nm-foot .nm-lang,.nav.menu-open .nm-foot .theme-sw{transition-delay:.225s}
  .nm-foot{display:flex;justify-content:space-between;align-items:center;padding:12px var(--gutter)}
  .nm-lang{font-family:var(--mono);font-size:12px;color:var(--muted)}
}

/* —— 移动端：为导航（含悬浮链接行）让出首屏安全距（约 87px 视觉高度） —— */
@media (max-width:640px){
  main::before{content:"";display:block;height:22px}
}

/* —— 站内集成：隐藏旧悬浮控件；语言开关手感 —— */
/* 横向溢出防护：任何内容都不把页面撑宽（main 在导航之外，不影响吸顶） */
main{overflow-x:clip}

#langToggle{display:none !important}
#themeToggle{display:none !important}
.lang-sw{position:relative;display:inline-flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:12px;line-height:normal;cursor:pointer}
.lang-sw:hover{color:var(--ink)}
.lang-sw .s{color:var(--muted);border-bottom:1px solid transparent;transition:color .15s ease}
.lang-sw .s.on{color:var(--ink);border-bottom-color:currentColor}
.lang-sw:hover .s{color:var(--ink)}