Sections and cards: three grids, two quiet panels and five headings become three names

Counted first, as with the last sweep. A grid of cards was written three times with three different sets
of breakpoints and gaps, so cards on different pages lined up differently for no reason anyone chose. A
tinted aside card existed twice, hand-rolled, with different borders. A section heading existed five ways:
centred with one margin, centred with another, left-aligned with a blurb, left without.

Now `card-grid`, `panel-quiet` and a `section-head` fragment (with a cream-on-sage twin for the dark
bands). The catering small print and the contact page's "ordering for a crowd?" card are the same object
now, which is what they always were.

TWO THINGS THE SCREENSHOTS DECIDED, not taste:

Three prices go three-up from md, while the shared card grid waits for lg. A grid of photos is fine
two-wide; three prices are a comparison, and 2 + 1 on a laptop strands the third size on its own row.

And the per-table column count is entirely in one classappend rather than overriding `card-grid`, because
Tailwind emits grid-cols-1, -2, -3 in that order — so a `grid-cols-3` from the shared class beats a
`grid-cols-2` written beside it in the markup, whatever the markup says. Two classes for one property,
winner decided by the stylesheet: the same trap that stopped `hidden` from hiding the open-now line, and I
had already written it before catching it. A one-size and a two-size table were both wrong; proved the fix
by building a real two-size table through the admin and looking at it, then deleting it again.

61 tests.

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

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

@@ -36,6 +36,24 @@
   <p class="lede mt-4 measure text-bakery-800" th:text="${lede}">One line about the page.</p>
 </header>
 
+<!--/*
+  How a section begins, as opposed to a page: the title, centred, and optionally a line under it. Pass an
+  empty string for no line.
+
+  It was five different pieces of markup — centred with one margin, centred with another, left-aligned
+  with a blurb — for what is one idea repeated down every page.
+*/-->
+<div th:fragment="section-head(title, blurb)" class="measure text-center">
+  <h2 class="h2 text-bakery-900" th:text="${title}">What people come in for</h2>
+  <p th:if="${!#strings.isEmpty(blurb)}" class="mt-3 text-bakery-700 leading-relaxed" th:text="${blurb}">A line.</p>
+</div>
+
+<!--/* The same, on the sage bands, where the type is cream. */-->
+<div th:fragment="section-head-dark(title, blurb)" class="measure text-center">
+  <h2 class="h2" th:text="${title}">Before you order</h2>
+  <p th:if="${!#strings.isEmpty(blurb)}" class="mt-3 text-bakery-100 leading-relaxed" th:text="${blurb}">A line.</p>
+</div>
+
 <!--/* The branch from the wordmark, between one part of a page and the next. */-->
 <div th:fragment="divider" class="flex justify-center" aria-hidden="true">
   <span class="mark mark-r w-12 h-12 text-bakery-400"></span>