/* ============================================================
   layout.css — 容器、网格、出血、分隔线、章节头
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--wide {
  max-width: 1600px;
}

/* ── 12 列网格 ───────────────────────────────────── */

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

@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

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

  .grid > * {
    grid-column: 1 / -1 !important;
  }
}

/* 列位工具类 */
.c-1-5 { grid-column: 1 / 6; }
.c-1-6 { grid-column: 1 / 7; }
.c-1-7 { grid-column: 1 / 8; }
.c-1-8 { grid-column: 1 / 9; }
.c-2-7 { grid-column: 2 / 8; }
.c-6-12 { grid-column: 6 / 13; }
.c-7-12 { grid-column: 7 / 13; }
.c-8-12 { grid-column: 8 / 13; }
.c-9-12 { grid-column: 9 / 13; }
.c-full { grid-column: 1 / -1; }

@media (max-width: 1023px) {
  .c-1-5 { grid-column: 1 / 5; }
  .c-1-6 { grid-column: 1 / 6; }
  .c-1-7 { grid-column: 1 / 7; }
  .c-1-8 { grid-column: 1 / 7; }
  .c-2-7 { grid-column: 1 / 7; }
  .c-6-12 { grid-column: 5 / 9; }
  .c-7-12 { grid-column: 1 / 9; }
  .c-8-12 { grid-column: 5 / 9; }
  .c-9-12 { grid-column: 6 / 9; }
}

/* ── 章节 ────────────────────────────────────────── */

.section {
  position: relative;
  padding-block: var(--sp-section);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.section--tight {
  padding-block: clamp(56px, 8vw, 120px);
}

/* 深色出血块：形成「翻页」般的深浅交替 */
.section--dark {
  background: var(--c-brand-deep);
  color: var(--c-text-inv);
  overflow: hidden;
}

.section--ink {
  background: var(--c-ink);
  color: var(--c-text-inv);
  overflow: hidden;
}

.section--paper2 {
  background: var(--c-paper-2);
}

/* ── 章节头：序号 / 中文标题 / 英文副题 / 通栏线 ─── */

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: var(--rule);
  margin-bottom: clamp(40px, 6vw, 88px);
}

.section--dark .section-head,
.section--ink .section-head {
  border-bottom-color: var(--c-rule-inv);
}

.section-head__no {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-en-caps);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.section-head__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
}

.section--dark .section-head__title,
.section--ink .section-head__title {
  font-family: var(--font-sans);
  font-weight: 600;
}

.section-head__en {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-en-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
}

.section--dark .section-head__en,
.section--ink .section-head__en {
  color: var(--c-text-inv-faint);
}

@media (max-width: 767px) {
  .section-head {
    grid-template-columns: auto 1fr;
    row-gap: var(--sp-2);
  }

  .section-head__en {
    grid-column: 1 / -1;
  }
}

/* ── 背景水印数字 ────────────────────────────────── */

.watermark {
  position: absolute;
  font-family: var(--font-num);
  font-size: var(--fs-watermark);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-num);
  color: var(--c-rule);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.section--dark .watermark,
.section--ink .watermark {
  color: rgba(255, 255, 255, 0.055);
}

.watermark--tr {
  top: clamp(24px, 4vw, 56px);
  right: var(--pad-x);
}

.watermark--tl {
  top: clamp(24px, 4vw, 56px);
  left: var(--pad-x);
}

/* ── 分隔线 ──────────────────────────────────────── */

.rule {
  border: 0;
  border-top: var(--rule);
}

.rule--inv {
  border-top-color: var(--c-rule-inv);
}

.rule--strong {
  border-top: var(--rule-strong);
}

/* ── 层级工具 ────────────────────────────────────── */

.u-rel {
  position: relative;
  z-index: 1;
}

.u-flow > * + * {
  margin-top: var(--flow, var(--sp-5));
}