# Header 31–35 Ren10 translation design

## Objective

Translate the next five Relume Hero Header Sections—Header 31 through Header
35—into standalone Ren10 blocks. This is the first batch in the remaining
header-family completion phase. CTA blocks begin only after every currently
listed Hero Header Section has been translated.

## Source and fidelity

- The authoritative external reference is the current Relume Hero Header
  Sections catalog and the individual Header 31–35 component records.
- Each block receives a sanitized local reference brief that records anatomy,
  responsive behavior, media type, actions, and interaction states without
  copying protected source code, proprietary copy, or remote assets.
- The translation preserves the reference component's information hierarchy
  and interaction model while using original Ren10 copy and repository-owned
  media.
- No extra controls, decorative sections, forms, or interactions are added when
  they are absent from the reference.

## Implementation contract

- Vanilla HTML, CSS, and JavaScript only.
- Layout uses documented Ren10 layout primitives. Two-dimensional compositions
  use `ren-grid`; no Flexbox is used to implement a reference grid.
- Styling uses semantic or component tokens only. No palette primitives,
  hardcoded chromatic values, Tailwind classes, frameworks, or Shadow DOM.
- Each page uses the shared `bb-detail-page`, `bb-detail-header`,
  `bb-detail-preview`, and `bb-block-pagination` shell.
- Detail-header child margins remain zero. The page grid owns the exact 32 px
  separation between header, preview, and pagination.
- Every interactive element is a native control with an accessible name,
  visible focus, keyboard behavior, a minimum 44 px target, and reduced-motion
  handling where relevant.
- Media includes truthful intrinsic dimensions, appropriate alternative text,
  and a local or already-owned source.

## Batch structure

Each Header 31–35 module contains:

1. A reference packet and sanitized brief under
   `docs/workflows/relume-to-ren10/modules/headerN/`.
2. One standalone block under `templates/blocks/`.
3. One focused Playwright specification under `tests/components/`.
4. One catalog entry in `templates/blocks/index.html`.
5. Previous/next navigation that continues the header chain without broken
   destinations. Header 30 points to Header 31 after the first block lands.

## Responsive behavior

- Validate at 320, 390, 767, 768, and 1280 px whenever the reference changes
  layout at the medium breakpoint.
- Mobile keeps a minimum useful content width, stacks in source order, and has
  no horizontal overflow.
- Desktop reproduces the reference column proportions and alignment through
  CSS Grid and Ren10 layout primitives.
- Content-height references remain content-height; fullscreen references use a
  controlled cover with bounded behavior inside the standalone preview shell.

## Validation and acceptance

Every block must pass:

- Anatomy and source-order assertions.
- Responsive geometry and zero-overflow assertions.
- Real, resolvable CTA and pagination destinations.
- Keyboard, focus, touch-target, no-JavaScript, and reduced-motion checks where
  applicable.
- Axe WCAG 2.1 AA checks in relevant closed and open states.
- Shared-shell assertions: CSS Grid page, zero accumulated child margins,
  exactly 32 px outer gaps, and two valid pagination links.
- Repository token, CSS contract, and formatting checks.
- A browser review at desktop and mobile before batch completion.

The batch is complete only when all five pages are cataloged, visually
reviewed, connected in sequence, and their focused test matrix passes.