Title

Testing Visual Hierarchy in Long-Form Articles

This document exists purely to test headings, images, and code block visibility after recent CSS refinements.

This Is a Level Two Heading

You should immediately notice that this heading:

• Is larger than body text
• Has clear spacing above it
• Feels like a structural boundary, not just bold text

If this does not stand out clearly, the issue is not content—it is typography.

This Is a Level Three Heading

This heading should feel subordinate to the H2 above it.

It introduces detail, not a new section. If it feels equally strong as the H2, hierarchy is broken.

Headings Should Reset Attention

A reader scanning the page should be able to identify section boundaries instantly.

Headings are not decoration. They are navigation aids.

Code Blocks Must Visually Assert Themselves

The following block should:

• Have a clearly gray background
• Have a visible left boundary
• Feel separate from prose

function example(input) {
  if (!input) {
    throw new Error("Input is required");
  }

  return {
    status: "ok",
    received: input,
    timestamp: new Date(),
  };
}

If this block blends into the surrounding text, the background is too subtle.

Inline code such as example("test") should remain readable but restrained.

Images Must Render Reliably

The image below should load from the public directory.

If it does not:

• The path is wrong
• Or the file does not exist

You should see:

• A centered image
• No stretching
• Natural spacing above and below

Image Alignment Test (Left)

The image below is intentionally aligned left.

{.align-left}

Text following this image should:

• Flow naturally
• Not wrap awkwardly
• Maintain comfortable line length

Lists and Structure Still Matter

Unordered list test:

• First item
• Second item
• Third item

Ordered list test:

1. Step one
2. Step two
3. Step three

Lists should feel calm and readable, not cramped or decorative.

Visual Breaks

Horizontal rules should feel like a pause in thought, not a hard stop.

Final Sanity Check

If this document reads comfortably without visual strain:

• Headings are working
• Code blocks are readable
• Images are rendering correctly

At that point, the content layer is doing its job.

END OF TEST DOCUMENT