Objects

Section

The base <section> rhythm and the two skins every section can wear.

Base rhythm

Every bare <section> element gets the same vertical padding from the --section-y token and horizontal padding from --gutter — the shared spacing rhythm behind every content band on the site. No component overrides this directly; components add their own internal spacing on top of it.

<section id="ledger">
  …
</section>

Dark (default)

A bare section with no skin class renders on the dark ground color (--iron), with bone text. This is the default across most of the site — the hero, trust strip, service rows, job grid, team and closer form all use it. Pair it with the on-dark class where a section also needs the shared text-emphasis skin (controls how <em> renders inside headings — see SCSS Architecture).

<section class="trust on-dark" aria-label="Trust facts">
  …
</section>

Paper (light)

Add .paper to switch a section to the light ground color (--paper) with ink text. It also recolors the shared .m mono-label class and the .kicker label (adding a small amber square before it) so those type utilities read correctly against the light background without any per-component override. Pair it with on-paper for the light text-emphasis skin.

<section class="manifesto paper on-paper" id="rules">
  <span class="kicker">THE HOUSE RULES</span>
  <p class="big">You&rsquo;re letting strangers into the room…</p>
</section>

Welds-up modifier

Add .welds-up to a section that should visually weld to the section directly above it — it drops the section's own top padding so two adjacent bands read as one continuous piece instead of leaving a gap between them (used, for example, where the ledger stat rows sit directly under the manifesto with no seam).

<section class="ledger paper welds-up" id="ledger">
  …
</section>