.site-header {
  --header-bg: #f7faf9; --line: #e3e6ed; --text: #17191f; --muted: #5c6370;
  --brand: #0f6e62; --brand-strong: #0c574e; --brand-soft: #e6f4f1;
  --bg-muted: #eef0f3; --on-brand: #ffffff; --focus: #0f6e62;
  --logo-sheet: #dff3ef; --logo-fold: #ffffff;
  color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.55;
}
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 28px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  max-width: 100%;
}
body:not(.page-explore) .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.site-header .logo {
  color: var(--brand);
  width: 40px;
  height: 40px;
  flex: none;
  display: block;
}
.site-header .brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
.site-header .brand-name {
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.site-header .brand-kicker {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.site-header .site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-width: 0;
  max-width: 100%;
}
.site-header .subject-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-muted);
}
.site-header .page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.site-header .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 650;
}
.site-header .nav-link:hover { background: var(--bg-muted); color: var(--text); }
.site-header .nav-link.active, .site-header .nav-link[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 750;
}
.site-header .nav-link.active:hover, .site-header .nav-link[aria-current="page"]:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.site-header .nav-link.subject-link {
  color: var(--muted);
  border: 0;
  background: transparent;
  padding: 0 14px;
}
.site-header .nav-link.subject-link:hover { background: transparent; color: var(--text); }
.site-header .nav-link.subject-link.on {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 750;
}
.site-header .nav-link.subject-link.on:hover { background: var(--brand); color: var(--on-brand); }
.site-header .nav-link.resource-search-btn {
  gap: 6px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand-strong);
  margin-left: 6px;
  text-decoration: none;
}
.site-header .nav-link.resource-search-btn:hover { background: var(--brand-soft); color: var(--brand-strong); }
.site-header .resource-search-ico { width: 14px; height: 14px; flex: none; }
.site-header .resource-search-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 720px) {
  .site-header .nav-link.resource-search-btn { margin-left: 0; padding: 0 9px; min-height: 36px; }
  .site-header .resource-search-ico { display: none; }
  .site-header { padding: 10px 14px 8px; gap: 4px 12px; }
  .site-header .brand { gap: 10px; min-height: 44px; }
  .site-header .logo { width: 34px; height: 34px; }
  .site-header .brand-name { font-size: 1.02rem; }
  .site-header .brand-kicker { font-size: 0.72rem; letter-spacing: 0.06em; }
  .site-header .site-nav { flex: 1 1 100%; justify-content: space-between; gap: 4px 8px; }
  .site-header .nav-link { padding: 0 8px; font-size: 0.9rem; }
  .site-header .nav-link.subject-link { padding: 0 12px; }
}