# Header27 → Ren10 Translation Map

## Mandatory contracts loaded

Loaded `ren-design.md`, token/layout/Primitive Zero/component routers, and the
button/field contracts.

## RenDS mapping

- Labelled native section → content-height landmark.
- Constrained outer composition → `ren-center ren-center-wide` + `ren-stack`.
- Centered copy/form region → nested `ren-center` + `ren-stack`.
- Email → one `ren-field`, visible label, required native input, one linked error.
- Responsive form → `ren-switcher`, stacked through 639 and nowrap from 640.
- Submit → one native `.ren-btn`; legal → native paragraph/real terms anchor.
- Media → one `figure.ren-frame` with owned local meaningful intrinsic image.
- Enhancement → one root-scoped module announces valid success; native action remains.

## Cascade risks

Reset native margins; protect `[hidden]` error against the
`ren-field-error` display rule; avoid duplicate required/error/status; keep image
after copy in DOM; do not add generated media chrome or raw flex/grid skeletons.

## Responsive adaptation

Copy and form remain centered above the image at every width. The form stacks
through 639px and becomes a field/submit row from 640px. Section and copy/media
gaps increase at the medium band.

## Progressive enhancement

Native form action, required email semantics, terms and image work without
JavaScript. One scoped module adds only valid-submit success feedback.

## Rejected mappings

Raw grid/flex, duplicated mobile forms, placeholder-only label, fragment terms,
console-only submission, remote media, and extra image/video controls are rejected.