/* ============================================================
   择木全站顶栏 —— 首页与内页共用同一份
   ------------------------------------------------------------
   ⚠️ 只改这一个文件。首页 index.html 与内页 projects.html /
      project-0X.html 都引用它，改一处两边同时生效；
      不要在页面自己的 css 里再写一份，否则两边会长歪。

   变量用 --nav-* 前缀并就地定义，避免和产品页的 --ink/--pad
   等变量互相覆盖。
   ============================================================ */

.site-header,
.mobile-menu{
  --nav-ink:#12110f;
  --nav-bone:#f4f0e8;
  --nav-pad:clamp(22px,4vw,68px);
  --nav-h:86px;
  --nav-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --nav-display:"Arial Narrow","Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --nav-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --nav-ease:cubic-bezier(.2,.75,.2,1);
}

.site-header{
  position:fixed;z-index:200;top:0;left:0;width:100%;height:var(--nav-h);
  padding:0 var(--nav-pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  color:var(--nav-ink);background:rgba(244,240,232,.16);
  border-bottom:1px solid rgba(255,255,255,.28);box-shadow:0 6px 24px rgba(18,17,15,.018);
  backdrop-filter:blur(9px) saturate(1.06);-webkit-backdrop-filter:blur(9px) saturate(1.06);
  transition:background .4s,color .4s,border .4s,backdrop-filter .4s;
}
body.has-scrolled .site-header{z-index:10020}
.site-header.is-solid{
  background:rgba(244,240,232,.21);color:var(--nav-ink);border-bottom-color:rgba(18,17,15,.08);
  backdrop-filter:blur(11px) saturate(1.08);-webkit-backdrop-filter:blur(11px) saturate(1.08);
}
/* 内页：顶上没有大图垫底，顶栏直接用实底，避免文字压在内容上 */
.site-header.is-page{
  background:rgba(244,240,232,.92);border-bottom-color:rgba(18,17,15,.1);box-shadow:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.site-header.is-page .logo-slot span{opacity:1;transform:none}

.logo-slot{display:flex;align-items:center;width:max-content;height:58px;gap:11px;opacity:1}
.logo-slot img{display:block;width:55px;height:auto;object-fit:contain;filter:drop-shadow(0 1px 5px rgba(18,17,15,.18))}
.logo-slot span{font:800 23px/1 var(--nav-display);letter-spacing:.08em;white-space:nowrap;opacity:0;transform:translateY(7px);will-change:opacity}

.main-nav{display:flex;gap:clamp(12px,1.35vw,24px);font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:.01em}
.main-nav a{position:relative;padding:10px 0}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--nav-ease)}
.main-nav a:hover:after{transform:scaleX(1);transform-origin:left}

.header-actions{justify-self:end;display:flex;align-items:center;gap:9px}
.header-cta{font:500 12px var(--nav-mono);display:flex;align-items:center;border:1px solid currentColor;padding:12px 14px;transition:background .3s,color .3s}
.header-cta:hover{background:var(--nav-bone);color:var(--nav-ink)}
.header-login{font:500 12px var(--nav-mono);display:flex;align-items:center;border:1px solid currentColor;opacity:.72;padding:12px 14px;transition:opacity .3s,background .3s,color .3s}
.header-login:hover{opacity:1;background:var(--nav-bone);color:var(--nav-ink)}
.is-solid .header-cta:hover,
.is-solid .header-login:hover,
.is-page .header-cta:hover,
.is-page .header-login:hover{background:var(--nav-ink);color:var(--nav-bone)}

.menu-button{display:none;background:none;border:1px solid currentColor;padding:12px 15px;font:500 13px var(--nav-body);letter-spacing:.05em;transition:background .3s,color .3s,border-color .3s}
body.is-menu-open .menu-button{background:var(--nav-ink);color:var(--nav-bone)}

/* 收起态：桌面隐藏，手机由下面的媒体查询打开 */
.menu-backdrop{position:fixed;z-index:10035;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .45s var(--nav-ease)}
.menu-backdrop.is-open{opacity:1;pointer-events:auto}
.mobile-menu{display:none}

@media (max-width:900px){
  .site-header,.mobile-menu{--nav-h:68px;--nav-pad:20px}
  .site-header{grid-template-columns:1fr auto}
  .main-nav,.header-cta{display:none}
  .header-actions{gap:7px}
  .menu-button{display:block;padding:12px 13px;font-size:12.5px;min-height:44px}
  .header-login{padding:12px 11px;font:500 12.5px var(--nav-body);letter-spacing:.04em;min-height:44px;opacity:.92}
  .logo-slot{height:52px;gap:9px}
  .logo-slot img{width:48px}
  .logo-slot span{font-size:19px;transform:translateY(6px)}
  .site-header.is-page .logo-slot span{transform:none}

  .mobile-menu{
    position:fixed;z-index:10040;top:0;left:0;right:0;max-height:100svh;
    background:var(--nav-bone);color:var(--nav-ink);
    padding:calc(var(--nav-h) + 2px) var(--nav-pad) 14px;
    display:flex;flex-direction:column;overflow-y:auto;
    transform:translateY(-100%);transition:transform .55s var(--nav-ease);
    border-bottom:1px solid rgba(18,17,15,.14);
  }
  .mobile-menu.is-open{transform:none}
  .mobile-menu a{font:700 20px/1 var(--nav-display);letter-spacing:-.02em;text-align:right;border-bottom:1px solid rgba(18,17,15,.11);padding:14px 0}
  .mobile-menu a:last-child{border-bottom:0}

  body.is-menu-open .site-header{z-index:10050;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--nav-ink)}
  body.is-menu-open .hero-brand-target{visibility:hidden}
}

/* 内页：顶栏是 fixed，给正文让出高度（原来是 sticky 自带占位） */
body.archive-page,
body.project-template{padding-top:86px}
@media (max-width:900px){
  body.archive-page,
  body.project-template{padding-top:68px}
}

@media (prefers-reduced-motion:reduce){
  .logo-slot{opacity:1}
  .site-header.is-page .logo-slot span{opacity:1;transform:none}
}