# Layout and rhythm
A page is a stack of grounds. Rhythm comes from changing the ground, not from boxes, borders or colour. Part of the [SoR design system](README.md); see the diagram in [guide.html](guide.html#rhythm).
## Sections
- Every section runs full width, with the page gutter as side padding (`.gutter`, 16–56px) and vertical padding of 44–96px (`.section`).
- Each section opens with a small muted label (`Coming up`), then its content. Labels **name** the section; they are not numbered.
- Give each section a ground: `.ground-white`, `.ground-paper`, `.ground-sun` or `.night`.
- **Sections are full width; content is not.** A section's ground can span the whole screen, but the content inside is capped, centred, so text is never too wide on large screens: `--measure` (680px) for long-form reading, a wider container for headlines and grids. The problem to avoid is text lines stretching across a wide screen, not the colour reaching the edges.
## Rhythm of grounds
- **White is the default ground.** **Paper** (off-white) is used sometimes, to feel like paper, as in the Take part section; **sunlight** (baby yellow) at times, to bring in a little colour.
- **Torn edges between sections often**, not only around the night section: a balance, not every boundary.
- Never put two sunlight sections next to each other.
- **One night section** per page, roughly two thirds of the way down, where the page goes deep (selected work, a reading). The footer is the only other night.
The home page runs: paper header → photo hero → white → paper → **night** → sun → white → sun → white → **night** footer.
## Torn edges
Night and light meet at a torn paper edge, never a straight line or gradient. A photograph also tears into the page below it.
| Where | Markup |
|---|---|
| Top of a night section | `` as its first child |
| Straight after a night section | `` |
| Foot of a photo hero | `` (colour of the next section) |
| Top of the footer | `` as its first child |
Rule: give the tear the colour of the ground it tears **out of**.
## Grid and spacing
| Token | Value | Use |
|---|---|---|
| `--gutter` | 16–56px | page side padding |
| `--section` | 44–96px | section vertical padding |
| `--gap-m` | 16–32px | between cards |
| `--gap-l` | 24–72px | between columns |
| `--measure` | 680px | long-form reading width |
- Calm grids of two, three or four columns, falling to one (or two for pathways) under 800px.
- Two-column sections set text against a plate, usually 1 : 1 to 1.2 : 1.
- Rigour shows in structure: hairline rules between list rows, numbered figures, a contents list, footnotes.
- Sizes are fluid in `cqi` (container width), so a component previewed in a narrow frame behaves as it would on a narrow screen.
## Material
- **Paper grain** sits over the whole page (`.sor::after`, multiply, 14%).
- **Photographs sit clean**: flat, square, no mount, tilt or shadow. The postcard style (`.print`) is retired: don't use it.
- **Printed objects** (magazine, book) get a deeper shadow (`--shadow-object`).
- No rounded corners, no card shadows, no borders around sections.