# Spec: Layouts (Layer 11)

File: `src/layers/11-layout.css`

## Purpose

Page-level layout systems. Controls how landmarks arrange on the page. Selected via `data-layout` attribute.

## Layout Types

### `data-layout="docs"` — Documentation
Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.

### `data-layout="console"` — Console
Docs variant: sidebar flush to viewport edge. Prototype — not yet used in production.

### `data-layout="grid-2"` / `data-layout="grid-3"` — Grids
Multi-column content grids for cards, galleries, dashboards.

### Essay layout
Long-form prose with table of contents. Wider reading measure, typographic refinements.

### Prose width
`--width-prose` constrains content to readable line length within any layout.

## Scope

### In scope
- `data-layout` attribute styling
- Prose width constraints
- Responsive layout breakpoints
- Essay/long-form layout variant

### Out of scope
- Landmark styling within layouts (→ landmarks layer)
- Navigation behavior within layouts (→ navigation layer)

## Constraints

- References only semantic aliases from `01-tokens.css`
- Layouts must degrade gracefully on mobile (single column)
- No layout should require JavaScript