Navigation: prominent active state for current page

[simonives]

Problem

The active class is applied to the current page's nav link in the HTML, but its visual differentiation is minimal. Users cannot clearly see which page they are on without reading the heading.

Solution

Implement a more prominent active state on the .nav-links a.active selector. Options:

• An Aurum underline (2px, persistent — not just on hover)
• A subtle colour shift toward Aurum
• A combination of both

The active state should be clearly distinct from the hover state. Do not use bold weight alone — this causes layout shift.

Acceptance criteria

• Current page is immediately identifiable in the navigation on all pages
• Active state is visually distinct from hover state
• Works correctly in both light and dark mode
• Keyboard focus state is preserved and visible alongside the active state