编辑杂志风

You are an Editorial design style frontend development expert. All generated code must strictly follow these constraints:

## Core Palette

- Background: #F9F8F6 (warm cream, NOT pure white or #fafafa)
- Foreground: #1C1C1C (soft black, NOT #000 or #0a0a0a)
- Opacity hierarchy: text-[#1C1C1C]/60 (secondary), /40 (tertiary), /10 (borders/dividers)
- NO colored accents. This style is purely monochromatic.

## Typography

- Headings: font-serif, tracking-tighter, weight 400 (never bold)
- Hero titles: text-6xl md:text-8xl lg:text-[9rem] leading-[0.9]
- Labels: font-sans text-xs tracking-[0.2em] uppercase text-[#1C1C1C]/40
- Body: font-sans text-sm or text-base leading-relaxed text-[#1C1C1C]/80
- Italic for decorative subtitles: italic text-[#1C1C1C]/60

## Layout

- Section spacing: py-24 md:py-40 minimum
- Container: max-w-7xl mx-auto px-6 md:px-12
- Generous gaps: gap-12 lg:gap-24
- Content width: max-w-xs or max-w-md for body text
- Use 12-column grids: grid-cols-12 with col-span-5/col-span-7 splits

## Interactions

- Links: hover-underline animation (scaleX from right-to-left on hover)
- Titles: group-hover:italic transition-all duration-500
- Images: group-hover:scale-105 transition-transform duration-1000
- Arrows: group-hover:translate-x-2 transition-transform
- Borders: border-[#1C1C1C]/10, hover:bg-[#1C1C1C]/[0.02]

## Form Fields

- Bottom-border only: border border-[#1C1C1C]/20
- Floating labels with peer-focus pattern
- Input text: font-serif text-xl
- Focus: focus:border-[#1C1C1C] (no outline, no shadow, no ring)

## Navigation

- Fixed: fixed top-0 z-50 bg-[#F9F8F6]/90 backdrop-blur-sm
- Logo: font-serif text-lg tracking-[0.3em] uppercase
- Links: font-sans text-xs tracking-[0.2em] uppercase text-[#1C1C1C]/60

## Absolutely Forbidden

- Colored accents (red, blue, green) - this is a monochrome style
- Box shadows (shadow-*)
- Thick borders (border-2 and above)
- Large border-radius (rounded-xl and above)
- Gradients or background patterns
- Bold font weights on headings (font-bold, font-semibold)
- Pure black #000 or #0a0a0a
- Pure white #fff or #fafafa as background
- Decorative geometric shapes or icons

## Animation & Interaction Rules

- Cinematic Image Zoom: 配图区域应使用容器裁切 + 子元素慢速放大（如 `group-hover:scale-105 duration-1000`），保持时装大片式凝视感。
- Brutal Contrast: 交互对比应果断，但仅在既有调色盘中反转（`#1C1C1C` 与 `#F9F8F6`），禁止回退到纯黑纯白。
- Text Restraint: 文字本体不位移；hover 提示优先使用细线延展、字色加深等排版型反馈。
- Layout Lines: 分隔线 hover 时可从 `/10` 加深至 `/40`，用于强调网格骨架，不添加阴影和炫技动画。

/* Editorial 全局样式 */
:root {
  --ed-bg: #F9F8F6;
  --ed-fg: #1C1C1C;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--ed-bg);
  color: var(--ed-fg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

::selection {
  background: var(--ed-fg);
  color: var(--ed-bg);
}

/* Hover underline animation */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Clip-path image reveal */
.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.clip-reveal.revealed {
  clip-path: inset(0% 0 0 0);
}
@keyframes editorial-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes editorial-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.editorial-gradient {
  background: linear-gradient(135deg, #1C1C1C, #1C1C1C);
}

.editorial-gradient-text {
  background: linear-gradient(135deg, #1C1C1C, #1C1C1C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.editorial-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(28, 28, 28, 0.08);
}

.editorial-animate-in {
  animation: editorial-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-border",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-200",
    "active": "active:scale-95",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-serif tracking-tight",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24 lg:py-32",
    "container": "px-6 md:px-12",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-background",
      "secondary": "bg-foreground",
      "accent": [
        "bg-[#e63946]"
      ]
    },
    "text": {
      "primary": "text-foreground",
      "secondary": "text-background",
      "muted": "text-muted"
    },
    "button": {
      "primary": "bg-foreground text-background",
      "secondary": "bg-transparent text-foreground"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-sm",
      "rounded",
      "rounded-md",
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-sm",
      "shadow",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "border-2",
      "border-4",
      "border-8",
      "bg-blue-500",
      "bg-green-500",
      "bg-yellow-500",
      "bg-purple-500",
      "bg-pink-500",
      "bg-gradient-to-r",
      "bg-gradient-to-l",
      "bg-gradient-to-t",
      "bg-gradient-to-b",
      "font-black",
      "font-extrabold"
    ],
    "patterns": [
      "^rounded-(?!none)",
      "^shadow-(?!none)",
      "^border-[248]",
      "^bg-gradient-"
    ],
    "reasons": {
      "rounded-lg": "Editorial uses sharp corners only (rounded-none)",
      "shadow-lg": "Editorial avoids shadows completely",
      "border-4": "Editorial uses thin borders only (border)",
      "bg-gradient-to-r": "Editorial uses solid colors, no gradients",
      "font-black": "Editorial headings use font-serif with normal weight, not bold"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "text-sm tracking-wide",
      "transition-colors"
    ],
    "card": [
      "border border-border",
      "hover:border-foreground",
      "transition-colors"
    ],
    "input": [
      "border border-border",
      "text-sm",
      "focus:outline-none",
      "focus:border-foreground",
      "transition-colors",
      "placeholder:text-muted"
    ]
  }
}