Parent: #158 Description On narrow screens the header takes about 110 px before the page content starts. The logo, the "Report a sighting" link and the dark mode switch don't fit on one row, so "Report a sighting" wraps onto a second row below the logo (see `.banner__nav` in `Banner.css`). On the search page this pushes the first result further down, after #161 made the controls and results more compact. Tasks - Fit the logo, "Report a sighting" and the dark mode switch on one row at 320 px and wider, for example with a smaller logo, a shorter visible label or less padding. - Keep "Report a sighting" easy to find and recognise as the main action. - Keep tap targets at least 24 × 24 px (WCAG 2.5.8) and keep visible focus styles. - Make sure the wordmark and the link text never break over two lines. - Check light and dark themes, keyboard use, and that the 320 px reflow and axe checks in `e2e/accessibility.spec.ts` still pass. Done when On a phone the header takes one row, the page content starts higher, and every header action is still easy to find and use with touch and keyboard.