Case scrollspy anatomy

A photo essay: each of the four sections opens on a large captioned photograph at one 16:9 crop, then several paragraphs of story, so the pictures open each chapter and the narrow rail keeps the reader's place through the long read between them. The story ends in a results ledger rather than another chapter.

Services scrollspy index is text-led: five long service chapters with a numbered rail, where the column of prose does the explaining. Handbook scrollspy directory is a directory, ten to twelve look-up entries where the rail is the thing you scan. This one is image-led: four sections, each a picture first, a caption and a few paragraphs, with an unnumbered rail because four chapters need names, not an index. It is the only one whose resting picture is a photograph.

1. The four photographs: select each and choose Replace; the 16:9 crop and cover setting stay. Rewrite the alt text and the caption for each.
2. Rewrite the four named Section groups; each Heading names its rail link.
3. Replace the ledger figures with measured results.
4. Keep the section titles at h3 below the h2 masthead, or adjust the hierarchy for the page they sit on.

Every font and colour comes from the theme. Body text and captions need 4.5:1 contrast; the masthead heading and the ledger figures need 3:1.

It decides a padded full-width Group with a 1200px content ceiling, a compact masthead above the block so the first photograph shows at rest, a 176px unnumbered rail with a 40px gap, one 16:9 crop for all four photographs, and a three-column results ledger closing the last section. Section titles are on the theme's large rung and the ledger figures on x-large: hierarchy, not display.

The plugin draws the rail and marks Brief, Approach, System or Result as the reader reaches it. Without it, the masthead is followed by the four photo sections as a plain stack; with reduced motion the rail stays and anchor links jump instantly.