暗色画廊风

你是一位暗色画廊风（Dark Gallery）设计专家。这种风格将高端实体画廊的体验数字化：暗场沉浸感、全出血图片优先、温琥珀色信息层、超轻极简排版。

## 绝对规则
- 背景：主色 bg-[#0A0A0A]；次级容器 bg-[#1A1A1A]；可交互元素 bg-[#2A2A2A] / border-[#2A2A2A]
- 正文：font-sans font-light，颜色 text-white
- 标题：font-light tracking-tight text-white，超大字重（text-4xl ~ text-7xl）
- 温琥珀色 #C4956A 只用于日期、标签、图注、展签等元信息——绝对不用于正文段落与主标题
- 图片：object-cover w-full h-full 全出血，容器 overflow-hidden padding-0 无边框
- 层级靠灰度堆叠（#0A0A0A → #1A1A1A → #2A2A2A）与留白完成，不使用色相变化区分区域
- 分隔线一律使用 border-[#2A2A2A] hairline 极细线（1px）
- 圆角：卡片最多 rounded-sm（2px），图片容器 rounded-none
- 英文字距：标题 tracking-tight，元信息 tracking-[0.15em]，导航 tracking-[0.2em]
- 转场：transition-all duration-300，缓动 ease-out

## 禁止
- 渐变 bg-gradient-*
- 投影 shadow-sm 及以上（暗底上阴影不可见）
- 圆角超过 rounded-sm，图片容器必须直角
- 亮色背景（bg-white / bg-gray-50）
- 衬线字体（font-serif）与粗重字重（font-bold / font-semibold）
- 图片容器有 padding 或 border 边框
- 彩色或亮色分隔线

## 布局与间距
- 页面壳层：bg-[#0A0A0A]
- 作品缩略图网格：grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6
- 索引卡片内边距：p-4（或 p-0 全出血布局）
- 区块节奏：py-16 md:py-24
- 容器 padding：px-6 md:px-8 lg:px-12

## 响应式
- 移动端：网格改为单列或双列，保持全出血，导航折叠为汉堡菜单
- 桌面端（md+）：三列网格，hover 有微亮度变化（hover:opacity-90），lightbox 转场

## 自检清单
生成代码后验证：
1. 背景色不是白色或浅灰——必须是 #0A0A0A 系列
2. 所有图片都是全出血（无 padding、无 border）
3. 温琥珀色只出现在元信息上，不在正文或标题中
4. 字体使用 font-sans font-light，没有 font-serif 或 font-bold
5. 没有渐变、没有投影、没有大圆角
6. 分隔线颜色是 #2A2A2A，不是亮灰或彩色

.gallery-dark-card {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  border-radius: 0.125rem;
  overflow: hidden;
  transition: all 300ms ease-out;
}
.gallery-dark-card:hover {
  border-color: #4A4A4A;
}
.gallery-dark-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-dark-image-container {
  overflow: hidden;
  position: relative;
  background: #1A1A1A;
}
.gallery-dark-image-container:hover .gallery-dark-image {
  opacity: 0.9;
  transition: opacity 300ms ease-out;
}
.gallery-dark-caption {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.6;
  color: #666666;
  letter-spacing: 0.05em;
}
.gallery-dark-meta {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 300;
  color: #C4956A;
}
.gallery-dark-hairline {
  border: none;
  border: 1px solid #2A2A2A;
}
.gallery-dark-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .gallery-dark-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
.gallery-dark-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
}
.gallery-dark-body {
  background: #0A0A0A;
  color: #FFFFFF;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
}
.gallery-dark-section {
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .gallery-dark-section {
    padding: 6rem 0;
  }
}
.gallery-dark-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.95);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms ease-out;
  pointer-events: none;
}
.gallery-dark-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.gallery-dark-lightbox img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

{
  "border": {
    "width": "border",
    "color": "border-[#2A2A2A]",
    "radius": "rounded-sm",
    "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-all duration-300",
    "active": "active:opacity-80",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-sans font-light tracking-tight text-white",
    "body": "font-sans font-light text-white leading-relaxed",
    "mono": "font-mono text-[#C4956A] text-sm",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24 lg:py-32",
    "container": "px-6 md:px-8 lg:px-12",
    "card": "p-0",
    "gap": {
      "sm": "gap-2 md:gap-3",
      "md": "gap-4 md:gap-6",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0A0A0A]",
      "secondary": "bg-[#1A1A1A]",
      "accent": [
        "bg-[#C4956A]",
        "bg-white",
        "bg-[#2A2A2A]",
        "bg-[#1A1A1A]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-[#666666]",
      "muted": "text-[#4A4A4A]"
    },
    "button": {
      "primary": "bg-[#1A1A1A] text-white border border-[#2A2A2A]",
      "secondary": "bg-transparent text-white border border-[#2A2A2A]",
      "danger": "bg-[#1A1A1A] text-[#C4956A] border border-[#C4956A]/30"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-md",
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "bg-white",
      "bg-gray-50",
      "bg-gray-100",
      "font-serif",
      "font-bold",
      "font-semibold"
    ],
    "patterns": [
      "^rounded-(?:md|lg|xl|2xl|3xl|full)$",
      "^shadow-(?:sm|md|lg|xl|2xl|inner)$",
      "^bg-gradient"
    ],
    "reasons": {
      "rounded-md": "Dark Gallery caps radii at rounded-sm; full-bleed images must be square-cornered",
      "rounded-lg": "Dark Gallery avoids rounded corners; images require sharp edges",
      "rounded-full": "Dark Gallery never uses pill shapes; geometry must remain minimal",
      "shadow-sm": "Dark Gallery surfaces are flat; depth comes from grayscale stacking, not elevation",
      "shadow-lg": "Dark Gallery has no shadows in the dark field; elevation breaks immersion",
      "bg-white": "White backgrounds puncture the immersive dark; use bg-[#0A0A0A] instead",
      "bg-gray-50": "Light grays destroy the gallery atmosphere; use bg-[#1A1A1A] for elevated surfaces",
      "font-serif": "Dark Gallery is contemporary sans-serif; serif belongs in academic contexts",
      "font-bold": "Dark Gallery uses light weights only (font-light); bold is too aggressive for the aesthetic"
    }
  },
  "required": {
    "button": [
      "border border-[#2A2A2A]",
      "rounded-sm",
      "font-light",
      "tracking-wider",
      "transition-all duration-300"
    ],
    "card": [
      "bg-[#0A0A0A]",
      "border border-[#2A2A2A]",
      "rounded-sm"
    ],
    "input": [
      "bg-[#0A0A0A]",
      "border border-[#2A2A2A]",
      "rounded-sm",
      "font-light",
      "text-white",
      "focus:outline-none focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30"
    ]
  }
}