/* Shared navigation: quiet paper surface, clear links, compact actions. */
.site-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  width: min(1280px, calc(100% - 48px));
  height: 76px;
  margin-top: 18px;
  padding: 10px 18px;
  top: 12px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 2px 0 #dce4ef80, 0 8px 28px #31446b08;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-nav.is-scrolled {
  background: rgba(255,255,255,.95);
  border-color: #e2e8f1;
  box-shadow: 0 4px 24px #31446b12;
}
.site-nav .wordmark { gap: 10px; font-size: 13px; letter-spacing: -.02em; white-space: nowrap; }
.site-nav .wordmark picture { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #edf3fb; }
.site-nav .brand-logo-color { width: 32px; height: 32px; filter: none; transform: rotate(-7deg); }
.site-nav .wordmark:hover .brand-logo-color { transform: rotate(3deg) translateY(-2px); }
.site-nav .nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.site-nav .nav-right { gap: 10px; }
@media (max-width: 1100px) {
  .site-nav { gap: 12px; padding-inline: 14px; }
}
/* ---------- 平板与手机:收成一条单行工具条 ----------
   1) ≤800px:品牌、四个入口、入群按钮排成一行,高度从 115px 压到 56px;
   2) ≤560px:撤掉社交圆钮(「关于」页保留完整入口),把宽度让给主导航;
   3) ≤480px:品牌只留鲸鱼标,站名交给首屏大标题,避免挤成两行;
   4) ≤360px:入群按钮只留图标,320px 宽也不换行。 */
@media (max-width: 800px) {
  .site-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    width: calc(100% - 20px);
    height: 56px;
    margin-top: 8px;
    padding: 6px 8px;
    top: 6px;
    border-radius: 16px;
  }
  .site-nav .wordmark { gap: 7px; min-width: 44px; min-height: 44px; justify-content: center; font-size: 11.5px; letter-spacing: 0; }
  .site-nav .wordmark picture { width: 32px; height: 36px; border-radius: 10px; }
  .site-nav .brand-logo-color { width: 25px; height: 25px; }
  /* 社交圆钮和图标一样放大到 44px 点按区,只在 561–800px 出现 */
  .site-nav .nav-social { padding-right: 10px; }
  .site-nav .nav-social-link { width: 44px; height: 44px; border-width: 1px; }
  .site-nav .nav-social-link svg { width: 20px; height: 20px; }
  .site-nav .nav-links {
    grid-row: auto;
    grid-column: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border-top: 0;
    font-size: 12px;
  }
  /* 条子内高正好 44px,点按区按 44x44 做,达到触控推荐尺寸 */
  .site-nav .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 7px;
    white-space: nowrap;
  }
  /* 手机上不要悬停浮起,但「万事屋」和当前页的实心胶囊必须保留:
     这里用 :not() 把它们排除在外,否则同特异度下会把底色抹成透明。 */
  .site-nav .nav-links a:not(.is-featured):not([aria-current="page"]):hover {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .site-nav .nav-links a.is-featured {
    padding: 0 10px;
    transform: none;
    box-shadow: 2px 2px 0 rgba(24, 37, 68, 0.18);
  }
  .site-nav .nav-links a.is-featured:hover { transform: none; }
  /* 「新」气泡在窄条里会压到相邻入口,手机端改用珊瑚色胶囊本身做强调 */
  .site-nav .nav-links a.is-featured::after { display: none; }
  .site-nav .nav-right { gap: 6px; }
  .site-nav .nav-join {
    min-height: 44px;
    padding: 3px 12px 3px 3px;
    font-size: 12px;
    gap: 6px;
  }
  .site-nav .nav-join svg { width: 13px; height: 13px; padding: 7px; }
}
@media (max-width: 560px) {
  .site-nav .nav-social { display: none; }
}
@media (max-width: 480px) {
  .site-nav .wordmark span { display: none; }
}
@media (max-width: 360px) {
  .site-nav { gap: 4px; padding-inline: 6px; }
  .site-nav .nav-join { justify-content: center; width: 44px; padding: 2px; }
  .site-nav .nav-join span { display: none; }
  .site-nav .nav-links a { padding: 0 4px; }
  .site-nav .nav-links a.is-featured { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav * { animation: none !important; transition: none !important; }
}