/* ========================================================================
   style.css — 主样式：色彩变量、字体、纸张质感、全局基础
   （collage-website-skill §1 视觉规范）
   ======================================================================== */

:root {
  /* 色彩系统 (skill §1.1) */
  --ink: #292626;            /* 全局文字色 */
  --cream: #f2eee6;          /* 米色基底 */
  --card-1: #78816d;         /* 灰绿 */
  --card-2: #a5b1b2;         /* 灰蓝 */
  --card-3: #b49a71;         /* 暖棕 */
  --card-4: #6f687b;         /* 灰紫 */

  /* 字体系统 (skill §1.2) */
  --font-display: "DIN Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-cjk: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-label: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 阴影系统 (skill §1.4) */
  --card-shadow: 0 -24px 70px rgba(37, 31, 28, 0.16);
  --card-outline: 1px solid rgba(66, 54, 40, 0.16);

  /* 缓动 (skill §4.3) */
  --ease-main: cubic-bezier(0.22, 0.72, 0.22, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 全局噪点叠加层 (skill §1.3) */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* 印刷错位标题 (skill §1.3) — data-shadow 属性 + ::after */
[data-shadow] {
  position: relative;
  display: inline-block;
}
[data-shadow]::after {
  content: attr(data-shadow);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-8px, 8px);
  color: var(--card-color, var(--card-1));
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}