/* ============================================
   Layout v3 — 科技学术型
   ============================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-body {
  padding-top: var(--nav-h);
  min-height: 100vh;
}

.section {
  padding: var(--section-pad) 0;
}

.section-rule {
  border-top: 1px solid var(--rule);
}

.section-off {
  background: var(--off-white);
}

.section-gold {
  background: var(--gold-whisper);
}

/* 栅格 */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* 区块标题 */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: var(--space-md);
}

.section-head { margin-bottom: var(--space-2xl); }

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-sm);
}

.section-head .lead {
  font-size: var(--fs-body-lg);
  color: var(--ink-muted);
  max-width: 540px;
  line-height: var(--lh-relaxed);
}

.section-head.center { text-align: center; }
.section-head.center .lead { margin: 0 auto; }

/* 分隔线 */
.rule {
  width: 32px;
  height: 2px;
  background: var(--gold);
  border: none;
  margin: var(--space-md) 0;
}

.rule-center { margin-left: auto; margin-right: auto; }

/* 滚动渐入 */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }