/* ============================================
   智乐园 · AgentWish — 统一导航 / 页脚（组件样式）
   仅含导航与页脚所需样式，不含全局 reset，
   故可安全挂到尚未整体接入「纸墨」的页面（如各子应用），
   不影响其自身布局。纸墨三色：纸白 / 墨黑 / 朱砂。
   ============================================ */

:root {
  --paper: #FAF8F4;
  --paper-deep: #F3F0E9;
  --ink: #1C1B18;
  --ink-soft: #5C5850;
  --ink-faint: #918C80;
  --hairline: #E3DED2;
  --cinnabar: #9E2F23;
  --cinnabar-soft: #B8524533;

  --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 72px;

  --r-sm: 2px; --r-md: 3px; --r-lg: 4px;

  --f-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,244,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .nav-inner {
  display: flex; align-items: center; gap: var(--s-8);
  height: 64px; max-width: 1040px; margin: 0 auto; padding: 0 var(--s-6);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-serif); font-weight: 700; font-size: 19px;
  letter-spacing: .08em; flex-shrink: 0; color: var(--ink);
}
.brand .logo-dot {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--cinnabar); color: var(--paper);
  display: grid; place-items: center;
  font-size: 16px; font-family: var(--f-serif); font-weight: 600;
}
.nav-links { display: flex; gap: var(--s-6); flex: 1; }
.nav-links a {
  font-size: 14.5px; color: var(--ink-soft);
  letter-spacing: .04em; padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--cinnabar); border-bottom-color: var(--cinnabar); font-weight: 600; }
.nav-me {
  font-size: 13.5px; color: var(--ink-faint);
  letter-spacing: .04em; flex-shrink: 0; text-decoration: none;
  transition: color .15s;
}
.nav-me:hover { color: var(--cinnabar); }
.nav-toggle { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink); }

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--paper-deep);
  padding: var(--s-12) 0 var(--s-8);
  margin-top: var(--s-16);
  font-size: 13.5px; color: var(--ink-soft);
}
.site-footer .container { max-width: 1040px; margin: 0 auto; padding: 0 var(--s-6); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-8); margin-bottom: var(--s-8); }
.footer-grid h4 { font-size: 14px; color: var(--ink); margin-bottom: var(--s-3); letter-spacing: .06em; font-family: var(--f-serif); }
.footer-grid a { display: block; padding: 3px 0; color: var(--ink-soft); text-decoration: none; }
.footer-grid a:hover { color: var(--cinnabar); }
.footer-bottom {
  border-top: 1px solid var(--hairline); padding-top: var(--s-4);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-size: 12.5px; color: var(--ink-faint);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--paper); flex-direction: column; padding: var(--s-4) var(--s-6);
    gap: var(--s-3); border-bottom: 1px solid var(--hairline);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-me { display: none; }
}