monopo saigon

Build the "monopo saigon" kickstart — A studio portfolio shaped by monumental type and a ribbon of liquid light.

## Design
Build Elsewhere, an independent fictional design studio. Use a monochrome interface with one organic green/amber/oxblood hero environment. White #FFFFFF paper, black #000000 ink and outlines, #181818 inverse canvas, #6D6D6D supporting text, #636363 neutral surface. Full-width imagery, a 1078px editorial column, 4px spacing rhythm, sharp corners, no shadows, and 75px pill actions define the system. Use Inter, system-ui, sans-serif as the locally hosted substitute for Roobert. Desktop display type reaches 225px at weight 400; section statements use 78px at 300. Keep body text 18px and navigation 12px. Restrict chromatic color to the hero artwork. Patient transitions use cubic-bezier(0.19,1,0.22,1). Adaptation: use safe responsive line heights and 14px minimum supporting labels; darken the art beneath white text. All text/background pairs must meet WCAG AA.

Original page composition at 1440×900: make the hero 716px tall with a 36px outer inset for its navigation and captions. Place a small two-line elsewhere / independent studio wordmark at upper left. Put DESIGN & ART DIRECTION at the horizontal center and three plain navigation links, Work / Studio / Contact, at upper right. Give the links real section targets. Use a black top scrim behind small white text. The hero heading is New ways / of seeing. on two centered lines at around y=210. Keep it regular-weight, tightly tracked at -0.065em, with line-height 0.93 and a maximum size of 225px. It must be actual selectable HTML and leave ample space around the navigation. There is no competing hero button. Near the hero's lower edge, put an outlined 52px circular down-arrow link at left, a short two-line note We connect curious people / with unexpected possibilities. at right, and a small centered marker INDEPENDENT BY NATURE. The arrow has an accessible label, Explore selected work.

The original backdrop should resemble a softly folded ribbon of light, not a stock photograph: construct an aria-hidden SVG field with broad overlapping curved paths, a diagonal sage-to-amber-to-burgundy gradient, soft blur, a few narrow pale edges and deep ink pockets. Let it occupy the hero only. Keep it static, local and vector; the page screenshot is captured from rendered HTML, never assembled or painted as a page image. The region directly beneath the title must remain dark enough for the large white letters, and all small text sits on the dark outer margins. The artwork is decorative and contains no text. No copied logos, media or illustrations.

At y=716 switch abruptly to white paper. The Selected work index begins with a 14px eyebrow, SELECTED WORK / 2024—2026, on the left and an outlined See the projects pill link on the right, followed by a hairline rule at y=832. Use 56px vertical padding and the 1078px centered column. The first project title just enters the 900px frame. Below the fold show three spacious numbered rows, each a native details/summary disclosure with a project title, discipline, year and plus indicator. Use an expanded minus indicator when open. Projects are Counterform / Identity & packaging / 2026; Quiet Assembly / Digital experience / 2025; Common Ground / Editorial direction / 2024. Each disclosure reveals original copy and a grayscale typographic composition made in HTML/CSS. No colored project cards, raised panels or rounded images. Descriptions must be selectable text, with no information locked in the artwork.

The Studio approach section has a small studio label beside a large left-aligned statement, Good questions. / Unexpected answers. Under it use three short columns: Notice, Connect, Make. Keep them as text on paper without boxes. The Project inquiry and footer section reverses to #181818 with a large Have something / in mind? heading, an outlined Read the inquiry guide anchor, and visible sample contact [email protected]. Link the anchor to a native disclosure explaining what to include in an inquiry. Explicitly label the address as fictional; do not create a form that implies delivery. Close with a plain Back to top anchor and a Fictional studio / Original design study note.

At widths under 760px, remove only the decorative centered navigation caption, keep all three navigation links available in a wrapping row, reduce gutters to 20px, set the hero heading with clamp(58px,15.4vw,116px) and the hero minimum height to 620px. Prevent horizontal page overflow at 320px. Stack project metadata, studio columns and footer content. Controls have 44px targets and visible focus rings; summary supports native keyboard activation. Keep everything visible with JavaScript disabled. Honor prefers-reduced-motion; avoid looping animation, canvas, video and hidden entrance states. The serif-free composition relies on whitespace and scale rather than effects.

## Tech stack
Use the latest stable Next.js (App Router), React and TypeScript, with CSS custom properties and a small global stylesheet. Keep equivalent existing project choices. Technology list:
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use server-rendered semantic sections, ordinary fragment anchors for same-page navigation, next/link for application routes and native details/summary for project disclosures. No client runtime is needed for the sample interactions. Define the original atmospheric SVG inline. Bundle an openly licensed Inter font locally when available; otherwise use system-ui without a remote font request. No external asset host, database, paid service, account, analytics or API key is required. Keep the initial content complete without JavaScript.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Create a rebrandable creative-studio portfolio with native project disclosures. The sample identity is Elsewhere and all work is fictional, with no implied client relationship or affiliation. Its proposition is independent design and art direction, expressed through the original headline New ways of seeing. Use the exact page sections in order:
1. Floating studio navigation
2. Atmospheric typographic hero
3. Selected work index
4. Studio approach
5. Project inquiry and footer

Write the following original project descriptions in the disclosure bodies: Counterform — A modular identity for an imagined objects workshop. A simple letter system turns everyday packaging into a small moment of discovery. Quiet Assembly — A reading-first digital home for an imagined cultural program. Clear navigation gives a changing calendar room to breathe. Common Ground — An editorial study of shared spaces and the people who shape them. A consistent grid makes room for different voices.

Notice: We begin with the detail everyone else walks past. Connect: We bring ideas, people and disciplines into the same room. Make: We turn a useful question into something you can see and use. Keep all claims modest; do not invent awards, customers, addresses, testimonials or metrics.

Work navigation and See the projects scroll to the project list; Studio scrolls to the approach; Contact scrolls to the inquiry guide. Each project expands and collapses using its summary and remains usable with keyboard and JavaScript off. The inquiry guide lists project context, desired outcome and timing as preparation notes, and clearly says this fictional demo sends nothing. The sample address uses the reserved .example domain and is plain text. Do not add a cookie banner when there are no cookies or trackers. Provide one h1, descriptive landmarks, a skip link, visible focus and a meaningful document title. Keep the palette and type rules consistent across sections and ensure the rendered sample matches the brief.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.