Move handbook meta info inside complementary landmark

[outdoor2kode]

Closes #400.

This PR moves the handbook meta above the chapter list in the HTML hierarchy and then uses flex order to visually place it below the chapter list, and also adding a dividing line between them.

Below is a screencast that shows when entering the complementary landmark, the screen reader first reads the handbook content and then the chapter list, which I suppose meets the request. Regarding the desktop view and @jasmussen's question about how it would look in mobile view when the three columns just became rows, could @WordPress/meta-design take a look and give some feedback?

Screen.Capture.on.2024-02-20.at.05-29-54.mov

[ryelle]

This introduces a difference between source order and visual order, so when tabbing through, the focus moves to the meta before the chapter list. This works for sighted mouse users & non-sighted keyboard users, but could be confusing for anyone sighted using keyboard nav or a screen reader. Especially when the meta is pushed down the screen by the Chapter list, the focus jumps around a lot.

keyboard-nav.mp4

This is worse on small screens, since the chapter list is already pulled out of order, it jumps up and down.

keyboard-nav-small.mp4

Maybe it could be moved to after the Chapters list in the source as well?

[jasmussen]

The source order & visual order is the challenge at hand here, because visually it looks nice. The main challenge here is that hierarchically, ideally we have chapters > toc > content. Across desktop that's a row of 3 columns, on mobile it's a stack of 2 collapsed elements (chapters and docs in thar order), and then content.

Can the meta info live inside the chapters element? Would that thread the needle?