# Design Specification: Brutalist High-Art Museum & B&W Architectural Photography

## Objective
Build a single-file, interactive HTML/CSS/JS website for **[BRAND NAME / TOPIC]**. Use a **"Premium Brutalist High-Art Museum, Swiss Architectural Grid & Silver-Gelatin Photography"** aesthetic.

---

## 1. Strict Color Palette (Zero Red / Zero Orange)
* **Gallery Alabaster:** `#F7F6F2` (Primary light grid background)
* **Concrete Slate:** `#E4E3DD` (Secondary structural cells and hover states)
* **Architectural Obsidian:** `#0B0B0B` (Exposed structural borders, stark typography, and dark exhibition poster sections)
* **Signal Yellow:** `#F6D809` (Primary high-contrast accent for CTAs, active index rows, and geometric badges — strictly no red or orange tones anywhere)

---

## 2. Structural Grid & Brutalist Geometry
* **Exposed Hairline Grid:** Frame every section, header link, and content block inside exposed `2px solid #0B0B0B` structural borders with `0px` border-radius (sharp 90-degree corners everywhere).
* **Top Architectural Navigation:** Full-width horizontal grid bar divided into boxed cells (`[BRAND.]`, `[STUDIO TAGLINE]`, `[WORK]`, `[ABOUT]`, `[SERVICES]`, `[JOURNAL]`, `[CONTACT]`, and a `#F6D809` Signal Yellow `[START A PROJECT ↗]` cell).

---

## 3. Real B&W Brutalist Photography & Darkroom Controls
* **Monochrome Architectural Plates:** Do not use vector illustrations for buildings. Use high-contrast black-and-white brutalist concrete photography (sharp cantilevers, raw board-formed concrete shadows, upward geometric angles).
* **35mm Film Grain & Telemetry Overlays:** Layer a subtle SVG noise/film-grain texture over all photographs, paired with monospace archival metadata stamps (e.g., `PLATE_01 // ISO 400`, barcode `012.123543.705.10`).
* **Interactive Darkroom Bar:** Include controls allowing users to:
  1. Cycle through different B&W brutalist photography plates (`[ SWITCH MONUMENT PLATE ↻ ]`).
  2. Toggle CSS darkroom lens filters (`SILVER GELATIN`: `grayscale(100%) contrast(135%)`, `CARBON NOIR`: `grayscale(100%) contrast(175%) brightness(85%)`, `DAYLIGHT`: `grayscale(100%) contrast(105%) brightness(108%)`).
  3. Click any architectural photograph to inspect it in a full-screen archival lightbox modal.

---

## 4. Hero Section & Numbered Exhibition Index
* **Left Hero Column:** Massive stacked ultra-condensed uppercase display typography (`Anton` or `Impact`, `line-height: 0.88`, `letter-spacing: -0.03em`, e.g., `WE DESIGN / WITHOUT / RULES.`) paired with a square `[+]` button and a sharp rectangular `VIEW OUR WORK ↗` button.
* **Right Hero Column:** Upper sub-grid with bold uppercase manifesto copy and a `#F6D809` Signal Yellow square cell containing a rotating black wireframe globe. Below it, frame the primary B&W brutalist monument photograph with an optional interactive wireframe scan toggle.
* **Numbered Case Study Rows (`01`, `02`, `03`):** Full-width horizontal table rows with giant condensed numerals (`01`, `02`, `03`), project metadata on the left, and angled B&W architectural print/UI mockups on the right. Highlight row `02` in solid Signal Yellow (`#F6D809`) with obsidian text.

---

## 5. Dark Exhibition Poster Section ("On Display" Layout)
* **Exposed Dark Grid:** Deep `#0B0B0B` background overlaid with a visible `1px solid #222222` structural grid.
* **Overlapping Typography & B&W Architecture:** Giant off-white condensed uppercase typography (`THE FUTURE / IS ON / DISPLAY`) layered directly over cropped, upward-angled B&W brutalist concrete skyscraper photographs, paired with `EXPO 2026` exhibition dates and pavilion coordinates at the bottom.

---

## 6. High-Art Architectural Poster Section ("Soul of a Structure" Layout)
* **Split Typographic Frame:** On a stark `#0B0B0B` canvas, place massive condensed white words (`THE` top-left, `SOUL` top-right, `OF` middle-left) framing a centered philosophical stanza.
* **Optical Barcode & Cantilevered Photo:** On the left column, render a 3-tier vertical optical line barcode. On the right, frame a high-key brutalist architectural photograph stamped with a vertical barcode (`012.123543.705.10`) in the upper-right corner.
* **Sliced Orbital Footer Header:** Span massive condensed white text (`A • STRUCTURE`) across the bottom, with a tilted black oval ring slicing cleanly through the final letters.