Horizontal Gallery

# Visual style: Horizontal Gallery

A white-cube, curator-style portfolio layout. Borderless large images line up along a horizontal snap-scroll rail; whitespace acts as the gallery wall, numbered hairline captions echo museum labels, and viewing becomes a walk.

## Philosophy
Horizontal Gallery imagines the page as a white-cube museum: viewing is not an infinite downward feed but a forward walk along an exhibition line, pausing in front of each work.

Core principles:
- Whitespace is the wall: gallery white #FCFCFA is not emptiness but the silence between works; spacing itself is a curatorial decision
- Horizontal is the route: overflow-x-auto plus scroll-snap turns scrolling into walking, each piece snapping to rest before the viewer
- The work is the protagonist: no borders, no shadows, no rounded corners; container decoration must never compete with the artwork
- Captions are curation: No. 01 numbering and hairline uppercase captions speak in the voice of a museum wall label

## Do
- Build the gallery strip with overflow-x-auto snap-x snap-mandatory, each work shrink-0 snap-start
- Artwork images are always rounded-none with no border and no shadow, object-cover inside aspect-[4/5] or aspect-[3/2]
- Give every work a No. 01 / Fig. 01 index and a hairline caption text-xs uppercase tracking-[0.2em] text-[#8A8A85] below the image
- All dividers are hairlines: border-t border-[#E8E6E1], never thicker than 1px
- Keep vast horizontal whitespace between works gap-16 md:gap-24, with wall margins px-6 md:px-20 at both ends
- Place the section title as the first strip cell with sticky left-0 bg-[#FCFCFA] so it accompanies the scroll
- Set titles in font-serif font-light tracking-wide, body in sans muted tones; hierarchy comes from size and letter-spacing, not weight
- Hide the horizontal scrollbar (scrollbar-width: none plus ::-webkit-scrollbar display: none) and replace it with a hairline progress line and arrows

## Don't
- Never add shadows, rounded corners, or borders to artwork images (works must hang clean on the wall)
- Never place text on top of artwork; captions live only below the image
- Never mix vertical masonry or multi-row grids inside the horizontal strip
- Never use heavy borders (border-2 and up); every line stays a hairline
- Never use flashy backgrounds: gradient walls, textured walls, or large color blocks are forbidden on the gallery wall
- Never use saturated multicolor decoration; the only accent allowed is a restrained terracotta #A85A3A

## Rules for the AI
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-t 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