Content is readable without pinch-to-zoom

Body text set below 16px forces mobile users to pinch-to-zoom to read paragraph content — a friction that most users will not perform, choosing instead to abandon the page. WCAG 2.2 SC 1.4.10 (Reflow) requires content to present without loss of information at 320px viewport width, and SC 1.4.4 (Resize Text) requires text to scale to 200% without loss of content. Text rendered inside <img> elements cannot reflow at all and pixelates when zoomed. Overly wide line lengths (beyond ~75ch) cause the opposite problem on tablets: long horizontal eye travel that increases reading error rates and fatigue.

Set a readable baseline in src/app/globals.css:

body {
  font-size: 1rem;      /* 16px — never go below this for body text */
  line-height: 1.6;
}

.prose {
  max-width: 65ch;      /* keeps line length readable on tablets */
  margin-inline: auto;
}

.secondary {
  font-size: 0.875rem;  /* 14px acceptable for captions and metadata only */
}

In Tailwind, text-base leading-relaxed max-w-prose on your main content wrapper covers all three rules. Replace any text content rendered as images with actual text elements — images of text fail WCAG 2.2 SC 1.4.5 and cannot reflow.