Say where you are, let the keyboard past, and give the story pictures

THE NAV NEVER SAID WHICH PAGE YOU WERE ON. A four-page site gets away with that right up until somebody
clicks Catering, lands on a page of prices, and cannot tell whether the click worked. The current page now
carries aria-current for a screen reader and a sage rule under the word for everyone else — a rule rather
than a darker colour, because the nav is already sage on cream and darkening it reads as a hover. The list
is generated from one array now instead of four hand-written anchors, which is what makes the marking
possible at all.

THE KEYBOARD HAD NO WAY PAST THE NAV. Every page begins with a skip link — off-screen until it has focus,
then a real button in the corner, which is the half of that pattern everyone forgets.

THE STORY WAS FOUR BLOCKS OF TEXT. It has photographs between the sections now, captioned in small caps,
and an opening paragraph set with a drop cap in the display face. Once, on that page: a drop cap on every
page would be a costume rather than a voice.

60 tests. Two new ones, both on things that fail silently rather than loudly: the active link (a wrong
model attribute would mark nothing, which looks exactly like a page with no active link) and the skip
link's target existing.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/main/resources/templates/fragments/header.html

@@ -55,13 +55,18 @@
   </div>
 </header>
 
-<!--/* One list of links, worn two ways — so the phone and the desktop can't end up offering different
-       pages. */-->
+<!--/*
+  One list of links, worn two ways — so the phone and the desktop can't end up offering different pages.
+
+  The page you are on is marked: aria-current for a screen reader, and a sage rule under the word for
+  everyone else. A four-page site can get away without it, right up until someone clicks Catering, lands
+  on a page of prices, and has no idea whether the click worked.
+*/-->
 <th:block th:fragment="links(itemClass)">
-  <a href="/products" th:class="${itemClass}">Our Products</a>
-  <a href="/catering" th:class="${itemClass}">Catering</a>
-  <a href="/history" th:class="${itemClass}">Our Story</a>
-  <a href="/contact" th:class="${itemClass}">Contact</a>
+  <a th:each="item : ${ {{'/products','Our Products'},{'/catering','Catering'},{'/history','Our Story'},{'/contact','Contact'}} }"
+     th:href="${item[0]}" th:text="${item[1]}"
+     th:aria-current="${path == item[0] ? 'page' : null}"
+     th:class="${itemClass} + (${path == item[0]} ? ' is-here' : '')">Our Products</a>
 </th:block>
 </body>
 </html>