---
description: Global layout container rules for all page sections and blocks
globs: app/**/*.tsx,components/**/*.tsx
alwaysApply: false
---

# Layout & Container Rules

Every imported or newly created block MUST follow the site's global layout container.

Full documentation: `docs/design-system/layout.md`, `docs/design-system/container.md`, `docs/design-system/sections.md`.

## Shared tokens

Use `Container` from `@/components/container` and tokens from `@/lib/layout`:

- `layout.container` / `<Container>` — `mx-auto w-full max-w-[76.8rem] px-6`
- `layout.sectionY` — vertical section rhythm (`py-16 md:py-20`; adjacent gap = 8rem / md:10rem)
- `layout.sectionTopWithHeader` — first section under the fixed header (`pt-28 pb-16 md:pt-32 md:pb-20`)
- `layout.scrollMargin` — for in-page anchors under the fixed header

## Rules

- Never let a block extend beyond the site's main content width (`max-w-[76.8rem]`).
- Always use the project's standard container width, max-width, and horizontal padding (`px-6`).
- Preserve consistent left and right alignment with all other sections.
- Do not use a different container size unless explicitly required by the design.
- Full-width backgrounds are allowed, but the content inside must remain constrained to `<Container>`.
- Maintain consistent spacing between sections via `layout.sectionY`.
- Prefer `section-shell` + optional `section-decor` / `section-content` for atmospheric sections.
- If a Shadcn/Tailark block has its own container or max-width, replace it with `<Container>` / `layout.container`.
- Remove any hardcoded width, max-width, or horizontal padding that conflicts with the site's layout.
- Before finishing a block, verify visual alignment with previous/next sections.

## Pattern

```tsx
<section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
  <Container>
    {/* section content */}
  </Container>
</section>
```

Inner text measure (`max-w-xl`, `max-w-3xl` on a heading/paragraph) is fine for readability — do not use those as section shells.