/* ==========================================================================
   见微 AlgoLens · 基础层
   重置、排版、焦点、氛围层、动效降级
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

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

a {
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--cinnabar); }

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

code, kbd, pre, samp { font-family: var(--font-mono); font-variant-ligatures: none; }

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

hr {
  border: none;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--sp-5) 0;
}

/* ---------- 排版工具 ---------- */
/**
 * 巨字：Archivo Black + 收紧字距 + 极小行高。
 * 用于首屏标题、章节编号、统计数字 —— 是这套设计里最响的声音。
 */
.t-mega {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  color: var(--ink);
  font-weight: 400;   /* Archivo Black 本身只有一个字重 */
}

.t-xxl {
  font-family: var(--font-display);
  font-size: var(--t-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  color: var(--ink);
}
.t-xl { font-size: var(--t-xl); }
.t-lg { font-size: var(--t-lg); }
.t-md { font-size: var(--t-md); }
.t-sm { font-size: var(--t-sm); }
.t-xs { font-size: var(--t-xs); }
/* 极小的元信息。只配合 .mono 使用 —— 中文不要用这一档，字腔会糊掉 */
.t-2xs { font-size: var(--t-2xs); }

.t-body { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
.t-muted { color: var(--ink-3); }
.t-ink { color: var(--ink); }
.t-cin { color: var(--cinnabar-text); }

/** 等宽标签：全大写 + 拉开字距。工业风的「仪表盘铭牌」感 */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-label--cin { color: var(--cinnabar-text); }
.t-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   氛围层
   ---------------------------------------------------------------------------
   三层叠加，全部 pointer-events:none，不干扰交互：
   1. 方格纸底纹 —— 算法本身就是坐标纸上的东西，这层底纹不是装饰是隐喻
   2. 顶部密封线 —— 试卷观感，压住整个页面的顶部
   3. 噪点颗粒 —— 让大块纸色不显得像没渲染完
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.042;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.05; }

/* 内容层必须抬到氛围层之上 */
.page { position: relative; z-index: 2; }

/* ---------- 布局骨架 ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 960px; }

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }

/* ==========================================================================
   焦点与可访问性
   ========================================================================== */
:focus-visible {
  outline: var(--bw-1) solid var(--cinnabar);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* 深色朱砂底上，焦点圈换成纸色才看得见 */
.on-cinnabar :focus-visible { outline-color: var(--paper); }

::selection { background: var(--cinnabar); color: var(--paper); }

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

/* 跳转到主内容 —— 键盘用户第一个 Tab 就能拿到 */
.skip-link {
  position: absolute; top: 0; left: var(--sp-3);
  transform: translateY(-140%);
  z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px;
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: var(--paper); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-sunk); }
::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border: 3px solid var(--paper-sunk);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ==========================================================================
   动效
   ---------------------------------------------------------------------------
   一次编排好的入场序列（3–6 组，间隔 60–120ms），胜过一堆零散微交互。
   所有动效只碰 opacity 与 transform，不触发布局。
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal.in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }
  /* 入场错峰：每一档 +80ms */
  .reveal[data-d="1"].in { transition-delay: 80ms; }
  .reveal[data-d="2"].in { transition-delay: 160ms; }
  .reveal[data-d="3"].in { transition-delay: 240ms; }
  .reveal[data-d="4"].in { transition-delay: 320ms; }
  .reveal[data-d="5"].in { transition-delay: 400ms; }
}

/* 降级：不做位移与淡入，直接显示 */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 用户手动关闭动效（站内开关，覆盖系统偏好之外的情况） */
[data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}

/* ---------- 打印 ---------- */
@media print {
  body::before, body::after { display: none; }
  .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}