:root {
  --color-surface: #fefefe;
  --color-surface-alt: #f5f5f5;
  --color-surface-deep: #e9e8e8;
  --color-ink: #51484a;
  --color-ink-soft: #796d6f;
  --color-ink-muted: #857a7c;
  --color-line: #dfddde;
  --color-primary: #876e73;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #edeaeb;
  --color-accent: #da254c;
  --color-accent-ink: #ffffff;
  --color-highlight: #f8d7de;
  --color-focus: #e21843;
  --color-contrast-surface: #201d1e;
  --color-contrast-ink: #e7e4e5;
  --color-contrast-line: #4c494a;
  --color-contrast-accent: #e25573;
  --overlay-scrim: linear-gradient(180deg, rgba(32, 29, 30, 0.35) 0%, rgba(32, 29, 30, 0.72) 55%, rgba(32, 29, 30, 0.92) 100%);
  --font-heading: STZhongsong, "Source Han Serif SC", "Songti SC", SimSun, serif;
  --font-body: "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 10.7px;
  --text-sm: 15.1px;
  --text-base: 18px;
  --text-lg: 25.5px;
  --text-xl: 36.0px;
  --text-2xl: 50.9px;
  --text-3xl: 72.0px;
  --text-4xl: 101.7px;
  --text-display: clamp(37px, 7.6vw, 97px);
  --text-figure: clamp(31px, 5.5vw, 70px);
  --weight-heading: 430;
  --weight-body: 400;
  --leading-body: 1.85;
  --leading-heading: 1.23;
  --tracking-heading: -0.0em;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border-thin: 1px;
  --border-thick: 1px;
  --shadow-1: none;
  --shadow-2: none;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --container: 1000px;
  --measure: 60ch;
  --gutter: 24px;
  --section-y: 117px;
  --section-y-lg: 164px;
}

/* ------------------------------------------------------------
   1. Reset & 基础
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}

table { border-collapse: collapse; width: 100%; }

#main-content { display: block; scroll-margin-top: var(--space-8); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 0;
}

/* 全局链接：全站唯一稳定带色的元素 —— 下划线由细到显 */
a {
  color: var(--color-accent);
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.2s ease;
}

a:hover,
a:focus-visible { background-size: 100% 1px; }

/* 跳转链接 */
.skip-link {
  position: fixed;
  top: -6rem;
  left: var(--space-3);
  z-index: 200;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-contrast-surface);
  background-image: none;
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  transition: top 0.2s ease;
}

.skip-link:hover,
.skip-link:focus {
  top: var(--space-2);
  background-image: none;
  color: var(--color-contrast-accent);
}

/* ------------------------------------------------------------
   2. 排版工具
   ------------------------------------------------------------ */
.type-display {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-primary);
  margin: 0;
}

.type-h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-xl), 5.4vw, var(--text-3xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: 0;
}

.type-h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-lg), 3.6vw, var(--text-2xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: 0;
}

.type-h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-lg), 2.4vw, var(--text-xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  margin: 0;
}

.type-body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.type-small {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-ink-soft);
}

.type-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 44ch;
}

.measure { max-width: var(--measure); }

.figure-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-figure);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.prose { max-width: var(--measure); }

.prose > * + * { margin-top: var(--space-3); }

.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }

.prose p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.prose a {
  background-image: linear-gradient(
    color-mix(in srgb, currentColor 45%, transparent),
    color-mix(in srgb, currentColor 45%, transparent)
  );
  background-size: 100% 1px;
}

.prose a:hover,
.prose a:focus-visible {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
}

/* ------------------------------------------------------------
   3. 布局
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: var(--space-8); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }

/* ------------------------------------------------------------
   4. 按钮
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  color: var(--color-accent);
  padding-block: var(--space-2);
  padding-bottom: calc(var(--space-2) + 1px);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.2s ease;
}

.btn::after {
  content: "→";
  font-family: var(--font-mono);
  opacity: 0.55;
  transform: translateX(0);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.btn:hover,
.btn:focus-visible { background-size: 100% 1px; color: var(--color-accent); }

.btn:hover::after,
.btn:focus-visible::after { transform: translateX(4px); opacity: 1; }

.btn--boxed {
  background-color: var(--color-contrast-surface);
  background-image: none;
  color: var(--color-contrast-ink);
  padding: var(--space-3) var(--space-4);
  letter-spacing: 0.14em;
}

.btn--boxed:hover,
.btn--boxed:focus-visible {
  background-image: none;
  background-color: var(--color-contrast-surface);
  color: var(--color-contrast-accent);
}

.btn--boxed::after { color: var(--color-contrast-accent); opacity: 0.9; }

/* ------------------------------------------------------------
   5. 面包屑
   ------------------------------------------------------------ */
.breadcrumb { margin-bottom: var(--space-6); }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-ink-muted);
}

.breadcrumb-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.breadcrumb-list li + li::before {
  content: "/";
  color: var(--color-line);
  font-family: var(--font-mono);
}

.breadcrumb-list a {
  color: var(--color-ink-muted);
  background-size: 0 1px;
}

.breadcrumb-list a:hover,
.breadcrumb-list a:focus-visible {
  color: var(--color-accent);
  background-size: 100% 1px;
}

.breadcrumb-list [aria-current="page"] { color: var(--color-ink); }

/* ------------------------------------------------------------
   6. 索引条目与年度带
   ------------------------------------------------------------ */
.index-list { border-top: 0; }

.index-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
}

.index-row + .index-row { padding-top: var(--space-4); }

.index-row__meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
}

.index-row__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-ink);
}

.index-row__title a {
  color: var(--color-ink);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0 1px;
}

.index-row__title a:hover,
.index-row__title a:focus-visible {
  color: var(--color-accent);
  background-size: 100% 1px;
}

.index-row__fields {
  grid-column: 2;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-ink-soft);
}

.index-row__route {
  grid-column: 2;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
  opacity: 0;
  transition: opacity 0.22s ease, color 0.22s ease;
}

.index-row:hover .index-row__route,
.index-row:focus-within .index-row__route {
  opacity: 1;
  color: var(--color-accent);
}

.year-band {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-4) var(--space-2);
}

.year-band__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-figure);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.year-band__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.section-marker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  transition: color 0.2s ease;
}

.section-marker.is-current { color: var(--color-accent); }

/* ------------------------------------------------------------
   7. 媒体容器
   ------------------------------------------------------------ */
.media {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-surface-deep);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media--wide { aspect-ratio: 16 / 7; }
.media--standard { aspect-ratio: 4 / 3; }
.media--tall { aspect-ratio: 3 / 4; }
.media--narrow { aspect-ratio: 2 / 3; }
.media--square { aspect-ratio: 1 / 1; }
.media--band { aspect-ratio: 21 / 9; }

.media-scrim {
  position: absolute;
  inset: 0;
  background-image: var(--overlay-scrim);
  pointer-events: none;
}

.media-caption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: end;
}

/* ------------------------------------------------------------
   8. 深色区块
   ------------------------------------------------------------ */
.contrast-block {
  background-color: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.contrast-block .type-display,
.contrast-block .type-h1,
.contrast-block .type-h2,
.contrast-block .type-h3 { color: var(--color-contrast-ink); }

.contrast-block .type-body,
.contrast-block .lede,
.contrast-block .type-small { color: var(--color-contrast-ink); }

.contrast-block .eyebrow,
.contrast-block .figure-num { color: var(--color-contrast-accent); }

.contrast-block a { color: var(--color-contrast-accent); }

/* ------------------------------------------------------------
   9. 显现动效
   ------------------------------------------------------------ */
.reveal { opacity: 1; transform: none; }

.js-on .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   10. 顶部导航
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--color-surface);
}

.progress-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 90;
  background-color: transparent;
  pointer-events: none;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--color-accent);
  transition: width 0.08s linear;
}

.header-inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  background-image: none;
  padding-bottom: 0;
}

.brand:hover,
.brand:focus-visible { background-image: none; color: var(--color-ink); }

.brand-mark {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-base);
  line-height: 1.1;
  letter-spacing: 0.16em;
  color: var(--color-ink);
}

.brand-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  line-height: 1.1;
  color: var(--color-ink-muted);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--color-ink);
}

.nav-toggle-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-ink-soft);
}

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
  height: 12px;
}

.nav-toggle-bars i {
  display: block;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  transition: transform 0.24s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.site-nav { display: flex; align-items: center; }

.nav-list {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.nav-list a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  color: var(--color-ink-soft);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0 1px;
  transition: color 0.2s ease, background-size 0.28s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--color-accent);
  background-size: 100% 1px;
}

.nav-list a[aria-current="page"] {
  color: var(--color-accent);
  background-size: 100% 1px;
}

/* ------------------------------------------------------------
   11. 页脚
   ------------------------------------------------------------ */
.site-footer {
  margin-top: var(--section-y-lg);
  background-color: var(--color-surface);
}

.footer-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-6);
}

.footer-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
}

.footer-kicker {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.footer-brand {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.footer-note {
  max-width: 38ch;
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--color-ink-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, var(--space-6));
  padding-top: var(--space-6);
}

.footer-col-title {
  font-family: var(--font-mono);
  font-weight: var(--weight-body);
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-list a {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0 1px;
  transition: color 0.2s ease, background-size 0.28s ease;
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--color-accent);
  background-size: 100% 1px;
}

.footer-list--plain li {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-ink-soft);
  word-break: break-word;
}

.footer-base {
  background-color: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.footer-base-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}

.footer-legal {
  grid-column: span 6;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: color-mix(in srgb, var(--color-contrast-ink) 72%, transparent);
}

.footer-contact {
  grid-column: span 6;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-contrast-ink);
}

/* ------------------------------------------------------------
   12. 响应式
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .footer-grid { gap: var(--space-4); }
}

@media (max-width: 860px) {
  .header-inner { padding-block: var(--space-2); }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--color-surface);
    padding: var(--space-4) var(--gutter) var(--space-6);
  }

  .site-nav[data-open] { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .nav-list a {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    letter-spacing: 0.1em;
    color: var(--color-ink);
  }

  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9 { grid-column: span 12; }

  .grid { gap: var(--space-4); }

  .index-row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .index-row__fields,
  .index-row__route { grid-column: 2; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-legal,
  .footer-contact { grid-column: span 12; }
}

@media (max-width: 620px) {
  .section { padding-block: var(--space-8); }
  .section--lg { padding-block: var(--space-8); }

  .brand-meta { display: none; }

  .index-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .index-row__fields,
  .index-row__route { grid-column: 1; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  .footer-lead { margin-bottom: var(--space-6); }
}

/* ------------------------------------------------------------
   13. 降低动效
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js-on .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .progress-bar { transition: none; }

  .btn::after,
  .nav-toggle-bars i,
  .index-row__route,
  .skip-link { transition: none; }
}