Layout density and liquid reading surfaces

Purpose

ModelBreeder.com is a large technical curriculum. Its pages should feel dense, capable, and easy to scan. The layout should use available horizontal space instead of trapping the reader in a narrow column with unused space beside it.

The design contract is simple:

• use the full shell for page structure;
• keep article text readable with a paragraph line-length cap;
• let diagrams, tables, tools, evidence panels, and code blocks expand wider than prose;
• keep the sidebar close to the article instead of creating a large dead gutter;
• collapse navigation before it creates horizontal scroll;
• avoid oversized headings that make technical titles look like billboards.

What changed

The article shell now behaves as a liquid two-column reading surface. The left rail remains compact, while the main column expands to consume the remaining width. Paragraphs retain a readable maximum line length, but wide components can use the broader content area.

This is the desired pattern for long technical pages:

VIEWPORT
  ├─ shell: nearly full width with comfortable edge padding
  ├─ sidebar: compact table of contents and section navigation
  └─ article: fluid content area
       ├─ prose: capped for readability
       ├─ code: full available width with horizontal scrolling when needed
       ├─ tables: full available width
       ├─ diagrams: full available width
       └─ tools: full available width

Heading scale

Technical page titles can be long. A title such as “Apex Multi Model: Building the Highest-Value Governed Model Ecology” should read as a strong engineering headline, not consume the whole first screen.

The new heading scale uses:

article title: smaller clamp, wider max line length, balanced wrapping
section title: readable but not oversized
subhead: compact enough to preserve vertical rhythm

The goal is not smaller design. The goal is better information density.

Sidebar spacing

The table of contents is useful, but it should not create a wide empty canyon between navigation and content. The layout now keeps the rail close enough to be useful and sends the saved width to the article area.

BEFORE
sidebar ─────────────── blank gutter ─────────────── article

AFTER
sidebar ── useful gap ── fluid article surface

Liquid component rule

Long-form prose should stay readable. Technical artifacts should expand.

IF component IS prose paragraph OR normal list
    cap width near readable line length
ELSE IF component IS diagram OR table OR code OR tool OR evidence panel
    allow component to use the full article width
END IF

This lets the site teach complex systems without making every diagram and table feel cramped.

Navigation rule

The desktop navigation should never force the page wider than the viewport. When the header cannot fit comfortably, it switches to the existing accessible menu button. That preserves the header without creating hidden horizontal overflow.

Implementation checkpoint

A layout-density release is complete when these checks pass:

• article pages have no body-level horizontal scroll at common desktop widths;
• the article title fits above the fold more often;
• the article content column expands beyond a fixed narrow width;
• the space between table of contents and content is intentional, not accidental;
• code, diagrams, tables, and tools can use full width;
• mobile layout remains single-column and keyboard-accessible.

Builder rule

Future design work should prefer useful density: fewer dead gutters, less oversized type, more visible working content, and layouts that adapt to the available surface.