/* ===== Design Tokens ===== */
    :root {
      --bg-page: #f7f5f2;
      --bg-card: #ffffff;
      --text-primary: #1a1a1a;
      --text-secondary: #4a4a4a;
      --text-muted: #7a7a7a;
      --accent: #5b6e7a;
      --accent-light: #d5dde3;
      --accent-faint: #e8edf0;
      --border: #e0ddd8;
      --border-light: #ecebe7;
      --ink-wash-1: #d5dde3;
      --ink-wash-2: #c8d4dc;
      --ink-wash-3: #e8edf0;
      --pullquote-bg: #f3f1ed;

      --font-display: 'Playfair Display', 'Noto Serif SC', Georgia, 'Songti SC', serif;
      --font-body: Georgia, 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', serif;
      --font-chinese: 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', serif;

      --max-width: 720px;
      --line-height-body: 1.9;
      --line-height-heading: 1.3;
      --space-xs: 0.4rem;
      --space-sm: 0.8rem;
      --space-md: 1.6rem;
      --space-lg: 3.2rem;
      --space-xl: 5.6rem;
      --space-2xl: 8rem;
    }

    /* ===== Reset & Base ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 17px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: var(--font-body);
      color: var(--text-primary);
      background: var(--bg-page);
      line-height: var(--line-height-body);
      padding: 0;
    }

    /* ===== Ink-wash decorative background ===== */
    body::before {
      content: '';
      position: fixed;
      top: -20%;
      right: -10%;
      width: 60vmax;
      height: 60vmax;
      background:
        radial-gradient(ellipse at 60% 40%, rgba(213, 221, 227, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 70%, rgba(200, 212, 220, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(232, 237, 240, 0.25) 0%, transparent 45%);
      pointer-events: none;
      z-index: 0;
    }

    /* ===== Layout ===== */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 1.6rem;
      position: relative;
      z-index: 1;
    }

    /* ===== Header / Hero ===== */
    header {
      padding: var(--space-2xl) 0 var(--space-xl);
      text-align: left;
      position: relative;
    }

    header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, var(--accent), var(--border-light) 60%, transparent);
    }

    .article-label {
      font-family: var(--font-body);
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--space-md);
    }

    h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 2.4rem;
      line-height: 1.25;
      color: var(--text-primary);
      margin-bottom: var(--space-sm);
      letter-spacing: -0.01em;
    }

    .subtitle {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 600px;
      font-style: italic;
    }

    .meta-line {
      margin-top: var(--space-md);
      font-size: 0.8rem;
      color: var(--text-muted);
      font-family: var(--font-body);
    }

    .meta-line span {
      display: inline-block;
      margin-right: 1.2rem;
    }

    /* ===== Typography ===== */
    h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.7rem;
      line-height: var(--line-height-heading);
      color: var(--text-primary);
      margin-top: var(--space-xl);
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-xs);
    }

    h2 .section-num {
      font-weight: 400;
      color: var(--accent);
      margin-right: 0.3rem;
    }

    h3 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.2rem;
      line-height: var(--line-height-heading);
      color: var(--text-primary);
      margin-top: var(--space-lg);
      margin-bottom: var(--space-sm);
    }

    h4 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1rem;
      line-height: var(--line-height-heading);
      color: var(--accent);
      margin-top: var(--space-md);
      margin-bottom: var(--space-xs);
      letter-spacing: 0.02em;
    }

    p {
      margin-bottom: var(--space-md);
      text-align: left;
    }

    a {
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid var(--accent-light);
      transition: border-color 0.2s;
    }

    a:hover {
      border-color: var(--accent);
    }

    /* ===== Pull Quotes ===== */
    blockquote {
      margin: var(--space-lg) 0;
      padding: var(--space-md) var(--space-lg);
      background: var(--pullquote-bg);
      border-left: 3px solid var(--accent);
      font-family: var(--font-body);
    }

    blockquote p {
      font-size: 1.05rem;
      font-style: italic;
      color: var(--text-secondary);
      line-height: 1.8;
      margin-bottom: 0;
    }

    blockquote .attribution {
      display: block;
      margin-top: var(--space-sm);
      font-size: 0.82rem;
      font-style: normal;
      color: var(--text-muted);
    }

    blockquote footer {
      display: block;
      margin-top: var(--space-sm);
      margin-bottom: 0;
      padding: 0;
      border-top: none;
      font-size: 0.82rem;
      font-style: normal;
      color: var(--text-muted);
    }

    /* Inline pull quote (more subtle for shorter quotes) */
    .pull-inline {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-style: italic;
      color: var(--accent);
      line-height: 1.5;
      padding: var(--space-md) 0;
      margin: var(--space-md) 0 var(--space-lg);
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
    }

    /* ===== Section Divider ===== */
    .section-divider {
      border: none;
      height: 1px;
      background: var(--border-light);
      margin: var(--space-xl) 0;
    }

    hr.section-divider--accent {
      height: 2px;
      background: linear-gradient(to right, var(--accent-light), transparent);
      width: 30%;
      margin: var(--space-2xl) 0 var(--space-lg);
    }

    /* ===== Tables ===== */
    .table-wrapper {
      overflow-x: auto;
      margin: var(--space-md) 0 var(--space-lg);
      -webkit-overflow-scrolling: touch;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-body);
      font-size: 0.88rem;
      line-height: 1.6;
    }

    thead th {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.82rem;
      letter-spacing: 0.03em;
      text-align: left;
      padding: 0.7rem 0.9rem;
      background: var(--bg-page);
      border-bottom: 2px solid var(--accent);
      color: var(--text-primary);
      white-space: nowrap;
    }

    tbody td {
      padding: 0.7rem 0.9rem;
      border-bottom: 1px solid var(--border-light);
      vertical-align: top;
    }

    tbody tr:last-child td {
      border-bottom: 1px solid var(--border);
    }

    tbody tr:hover {
      background: var(--accent-faint);
    }

    .table-caption {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: var(--space-xs);
      font-style: italic;
    }

    /* ===== Framework Cards (minimal) ===== */
    .framework {
      margin: var(--space-lg) 0;
      padding: 0;
      border: none;
    }

    .framework__label {
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      border-bottom: 2px solid var(--accent-light);
      padding-bottom: 0.25rem;
      margin-bottom: var(--space-sm);
    }

    .framework__claim {
      font-weight: 600;
    }

    .framework__limit {
      padding: var(--space-sm) var(--space-md);
      margin-top: var(--space-sm);
      border-left: 2px solid var(--border);
      font-size: 0.92rem;
      color: var(--text-secondary);
    }

    .framework__limit::before {
      content: '边界 · ';
      font-style: italic;
      color: var(--text-muted);
      font-size: 0.82rem;
    }

    /* ===== Three Lenses ===== */
    .lens {
      margin: var(--space-lg) 0;
    }

    .lens h3 {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
    }

    .lens__tag {
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--accent);
      background: var(--accent-faint);
      padding: 0.15rem 0.6rem;
    }

    /* ===== Failure Modes ===== */
    .failure {
      margin: var(--space-lg) 0;
      padding: var(--space-md) var(--space-lg);
      border-left: 3px solid var(--border);
      background: var(--bg-page);
    }

    .failure h4 {
      color: var(--text-primary);
      font-weight: 700;
      font-size: 0.95rem;
      margin-top: 0;
    }

    .failure p {
      font-size: 0.92rem;
      margin-bottom: var(--space-sm);
    }

    .failure p:last-child {
      margin-bottom: 0;
    }

    .failure__mode {
      font-weight: 600;
      color: var(--accent);
    }

    .failure__boundary {
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    /* ===== Footer ===== */
    footer {
      margin-top: var(--space-2xl);
      padding: var(--space-xl) 0 var(--space-lg);
      border-top: 1px solid var(--border-light);
    }

    footer h3 {
      font-size: 1rem;
      color: var(--accent);
      margin-top: 0;
    }

    footer ul {
      list-style: none;
      padding: 0;
      columns: 2;
      column-gap: var(--space-lg);
    }

    footer li {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.8;
      break-inside: avoid;
    }

    footer .colophon {
      margin-top: var(--space-lg);
      font-size: 0.75rem;
      color: var(--text-muted);
      border-top: 1px solid var(--border-light);
      padding-top: var(--space-md);
    }

    /* ===== Small caps and annotations ===== */
    .small-caps {
      font-family: var(--font-display);
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .annotation {
      font-size: 0.88rem;
      color: var(--text-secondary);
      background: var(--bg-page);
      padding: var(--space-sm) var(--space-md);
      margin: var(--space-sm) 0 var(--space-md);
      border-radius: 0;
    }

    .term {
      font-style: italic;
      color: var(--accent);
    }

    /* ===== Principle Cards ===== */
    .principle {
      margin: var(--space-lg) 0;
      padding: var(--space-md) 0;
      border-bottom: 1px solid var(--border-light);
    }

    .principle:last-child {
      border-bottom: none;
    }

    .principle__title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--text-primary);
      margin-bottom: var(--space-xs);
    }

    .principle__title .orig {
      font-weight: 400;
      color: var(--accent);
      font-size: 0.92rem;
    }

    /* ===== Scenario callout ===== */
    .scenario {
      margin: var(--space-md) 0;
      padding: var(--space-sm) var(--space-md);
      border-left: 2px solid var(--accent-light);
      font-size: 0.92rem;
      color: var(--text-secondary);
      background: none;
    }

    .scenario::before {
      content: '场景 · ';
      font-style: italic;
      color: var(--text-muted);
      font-size: 0.82rem;
    }

    /* ===== Responsive ===== */
    @media (max-width: 600px) {
      html {
        font-size: 15px;
      }

      .container {
        padding: 0 1.2rem;
      }

      h1 {
        font-size: 1.8rem;
      }

      h2 {
        font-size: 1.35rem;
      }

      blockquote {
        padding: var(--space-sm) var(--space-md);
        margin: var(--space-md) 0;
      }

      thead th,
      tbody td {
        padding: 0.5rem 0.6rem;
        font-size: 0.82rem;
      }

      footer ul {
        columns: 1;
      }

      .failure {
        padding: var(--space-sm) var(--space-md);
      }
    }

    @media (min-width: 1200px) {
      html {
        font-size: 18px;
      }
    }

    /* ===== Print ===== */
    @media print {
      body::before {
        display: none;
      }

      header::after {
        background: #ccc;
      }
    }

    /* ===== Back link (to index) ===== */
    .back-link {
      margin-bottom: var(--space-xs);
    }

    .back-link a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      transition: color 0.2s;
    }

    .back-link a:hover {
      color: var(--accent);
    }

    /* ===== Variant highlight for key textual differences ===== */
    .variant-critical {
      background: var(--accent-faint);
      padding: 0.15em 0.4em;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
    }
    .variant-warning {
      background: #fdf3e4;
      padding: 0.15em 0.4em;
      font-weight: 600;
      white-space: nowrap;
    }

    /* ===== Conflict declaration list ===== */
    .conflict-list {
      list-style: none;
      padding: 0;
      counter-reset: conflict;
    }
    .conflict-list li {
      counter-increment: conflict;
      margin-bottom: var(--space-md);
      padding: var(--space-sm) var(--space-md);
      border-left: 3px solid var(--accent-light);
      background: var(--bg-page);
      font-size: 0.94rem;
      line-height: 1.75;
    }
    .conflict-list li::before {
      content: counter(conflict) " · ";
      font-family: var(--font-display);
      font-weight: 600;
      color: var(--accent);
      font-size: 0.82rem;
    }
    .conflict-list .conflict-tag {
      display: inline-block;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-faint);
      padding: 0.1em 0.5em;
      margin-left: 0.5em;
      vertical-align: middle;
    }

    /* ===== Cross-cultural star rating ===== */
    .star-rating {
      white-space: nowrap;
      font-size: 0.88rem;
      letter-spacing: 0.08em;
    }
    .star-rating .star-on {
      color: var(--accent);
    }
    .star-rating .star-off {
      color: var(--border);
    }
    .star-rating .star-label {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-left: 0.2em;
      letter-spacing: 0;
    }

    /* ===== Research boundary list ===== */
    .boundary-list {
      list-style: none;
      padding: 0;
    }
    .boundary-list li {
      margin-bottom: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-left: 2px solid var(--border);
      font-size: 0.94rem;
      color: var(--text-secondary);
    }
    .boundary-list li::before {
      content: '△ ';
      color: var(--accent);
      font-size: 0.8rem;
    }

    /* ===== G0 quality gate callout ===== */
    .quality-gate {
      margin: var(--space-lg) 0;
      padding: var(--space-md) var(--space-lg);
      background: var(--bg-page);
      border: 1px solid var(--border-light);
    }
    .quality-gate h4 {
      color: var(--accent);
      font-weight: 600;
      margin-top: 0;
      margin-bottom: var(--space-sm);
    }
    .quality-gate p {
      font-size: 0.92rem;
      margin-bottom: var(--space-xs);
    }

    /* ===== Section label for large cards ===== */
    .section-label {
      font-family: var(--font-display);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      display: block;
      margin-bottom: var(--space-xs);
    }

    /* ===== Tighten framework internal tables ===== */
    .framework table {
      margin-top: var(--space-sm);
    }

    /* ===== Chapter badge in textual criticism ===== */
    .chapter-badge {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      color: var(--accent);
      background: var(--accent-faint);
      padding: 0.15em 0.6em;
      margin-right: 0.4em;
      vertical-align: middle;
    }

/* === v2.1 additions for DDJ#15 慎终如始 === */

/* 机制链条——过程化展示（如：快做完了→想结果→搞砸） */
.mechanism-chain {
  text-align: center;
  font-style: italic;
  color: var(--accent);
  padding: 1rem 0;
}

/* 节末总结段——跨文化/收束性结论 */
.section-summary {
  margin-top: 1.5rem;
}