Atelier Noir. Built from one prompt.

Build a single-screen brutalist agency page for "ATELIER NOIR" using React, TypeScript, Vite, Tailwind CSS. Pure black-and-white, no images, typography does all the work.

FONTS: "Archivo Black" and "Archivo" (400, 500) from Google Fonts; utilities `.font-black-face { font-family: 'Archivo Black', sans-serif; }` and `.font-archivo { font-family: 'Archivo', sans-serif; }` in src/styles.css.

LAYOUT: white page (`bg-[#f4f4f0]`), a full-height CSS grid of 3 rows: marquee band / center split / footer band, text color `#111111`.

MARQUEE BAND (top, border-b `border-[#111] border-b-2`, py-4, overflow-hidden): an infinitely scrolling line — the phrase "GRAPHIC DESIGN — ART DIRECTION — TYPE SYSTEMS — MOTION — " repeated twice inside a flex track animated with `@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }` at `animation: marquee 18s linear infinite`. Text in `font-black-face text-[15px] tracking-[0.15em] whitespace-nowrap`.

CENTER SPLIT (grid md:grid-cols-2, flex-1):
- Left cell (border-r-2 border-[#111], p-8 sm:p-14, flex flex-col justify-between):
  - "ATELIER NOIR®" in `font-black-face text-[clamp(2.8rem,7.5vw,6.5rem)] leading-[0.9] tracking-[-2px]`
  - Below: "A two-person studio with a fifty-person attitude. We take four clients a year. One slot is open." in `font-archivo text-sm max-w-xs leading-snug`
- Right cell: four stacked project rows, each `border-b-2 border-[#111] px-8 py-6 flex justify-between items-baseline cursor-pointer transition-colors duration-150 hover:bg-[#111] hover:text-[#f4f4f0]`:
  - "KAFKA RECORDS" / "IDENTITY — 2025"
  - "TANGENT LABS" / "PRODUCT SITE — 2025"
  - "MUSEUM OF NOISE" / "EXHIBITION — 2026"
  - "HALFLIGHT FILMS" / "TITLES — 2026"
  Row names in `font-black-face text-xl sm:text-2xl tracking-tight`, years in `font-archivo text-[11px] tracking-[0.3em]`.

FOOTER BAND (border-t-2 border-[#111], px-8 py-5, flex justify-between items-center, font-archivo `text-[11px] tracking-[0.3em] uppercase`):
- Left: "PARIS — 48.8566° N"
- Center: a live 24h clock "HH:MM:SS" updated every second via useState + setInterval, rendered in `font-black-face text-[15px] tabular-nums`
- Right: "NOIR@ATELIER.STUDIO" with `underline underline-offset-4`

The page loads with everything visible instantly EXCEPT the left wordmark, which stamps in with `@keyframes stamp { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }` over 0.35s steps(3). Single App.tsx + src/styles.css, no routing.

brutalistmarqueemonochrome