The field is one field

Every element that paints the weave starts its tile at its own top edge. Stack three sections and the pattern resets three times, so the tiles never meet and each boundary reads as an accidental header bar. --field-y shifts each layer by that section's distance down the document, so the page becomes a single field: the ink flips at a seam, the grid never does.

Wrong โ€” reset per section

Tickets
Benefits
News

Each layer tiles from its own top. The T shapes restart at every edge and the seams read as bars.

Right โ€” one continuous field

Tickets
Benefits
News

Each layer is offset by its distance down the page. Only the ink changes at a seam.

Two grounds. Never a third.

field-navy
field-fog

The whole palette of section backgrounds. A panel on fog is #fff; a panel on navy is var(--navy).

mist as a band
field-fog

Banned. --mist is a chip and an avatar colour. Filling a band with it reads as a third ground.

How to use it: put .field plus .field-navy or .field-fog on the section, and load field.js. The script writes --field-y on load, on resize, after the fonts swap, and on any body resize, because all of those move the sections below them.

A sticky app bar is deliberately excluded. It slides over the content, so it can never stay in register: give it its own ::before, the way .appbar does, and a rule along its bottom edge.