奢华画册

你是一个奢华画册（Luxe Lookbook）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 圆角、阴影、渐变装饰（任何一处都拉低身价，改用方角与 hairline）
- 金色用在多处（唯一强调色只落 kicker / 焦点 / 单个 CTA）
- 用 font-bold 造字重（粗细来自 Didone 衬线本身的对比）
- 拥挤排版（留白是奢侈）
- 视频作 LCP 依赖 / 省略海报
- 快速 / 跳变的花哨动效

## 必须遵守

### 调色板
- 瓷白底 #F7F5F1 / 石灰面 #E8E3DB / 墨黑字 #141210 / 灰褐正文 #6B6259
- 唯一哑光金 #9A7B4F：kicker、hairline 焦点、单个主 CTA
- 全站方角 rounded-none，hairline 细线 border-[#141210]/20

### 排版
- 展示用超大高对比 Didone 衬线（Playfair Display），标题 clamp() 可到 ~8rem，line-height ~0.92
- 正文与标签用中性无衬线；标签全大写、字距 0.3em（tracking-[0.3em]）
- 字重靠字体本身，不用 font-bold；行高宽松

### 视频丝绸首屏（poster = LCP）
- video 必带 poster（AVIF 优先）作 LCP；muted loop playsInline preload="none"
- 进视口才 load()/play()（IntersectionObserver），离屏 pause()：
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { v.load(); v.play().catch(()=>{}); } else { v.pause(); }
}, { threshold: 0.25 });
- 文字压视频铺渐变可读性遮罩，保证 4.5:1
- 显式 aspect-ratio / h-screen 防 CLS

### 画册网格（hover 揭图）
- 竖幅 4:5 肖像用 <picture>：<source srcSet=".avif" type="image/avif"><source srcSet=".webp" type="image/webp">
- 懒加载 loading="lazy" decoding="async" + 显式 aspect-[4/5]
- 悬停只用 transform/opacity：group-hover:scale-[1.04]（duration-700 缓入）+ 说明上浮
- 可键盘聚焦（focus-within 同样揭图）

### 降级
- prefers-reduced-motion / Save-Data：不自动播、显海报静帧，给播放按钮
- 移动端可只显海报

## 自检
1. 全站方角、无圆角无阴影无渐变？
2. 金色只出现在极少数处？
3. 标题是 Didone 衬线、留白充足、无 font-bold？
4. 视频海报作 LCP、preload=none、进视口才播、离屏暂停？
5. 画册图片 <picture> AVIF+WebP、显式 4:5、懒加载、悬停 transform 揭图？
6. reduced-motion / Save-Data 降级到海报静帧？

/* Luxe Lookbook Global Styles */

:root {
  --ll-porcelain: #F7F5F1;
  --ll-stone: #E8E3DB;
  --ll-ink: #141210;
  --ll-gold: #9A7B4F;
  --ll-taupe: #6B6259;
  --ll-hairline: rgba(20, 18, 16, 0.2);
  --ll-serif: "Playfair Display", "Times New Roman", Georgia, serif;
}

/* Load the Didone display face from the CN mirror */
@import url("https://fonts.loli.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..700&display=swap");

.ll-display {
  font-family: var(--ll-serif);
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Oversized editorial title */
.ll-hero-title {
  font-family: var(--ll-serif);
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.92;
}

/* Airy uppercase label */
.ll-label {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  color: var(--ll-gold);
}

/* Hairline rule */
.ll-rule {
  border: 0;
  border: 1px solid var(--ll-hairline);
}

/* Full-bleed film cover */
.ll-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readability scrim over the film */
.ll-scrim {
  background: linear-gradient(to top, rgba(20,18,16,0.5), rgba(20,18,16,0) 55%, rgba(20,18,16,0.2));
}

/* Lookbook plate: slow reveal on hover, transform/opacity only */
.ll-plate img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ll-plate:hover img,
.ll-plate:focus-within img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .ll-plate img { transition: none; }
  .ll-plate:hover img,
  .ll-plate:focus-within img { transform: none; }
}

{
  "border": {
    "width": "border",
    "color": "border-[#141210]/20",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-[0_30px_80px_-40px_rgba(20,18,16,0.35)]",
    "none": "shadow-none",
    "hover": "hover:shadow-none",
    "focus": "focus-visible:ring-1 focus-visible:ring-[#9A7B4F]/60",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-500 ease-out",
    "active": "active:opacity-80",
    "hoverOpacity": "hover:opacity-70"
  },
  "typography": {
    "heading": "font-serif text-[#141210] tracking-tight",
    "body": "text-[#6B6259] leading-relaxed",
    "mono": "uppercase tracking-[0.3em] text-[#9A7B4F] text-xs",
    "sizes": {
      "hero": "text-6xl md:text-8xl",
      "h1": "text-5xl md:text-7xl",
      "h2": "text-3xl md:text-5xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-40",
    "container": "px-6 md:px-10",
    "card": "p-8",
    "gap": {
      "sm": "gap-6",
      "md": "gap-10",
      "lg": "gap-16"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#F7F5F1]",
      "secondary": "bg-[#E8E3DB]",
      "accent": [
        "bg-[#9A7B4F]"
      ]
    },
    "text": {
      "primary": "text-[#141210]",
      "secondary": "text-[#6B6259]",
      "muted": "text-[#141210]/50"
    },
    "button": {
      "primary": "bg-[#141210] text-[#F7F5F1]",
      "secondary": "bg-transparent text-[#141210] border border-[#141210]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "rounded-full",
      "rounded-lg",
      "rounded-xl",
      "shadow-lg",
      "shadow-xl",
      "font-bold"
    ],
    "patterns": [
      "^rounded-(lg|xl|2xl|full)$",
      "^from-(indigo|purple|pink|fuchsia)-",
      "^shadow-(md|lg|xl|2xl)$",
      "^drop-shadow-"
    ],
    "reasons": {
      "bg-gradient-to-r": "The maison never decorates with gradients; restraint and negative space carry the luxury",
      "rounded-full": "Couture reads in crisp square corners and hairline rules, not pill shapes",
      "rounded-lg": "Any corner radius softens the editorial precision; keep edges square",
      "shadow-lg": "Heavy shadows feel commercial; luxury sits flat on the porcelain ground",
      "font-bold": "Weight comes from the high-contrast Didone serif, not from bold utility classes"
    }
  },
  "required": {
    "button": [
      "rounded-none",
      "uppercase tracking-[0.2em]",
      "transition-all duration-500"
    ],
    "card": [
      "rounded-none",
      "bg-[#F7F5F1]"
    ],
    "input": [
      "rounded-none",
      "bg-transparent",
      "border border-[#141210]/25",
      "text-[#141210] placeholder-[#141210]/40",
      "focus:outline-none focus:border-[#9A7B4F]",
      "transition-all duration-500"
    ]
  }
}