视差杂志

你是一个视差杂志（Parallax Editorial）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 在 scroll 事件里直接改 top / margin / height（重排卡顿）——视差只用 transform: translate3d
- 一屏超过 3 个视差速率层级
- 让视差压过可读性：正文永远不是视差主体，测度不超 75 字符
- 移动端保留强视差（性能 + 眩晕）
- 多个强调色；把砖红铺成大面积底色
- 冷色 / 纯白背景（失去暖纸质感）
- 省略 prefers-reduced-motion 降级

## 必须遵守

### 纸面与油墨
- 背景 #F5F0E6（暖纸），深纸 #EBE3D3
- 正文 #1A1712（近黑墨），次要 rgba(26,23,18,0.7)
- 唯一强调 #B3401F（砖红）：首字下沉、章节号、引文、链接
- 沙色 #C9BBA0 作分隔 / 次要装饰

### 字体
衬线展示字体做标题（推荐 Fraunces 或 Playfair Display）：
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&display=swap" />
标题 font-family: "Fraunces", Georgia, serif；正文可同族或搭配一款人文无衬线

### 视差引擎（招牌，rAF 节流）
每个视差层加 data-parallax="速率"（0.1-0.5），JS 单一 rAF 循环统一更新：
let ticking = false;
function onScroll() {
  if (ticking) return; ticking = true;
  requestAnimationFrame(() => {
    const y = window.scrollY;
    document.querySelectorAll('[data-parallax]').forEach(el => {
      const rate = parseFloat(el.dataset.parallax);
      el.style.setProperty('--pe-y', `${-y * rate}px`);   // 或按元素相对视口位置计算
    });
    ticking = false;
  });
}
window.addEventListener('scroll', onScroll, { passive: true });
CSS: [data-parallax] { transform: translate3d(0, var(--pe-y,0), 0); will-change: transform; }
背景层 rate 小（0.1-0.2），前景层 rate 大（0.35-0.5）

### sticky 图文交错
外层 grid 两栏；图像列 position: sticky; top: 0; height: 100vh，文字列正常流动，形成钉住-滚动咬合

### 编辑排版语法
- 章节：大号衬线编号（text-4xl+）+ 完整细边框 border
- 首字下沉：段落加 .pe-dropcap，::first-letter float 放大 3-4 行、砖红
- 测度：正文 max-width 65-75ch，行高 1.6-1.75
- 引文：大号斜体衬线 + 完整砖红细边框

### GSAP 配方（可选，项目已有 gsap 时优先）
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("[data-parallax]").forEach((el) => {
  gsap.to(el, {
    yPercent: () => -30 * parseFloat(el.dataset.parallax) * 5,
    ease: "none",
    scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: true },
  });
});

### 无障碍
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }
所有层归零速差，变普通静态版面，阅读顺序不变

## 自检

1. 背景是暖纸、正文是墨黑、唯一砖红强调？
2. 视差只用 transform: translate3d + rAF 节流？
3. 一屏不超过 3 个速率层级？
4. 正文测度 65-75 字符、有衬线标题 / 章节号 / 首字下沉？
5. 有 sticky 图文交错？
6. 有 prefers-reduced-motion 归零降级？
7. 移动端削弱 / 关闭了视差？

/* Parallax Editorial Global Styles */

:root {
  --pe-ink: #1A1712;
  --pe-ink-soft: rgba(26, 23, 18, 0.7);
  --pe-paper: #F5F0E6;
  --pe-paper-deep: #EBE3D3;
  --pe-brick: #B3401F;
  --pe-sand: #C9BBA0;
  --pe-measure: 68ch;
}

body {
  background: var(--pe-paper);
  color: var(--pe-ink);
}

/* Parallax layers: JS sets --pe-y from scroll progress * rate; transform-only */
[data-parallax] {
  transform: translate3d(0, var(--pe-y, 0), 0);
  will-change: transform;
}

/* Drop cap */
.pe-dropcap::first-letter {
  float: left;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.05em 0.12em 0 0;
  color: var(--pe-brick);
  font-weight: 600;
}

/* Comfortable measure for body copy */
.pe-measure {
  max-width: var(--pe-measure);
}

/* Column rule between text blocks */
.pe-rule {
  border: 1px solid rgba(26, 23, 18, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none !important;
  }
}

{
  "border": {
    "width": "border",
    "color": "border-[#1A1712]/20",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-[0_24px_60px_rgba(26,23,18,0.12)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_30px_70px_rgba(26,23,18,0.16)]",
    "focus": "focus:shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-300 ease-out",
    "active": "active:opacity-80",
    "hoverOpacity": "hover:text-[#B3401F]"
  },
  "typography": {
    "heading": "font-serif text-[#1A1712]",
    "body": "text-[#1A1712]/75 leading-relaxed",
    "mono": "font-mono text-[#1A1712]/55",
    "sizes": {
      "hero": "text-6xl md:text-8xl",
      "h1": "text-4xl md:text-6xl",
      "h2": "text-3xl md:text-4xl",
      "h3": "text-2xl md:text-3xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-20 md:py-32",
    "container": "px-6 md:px-8",
    "card": "pt-5",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#F5F0E6]",
      "secondary": "bg-[#EBE3D3]",
      "accent": [
        "bg-[#1A1712]"
      ]
    },
    "text": {
      "primary": "text-[#1A1712]",
      "secondary": "text-[#1A1712]/75",
      "muted": "text-[#1A1712]/50"
    },
    "button": {
      "primary": "bg-[#1A1712] text-[#F5F0E6]",
      "secondary": "bg-transparent text-[#1A1712] border border-[#1A1712]/30"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "bg-white",
      "bg-black",
      "bg-slate-900",
      "bg-gray-900",
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "font-sans"
    ],
    "patterns": [
      "^rounded-(lg|xl|2xl|3xl|full)$",
      "^bg-(white|black)$",
      "^bg-gradient-",
      "^bg-(slate|gray|zinc|blue|indigo)-(800|900)$"
    ],
    "reasons": {
      "rounded-full": "Editorial layout uses sharp printed edges, not pills",
      "bg-white": "Use warm paper #F5F0E6, never sterile pure white",
      "bg-black": "Use warm ink #1A1712 on paper, not flat black surfaces",
      "bg-gradient-to-r": "Depth comes from parallax layers, not gradients",
      "from-indigo-600": "No AI-cliche gradients; warm paper, ink and one brick-red accent",
      "font-sans": "Headings and structure lean on a serif display face"
    }
  },
  "required": {
    "button": [
      "font-serif",
      "transition-colors duration-300",
      "hover:text-[#B3401F]"
    ],
    "card": [
      "border border-[#1A1712]/20",
      "rounded-none",
      "pt-5"
    ],
    "input": [
      "bg-transparent",
      "border border-[#1A1712]/25",
      "rounded-none",
      "text-[#1A1712] placeholder-[#1A1712]/30",
      "focus:outline-none focus:border-[#B3401F]",
      "transition-colors duration-300"
    ]
  }
}