/* 顶部导航
   默认：暖白底（内页）
   .over：透明悬浮在首页照片上，白字
   .over.solid：首页向下滚动后，深色半透明底 */
.hd { position: fixed; z-index: 10; width: 100%; top: 0; left: 0; --nav-fg: var(--ink-soft); --nav-on: var(--accent-dark); }
.hd-bar {
  height: 4rem; display: flex; width: 100%; position: relative; z-index: 10;
  background: rgba(250, 247, 242, .96); border-bottom: 1px solid var(--line);
  transition: background-color .35s, border-color .35s, backdrop-filter .35s;
}
.hd.over { --nav-fg: rgba(255, 255, 255, .88); --nav-on: var(--accent); }
.hd.over .hd-bar { background: transparent; border-color: transparent; }
.hd.over.solid .hd-bar { background: rgba(26, 26, 26, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hd.over:not(.solid) .nav-item > a { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

.hd-burger {
  position: absolute; left: 0; top: 0; height: 100%; width: 72px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--nav-fg);
}
.hd-burger svg { width: 28px; height: 28px; }
.hd-mobile { width: 100%; position: absolute; top: 4rem; display: none; max-height: calc(100vh - 4rem); overflow-y: auto; background: var(--paper); }
.hd-mobile.open { display: block; box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }
.m-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); padding: 1rem 0; color: var(--ink-soft); cursor: pointer;
}
.m-item .m-name { font-size: 1rem; letter-spacing: .04em; width: 100%; text-align: center; }
.m-item .m-name.has-sub { border-bottom: 1px dashed var(--line); padding-bottom: .75rem; }
.m-item .m-sub { margin-top: .75rem; font-size: .875rem; }
.m-item a:hover { color: var(--accent-dark); }

.hd-nav { display: none; width: 100%; margin: 0 auto; justify-content: space-around; align-items: center; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.nav-item > a {
  display: flex; align-items: center; min-width: 100px; height: 100%; position: relative;
  font-size: .95rem; letter-spacing: .04em; color: var(--nav-fg); transition: color .2s;
}
.nav-item > a:hover { color: var(--nav-on); }
.nav-item > a.active::after {
  content: ""; position: absolute; left: 0; bottom: 18px; width: 18px; height: 1px; background: var(--nav-on);
}
.nav-item .chev { width: 16px; height: 16px; margin: 2px 0 0 4px; opacity: .8; }
.nav-drop {
  display: none; position: absolute; top: 4rem; left: -40%; width: 180px; padding: 4px 1rem;
  background: rgba(250, 247, 242, .98); border-top: 1px solid var(--accent-dark);
  flex-direction: column; box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
}
.hd.over .nav-drop { background: rgba(26, 26, 26, .86); border-top-color: var(--accent); backdrop-filter: blur(8px); }
.nav-drop.show { display: flex; }
.nav-drop a { display: block; padding: .9rem 0; text-align: center; font-size: .875rem; color: var(--nav-fg); border-bottom: 1px solid var(--line); }
.hd.over .nav-drop a { border-bottom-color: rgba(255, 255, 255, .12); }
.nav-drop a:last-child { border-bottom: 0; }
.nav-drop a:hover { color: var(--nav-on); }

@media (min-width: 1024px) {
  .hd-burger, .hd-mobile { display: none !important; }
  .hd-nav { display: flex; }
}
@media (min-width: 1024px) { .hd-nav { max-width: 1024px; } }
@media (min-width: 1280px) { .hd-nav { max-width: 1280px; } }
@media (min-width: 1536px) { .hd-nav { max-width: 1536px; } }