Fieldwork — Audio Catalog (Light)

Build the "Fieldwork — Audio Catalog (Light)" kickstart — Portable sound tools, presented with the precision of an industrial catalog.

## Design
An industrial audio catalog with a pale mineral canvas, strict ruled bands, airy editorial spacing and original equipment as the focal point. Use a 1280px maximum column with 64px desktop gutters. A 92px masthead has a compact lowercase wordmark and three quiet links. The hero is a two-column composition: a small edition label, a 76px two-line headline and concise description on the left; an oversized original three-channel field mixer on the right. Construct the mixer as inline SVG: a flat graphite chassis, three pale vertical fader channels, circular knobs, tiny numbered labels and one acid-yellow record key. It is fictional hardware, not a tracing of a commercial product. Behind it is a pale sage rectangle, a large outlined circle and four small registration marks. Product art may have a restrained offset base to suggest thickness, but no photographic assets or UI drop shadows. An engineering caption and an aligned specs rail ground the hero. Below, a ruled catalog strip introduces three products, followed by a dark field-notes band, specifications, support and footer. UI edges are square and decoration is sparse.

Palette: background #F4F5F0, surface #E6E8E1, ink #22271F, muted #5E6559, accent #D9F06B, accentInk #22271F, border #CCD0C4. Use dark ink on the acid accent; use the accent only for the record key and small markers.

Use the system sans-serif stack Arial, Helvetica, sans-serif for headings and body, with ui-monospace for engineering captions. Headings are normal weight with -0.055em tracking and tight leading: 76px desktop hero, 44px section titles, 22px product names. Body is 16px/1.6; mono labels are 11px/1.5 with modest tracking. Keep muted copy readable; never imitate ultra-thin low-contrast text.

Page structure:
1. Header: lowercase fieldwork wordmark with a small square mark; links Instruments, Field notes and Support; right-aligned Catalog / 01 label.
2. Hero: left edition label PORTABLE SOUND / SERIES 01, headline Small tools. / Wide horizons., two-line introduction, Explore instruments button and a Read the field notes text link. Right: original FW–03 mixer illustration, short model caption and numbered product annotation.
3. Spec rail: three equal cells reading 03 independent channels, 12h away from a socket, and 480g carry less, hear more. Treat these as fictional demo specifications.
4. Instruments: heading Made to go with you., a View specifications anchor and three equal product panels for FW–03 Field mixer, FW–01 Pocket recorder and FW–02 Contact microphone; original geometric SVG artwork and a one-sentence use case for each.
5. Field notes: dark band with issue number, a short story about collecting everyday sounds, and a link to a real on-page expanded article.
6. Specifications: accessible comparison table for channels, power and weight; all numbers clearly demo content.
7. Support and footer: native disclosure questions for power, care and compatibility, then wordmark, navigation and a fictional-concept notice.

Square 48px buttons, dark fill with light text for the main action, plain underlined secondary links and 2px visible focus outlines. Product panels are flat with thin top rules, no rounded cards. Use a semantic table for specs and native details/summary for support. Render all artwork locally as inline SVG with a meaningful accessible title when informative; decorative circles and registration marks are hidden from assistive technology.

All content is visible on first paint with no entrance animation. Optional 120ms color transitions on links and buttons only; disable them for prefers-reduced-motion. No parallax, marquee or autoplay.

## Tech stack
- Next.js (App Router)
- TypeScript
- React Server Components
- Plain CSS
- Inline SVG

Use plain CSS custom properties, system fonts and inline SVG. Use semantic HTML and native details/summary; no UI library, remote font or image hosts, paid APIs, backend, authentication or database are needed. Use client JavaScript only if a requested interaction cannot be expressed with HTML.
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
Build a fictional portable audio-equipment catalog and editorial landing page. Fieldwork is a fictional portable audio studio for curious listeners. Use calm, concrete copy about recording found sounds. Demo products: FW–03 Field mixer, FW–01 Pocket recorder, FW–02 Contact microphone. No real brands, logos, testimonials, awards or sales claims. The main action browses instruments; this is a catalog, not a checkout.

Provide functional same-page navigation to instruments, field notes, specifications and support. Expand the field-note story on the page rather than linking to a missing route. All support disclosures work by keyboard. Do not create a pretend checkout, email capture or dead buttons. Mark specifications as illustrative demo values. Preserve a single h1, landmarks, a skip link, accessible names and visible keyboard focus. At widths below 800px stack the hero and catalog; scale the mixer fluidly and let the spec table scroll inside a labelled region without page overflow. At 320px retain 20px gutters. Use no external brand names or reference URLs in the finished page. Ship responsive CSS and finished original copy, with no lorem ipsum.

### 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.