@font-face {
  font-family: "Noto Serif SC VF";
  src: url("../assets/fonts/noto-serif-sc-vf.woff2?v=20260912-brand-h1-r6") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page-max: 1180px;
  --nav-height: 68px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Noto Serif SC VF", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --ease: cubic-bezier(.2, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }

/* 高对比模式(2026-08-04):两站各自已有全局 :focus-visible(2px 描边),这里不重复
   定义,只在用户显式要求高对比时把描边加粗。放在 _shared 是因为它对两站都成立,
   而两站原本都没处理这一档。 */
@media (prefers-contrast: more) {
  :focus-visible { outline-width: 3px; }
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  /* 跳转链接聚焦后是真能点的，给足触控高度（实测原来 40px）。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f5f2eb;
  color: #11151f;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.eco-nav {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(24px, calc((100vw - var(--page-max)) / 2));
  border-bottom: 1px solid var(--nav-line, rgba(255,255,255,.1));
  background: var(--nav-bg, rgba(7, 10, 20, .76));
  backdrop-filter: blur(22px) saturate(130%);
}

.eco-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: .86rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}

.eco-brand::before {
  content: "";
  width: 14px;
  height: 19px;
  border-radius: 70% 30% 62% 38%;
  background: linear-gradient(145deg, var(--brand-mark-a, #f6c66b), var(--brand-mark-b, #936cff));
  box-shadow: 0 0 24px color-mix(in srgb, var(--brand-mark-a, #f6c66b) 42%, transparent);
  transform: rotate(23deg);
}

.eco-links {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.eco-links::-webkit-scrollbar { display: none; }

.eco-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--nav-muted, rgba(255,255,255,.58));
  font-size: .78rem;
  letter-spacing: .035em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}

.eco-links a:hover {
  color: var(--nav-text, #fff);
  background: rgba(255,255,255,.06);
}

.eco-links a[aria-current="page"] {
  color: var(--nav-text, #fff);
  background: var(--nav-active, rgba(255,255,255,.09));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--badge-line, rgba(255,255,255,.14));
  border-radius: 999px;
  background: var(--badge-bg, rgba(255,255,255,.055));
  color: var(--badge-text, rgba(255,255,255,.72));
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .12em;
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--button-line, rgba(255,255,255,.16));
  border-radius: 999px;
  background: var(--button-bg, rgba(255,255,255,.07));
  color: var(--button-text, #fff);
  font-size: .82rem;
  font-weight: 720;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  border-color: var(--button-hover-line, rgba(255,255,255,.34));
  background: var(--button-hover-bg, rgba(255,255,255,.11));
}

.button-arrow::after { content: "↗"; font-size: .95em; }

.site-footer {
  position: relative;
  padding: 70px max(24px, calc((100vw - var(--page-max)) / 2)) 44px;
  border-top: 1px solid var(--footer-line, rgba(255,255,255,.1));
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 48px;
  align-items: end;
}

.footer-motto {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3vw, 2.4rem);
  line-height: 1.3;
}

.footer-unity {
  margin: 14px 0 0;
  color: var(--footer-muted, rgba(255,255,255,.5));
  font-size: .8rem;
  letter-spacing: .08em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--footer-muted, rgba(255,255,255,.5));
  font-size: .76rem;
  text-decoration: none;
}
.footer-links a:hover { color: var(--footer-text, #fff); }

.footer-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 44px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--footer-line, rgba(255,255,255,.08));
  /* 2026-08-04:两站都用实色覆盖了 --footer-faint(creor #8b96b0 ≈6.7:1、
     aielim #9c9296 ≈6.6:1,都过 AA),但**兜底值** rgba(255,255,255,.34) 只有
     约 3:1 —— 将来新站忘了设 token 就会静默不合规。顺手把兜底提到 ≈5.5:1。
     字号 .68rem(~11px)对版权/备案这类必须能读的信息偏小,小幅上调,不动布局。 */
  color: var(--footer-faint, rgba(255,255,255,.56));
  font-size: .74rem;
}

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 680ms var(--ease), transform 680ms var(--ease);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px) {
  :root { --nav-height: 62px; }
  .eco-nav {
    gap: 10px;
    padding-inline: 16px;
  }
  .eco-brand { font-size: .74rem; }
  .eco-links { margin-right: -4px; }
  .eco-links a { padding-inline: 9px; font-size: .7rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-meta { flex-direction: column; }
}

@media (max-width: 480px) {
  :root { --nav-height: 58px; }
  .eco-nav {
    gap: 4px;
    padding-inline: 8px;
  }
  .eco-brand {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    gap: 0;
    letter-spacing: 0;
  }
  .eco-brand-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .eco-brand::before {
    width: 10px;
    height: 14px;
    flex: none;
  }
  .eco-links {
    min-width: 0;
    flex: 1;
    justify-content: space-between;
    gap: 2px;
    margin-right: 0;
    overflow: visible;
  }
  .eco-links a {
    min-height: 44px;
    padding-inline: 4px;
    font-size: .68rem;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}