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/styles/components.css

@@ -200,3 +200,37 @@
 @utility band {
   @apply py-14 md:py-20;
 }
+
+/*
+ * THE PAGE YOU ARE ON, in the nav. A rule under the word rather than a colour change: the nav is already
+ * sage on cream, and darkening it further reads as a hover, not as "you are here".
+ */
+@utility is-here {
+  @apply text-bakery-900;
+  text-decoration: underline;
+  text-decoration-color: var(--color-bakery-500);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 8px;
+}
+
+/*
+ * The keyboard's way past the nav. Off-screen until focused, then a normal-looking button in the corner —
+ * the pattern only works if it becomes visible, which is the half everyone forgets.
+ */
+@utility skip-link {
+  @apply sr-only;
+  &:focus {
+    @apply not-sr-only fixed left-4 top-4 z-50 pill-sage;
+  }
+}
+
+/*
+ * An opening paragraph set like a printed one. Used once, on the story — a drop cap on every page would
+ * be a costume rather than a voice.
+ */
+@utility opening-para {
+  &::first-letter {
+    @apply font-adbhashitha text-6xl text-bakery-700 float-left mr-3 mt-1;
+    line-height: 0.75;
+  }
+}