/* =========================================================
   layout.css - 页面骨架：容器、栅格、区块节奏
   ========================================================= */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1340px);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

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

/* 区块标题：标题在上，说明在下，不做左右分栏 */
.section__head {
  max-width: 44ch;
  margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}

.section__title {
  font-size: var(--fs-2xl);
  letter-spacing: -0.03em;
}

.section__note {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  max-width: 46ch;
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* 12 列栅格，只在需要非对称时用 */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: calc(var(--z-nav) + 10);
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

@media (max-width: 767px) {
  .grid12 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}