Horizontal Scroll / Studio Exhibition

/* Synthesized from Trova family: Horizontal Scroll / Studio Exhibition (horizontal-scroll-studio) */
/* Evidence base: 3 curated reference(s) · Primary contrast 17.5:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f4f4f0;
  --surface-elevated: #ff3b00;
  --text-primary: #0e0e0e;
  --accent-primary: #1c1c1c;
  --border-hairline: color-mix(in srgb, #0e0e0e 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Courier New", system-ui, sans-serif;
  --font-body: "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "Courier New", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Horizontal Scroll / Studio Exhibition — style sheet

> Sideways wheel scrolling, broad museum gallery measures, track-mounted project cards, and clean horizontal timeline tracks.

Derived from 3 curated reference(s) in the `horizontal-scroll-studio` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Courier New — 1/3
- Helvetica Neue — 1/3
- IBM Plex Mono — 1/3
- JetBrains Mono — 1/3
- Neue Montreal — 1/3
- Panchang — 1/3

## Color

- `#0e0e0e` dark neutral — 3/3
- `#f4f4f0` light neutral — 3/3
- `#1c1c1c` dark neutral — 1/3
- `#ff3b00` chromatic — 1/3
- `#a3a3a3` mid neutral — 1/3
- `#00ff66` chromatic — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#0e0e0e` / `#f4f4f0` — 17.5:1
- `#1c1c1c` / `#f4f4f0` — 15.5:1
- `#0e0e0e` / `#00ff66` — 14.2:1
- `#0e0e0e` / `#a3a3a3` — 7.7:1

## Moves

### component pattern

- Pin a persistent bottom-right progress bar and keyboard arrow hint (`← → TO NAVIGATE`) so users always know their exact coordinate along the horizontal exhibition rail. — 202-locomotive-studio-horizontal-inertia-exhibition-rail-vertical-index-counter
- Present the entire portfolio index as a centered horizontal filmstrip of 48px-wide vertical slices that expand smoothly to a 640px hero frame when clicked or centered under the viewport crosshair. — 204-aristide-benoist-sliced-horizontal-filmstrip-gallery-keyframe-counter

### typography

- Pair ultra-wide display project titles with a dense `#00ff66` phosphor-green technical spec strip (`CLIENT · STACK · YEAR · LIVE URL`) pinned to the top border of each horizontal panel. — 203-studio-freight-horizontal-project-ribbon-scrubbable-marquee-case-drawer
- Keep project titles and index counters (`014 / 032`) fixed at the exact vertical and horizontal center of the viewport so only the underlying imagery glides past. — 204-aristide-benoist-sliced-horizontal-filmstrip-gallery-keyframe-counter

### grid/layout

- Map vertical wheel delta onto a horizontal `translate3d(-Xpx, 0, 0)` gallery track divided by full-height `1px solid rgba(244,244,240,0.18)` vertical spine pillars that hold rotated `-90deg` project numbers (`01 / 08`). — 202-locomotive-studio-horizontal-inertia-exhibition-rail-vertical-index-counter

### motion/interaction

- Horizontal case-study cards skew subtly (`skewX(-1.5deg)`) proportional to scroll velocity and snap back to `0deg` when scroll velocity settles. — 203-studio-freight-horizontal-project-ribbon-scrubbable-marquee-case-drawer

## References

- 202-locomotive-studio-horizontal-inertia-exhibition-rail-vertical-index-counter — Locomotive Studio — Horizontal Inertia Exhibition Rail & Vertical Index Counter (exemplar)
- 203-studio-freight-horizontal-project-ribbon-scrubbable-marquee-case-drawer — Studio Freight — Horizontal Project Ribbon, Scrubbable Marquee & Case Drawer
- 204-aristide-benoist-sliced-horizontal-filmstrip-gallery-keyframe-counter — Aristide Benoist — Sliced Horizontal Filmstrip Gallery & Keyframe Counter