横滚画廊

You are a curator-minded frontend expert specializing in the Horizontal Gallery (white cube) layout. All generated code must strictly follow these constraints:

## Absolute Rules

- The core content area is a horizontal strip: overflow-x-auto snap-x snap-mandatory, items shrink-0 snap-start
- Artwork images: rounded-none, no border, no shadow, object-cover, aspect-[4/5] or aspect-[3/2]
- Every work carries an index (No. 01 / Fig. 01) in terracotta #A85A3A and a caption below the image: text-xs uppercase tracking-[0.2em] text-[#8A8A85]
- Background is gallery white #FCFCFA, text is ink #1A1A1A, all dividers are hairlines border-[#E8E6E1]
- Horizontal whitespace between works is generous: gap-16 md:gap-24, wall margins px-6 md:px-20
- Section titles use font-serif font-light tracking-wide; body text is sans
- Hide horizontal scrollbars (scrollbar-width: none; ::-webkit-scrollbar display: none) and show a hairline progress line or arrows instead
- A sticky title cell (sticky left-0 bg-[#FCFCFA]) may accompany the strip

## Forbidden

- Shadows, rounded corners, or borders on artwork images
- Text overlaid on artwork
- Vertical masonry or multi-row grids inside the strip
- Borders thicker than 1px anywhere
- Gradient, textured, or saturated multicolor backgrounds on the wall
- Any accent color other than restrained terracotta #A85A3A

## Layout Structure

Strip container:
- flex gap-16 md:gap-24 overflow-x-auto snap-x snap-mandatory
- hidden scrollbar, hairline progress underneath

Work cell:
- figure with w-72 to w-[28rem], shrink-0, snap-start
- image block aspect-[4/5] or aspect-[3/2] overflow-hidden
- figcaption: mt-5 pt-4 border border-[#E8E6E1], index then serif title then caption

## Responsive

- Mobile (< 768px): narrower cells (w-64), wall margins px-6, keep the strip horizontal
- Tablet (768px+): w-80 cells, px-12 margins
- Desktop (1024px+): mixed w-80 / w-[28rem] cells, px-20 margins, sticky title cell enabled
- Respect prefers-reduced-motion: disable smooth scrolling and scale transitions

## Self-Check

After generating code, verify:
1. The strip snaps horizontally and the scrollbar is hidden
2. No artwork image has a shadow, radius, or border
3. Every work shows an index and a hairline caption below the image
4. All lines on the page are 1px hairlines in #E8E6E1
5. The only accent color present is #A85A3A

/* Horizontal Gallery Global Styles */

/* Signature horizontal strip: snap scroll with hidden scrollbar */
.hgallery-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hgallery-strip::-webkit-scrollbar {
  display: none;
}

.hgallery-item {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.hgallery-item--center {
  scroll-snap-align: center;
}

/* Sticky title cell that walks along with the strip */
.hgallery-sticky-title {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #FCFCFA;
}

/* Museum wall label caption */
.hgallery-caption {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #8A8A85;
}

.hgallery-index {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #A85A3A;
}

/* Hairline rules */
.hgallery-hairline {
  border-color: #E8E6E1;
  border-width: 1px;
}

/* Hairline scroll progress track */
.hgallery-progress {
  position: relative;
  height: 1px;
  background: #E8E6E1;
}

.hgallery-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background: #1A1A1A;
  transition: width 0.2s ease-out;
}

/* Horizontal Gallery Design Tokens */
:root {
  --horizontal-gallery-wall: #FCFCFA;
  --horizontal-gallery-ink: #1A1A1A;
  --horizontal-gallery-ink-soft: #2E2E2C;
  --horizontal-gallery-muted: #8A8A85;
  --horizontal-gallery-hairline: #E8E6E1;
  --horizontal-gallery-terracotta: #A85A3A;
}

@keyframes horizontal-gallery-fade-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.horizontal-gallery-animate-in {
  animation: horizontal-gallery-fade-in 0.6s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-[#E8E6E1]",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "ring-1 ring-[#1A1A1A]",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-300",
    "active": "active:opacity-60",
    "hoverScale": "hover:opacity-80"
  },
  "typography": {
    "heading": "font-serif font-light tracking-wide",
    "body": "font-sans font-light",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-6xl lg:text-7xl",
      "h1": "text-4xl md:text-5xl",
      "h2": "text-3xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-20 md:py-28 lg:py-36",
    "container": "px-6 md:px-12 lg:px-20",
    "card": "p-0",
    "gap": {
      "sm": "gap-8",
      "md": "gap-12 md:gap-16",
      "lg": "gap-16 md:gap-24"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#FCFCFA]",
      "secondary": "bg-[#E8E6E1]",
      "accent": [
        "bg-[#A85A3A]",
        "bg-[#1A1A1A]"
      ]
    },
    "text": {
      "primary": "text-[#1A1A1A]",
      "secondary": "text-[#2E2E2C]",
      "muted": "text-[#8A8A85]"
    },
    "button": {
      "primary": "bg-[#1A1A1A] text-[#FCFCFA] hover:bg-[#2E2E2C]",
      "secondary": "bg-transparent text-[#1A1A1A] border border-[#1A1A1A]",
      "danger": "bg-[#A85A3A] text-[#FCFCFA] hover:bg-[#8F4A2E]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "border-2",
      "border-4",
      "bg-gradient-to-r",
      "bg-gradient-to-br"
    ],
    "patterns": [
      "^rounded-(sm|md|lg|xl|2xl|3xl|full)$",
      "^shadow-(sm|md|lg|xl|2xl)$",
      "^border-[248]$",
      "^bg-gradient-"
    ],
    "reasons": {
      "rounded-lg": "Horizontal Gallery hangs works flush on the wall; every corner stays rounded-none",
      "shadow-md": "Artwork and cards must cast no shadow on the gallery wall",
      "border-2": "All lines are 1px hairlines in #E8E6E1; heavy frames are forbidden",
      "bg-gradient-to-r": "The wall stays gallery white #FCFCFA; no gradient or textured backgrounds"
    }
  },
  "required": {
    "button": [
      "rounded-none",
      "uppercase",
      "tracking-[0.2em]",
      "transition-colors duration-300"
    ],
    "card": [
      "rounded-none",
      "shadow-none"
    ],
    "input": [
      "rounded-none",
      "bg-transparent",
      "border border-[#E8E6E1]",
      "focus:border-[#1A1A1A]"
    ]
  }
}