Risograph / Print

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Editorial
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Risograph / Print (visual-effect)
- Two ink layers with overlapping color
- Fine monochrome grain inside images
- Small static registration offsets between ink layers
- Light paper surfaces with unfiltered readable controls

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #A72C39, secondary #2463A6, accent #F2C766, background #FFF9EF, text #2B2926
Typography: DM Sans for headings, DM Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #FFF9EF;
  --tx-font-heading: "DM Sans", sans-serif;
  --tx-font-body: "DM Sans", sans-serif;
  --tx-surface-bg-image: radial-gradient(#2B292610 1px, transparent 1px);
  --tx-card-bg: #FFFDF7;
  --tx-card-border: #A89A87;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: 3px 3px 0 #D9CBB8;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #2463A6;
  --tx-card-shadow-hover: 5px 5px 0 #D9CBB8;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #60574E;
  --tx-text-subtle: #746656;
  --tx-link-color: #A72C39;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #8A7C6B;
  --tx-text: #2B2926;
  --tx-primary: #A72C39;
  --tx-secondary: #2463A6;
  --tx-accent: #F2C766;
  --tx-media-filter: url("#tx-media-effect");
  --tx-media-ink-1: #D44550;
  --tx-media-ink-2: #2463A6;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use printed image blocks on a light paper surface. Keep the content grid simple and leave space around illustrations.
- Apply the ink effect to images only. Keep text, form labels, and controls crisp.

## Interaction
- Keep ink registration and grain static. Use ordinary focus outlines and clear button states.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Risograph / Print: Medical, product, or technical images whose original colors carry important information.

## Image treatment
Image treatment: risograph. Use ink colors #D44550 and #2463A6.
Add this SVG filter definition once. Apply filter: var(--tx-media-filter) to images and illustrations only. Keep text and controls unfiltered.
```svg
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true"><defs><filter id="tx-media-effect" x="-5%" y="-5%" width="110%" height="110%" color-interpolation-filters="sRGB"><feColorMatrix in="SourceGraphic" type="saturate" values="0" result="gray"/>
      <feComponentTransfer in="gray" result="ink1"><feFuncR type="table" tableValues="0.8313725490196079 1"/><feFuncG type="table" tableValues="0.27058823529411763 1"/><feFuncB type="table" tableValues="0.3137254901960784 1"/></feComponentTransfer>
      <feComponentTransfer in="gray" result="ink2"><feFuncR type="table" tableValues="0.1411764705882353 1"/><feFuncG type="table" tableValues="0.38823529411764707 1"/><feFuncB type="table" tableValues="0.6509803921568628 1"/></feComponentTransfer>
      <feOffset in="ink2" dx="3" dy="-3" result="shifted"/>
      <feBlend in="ink1" in2="shifted" mode="multiply" result="print"/>
      <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" seed="7" result="noise"/>
      <feColorMatrix in="noise" type="saturate" values="0" result="grain"/>
      <feComponentTransfer in="grain" result="faint-grain"><feFuncA type="linear" slope="0.18"/></feComponentTransfer>
      <feBlend in="print" in2="faint-grain" mode="multiply"/></filter></defs></svg>
```

## Components
Generate the following components in this style:
- Navbar
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.