/* ==========================================================================
   PiLive — Reset / 排版基座 / 通用工具
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper-1);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 全局纸纹：让纯白有"纸"的呼吸，而不是屏幕塑料 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.022;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

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

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

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

::selection {
  background: var(--violet-a30);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   排版原语
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink-900);
  margin: 0;
}

/* 衬线用于编辑性时刻：主标题、引言、大数字 —— 与界面无衬线形成真实配对 */
.display--serif {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.96;
}

.h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.h1--serif {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.018em;
}

.h2 {
  font-size: var(--t-h2);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}

.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}

/* 小号标签 —— 中文界面用正常字距，不做全大写与宽字距 */
.kicker {
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink-400);
}

.kicker--signal { color: var(--violet); }

/* 纯数字 / 拉丁字母的刻度标签才用等宽 */
.kicker--num {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.76;
  color: var(--ink-500);
  max-width: var(--prose-max);
}

.lede--serif {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.66;
  color: var(--ink-700);
}

.body-sm { font-size: var(--t-sm); line-height: 1.66; color: var(--ink-500); }
.body-xs { font-size: var(--t-xs); line-height: 1.62; color: var(--ink-500); }

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

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

.t-hi   { color: var(--ink-900); }
.t-mid  { color: var(--ink-700); }
.t-lo   { color: var(--ink-500); }
.t-dim  { color: var(--ink-400); }
.t-sig  { color: var(--violet); }
.t-cool { color: var(--ds-3); }
.t-gold { color: var(--ds-4); }
.t-pos  { color: var(--ds-pos); }

/* --------------------------------------------------------------------------
   分隔线 —— 用发丝线代替卡片框，是本设计的主要"结构语言"
   -------------------------------------------------------------------------- */

.rule { height: 1px; background: var(--line); border: 0; }
.rule--soft { background: var(--line-soft); }

/* 左端一段紫，是全站重复出现的签名笔触 */
.rule--tick { position: relative; overflow: visible; }

.rule--tick::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 44px;
  height: 1px;
  background: var(--violet);
}

.rule--vert { width: 1px; align-self: stretch; background: var(--line); }

/* --------------------------------------------------------------------------
   布局工具
   -------------------------------------------------------------------------- */

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }

.g-1 { gap: var(--s-1); }
.g-2 { gap: var(--s-2); }
.g-3 { gap: var(--s-3); }
.g-4 { gap: var(--s-4); }
.g-5 { gap: var(--s-5); }
.g-6 { gap: var(--s-6); }
.g-7 { gap: var(--s-7); }

.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

.i-start { align-items: start; }
.nowrap { white-space: nowrap; }
.tr     { text-align: right; }
.tc     { text-align: center; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   动效降级
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}