Three bugs and a lighter page: 367 KB of fonts became 57

THE BUGS.

Tapping any field zoomed the page in on iOS, because Safari does that to anything under 16px and `field`
was 14px. Every enquiry typed on a phone began by throwing the layout sideways. 16px on phones, the denser
size back at sm where no browser does it.

The focus ring vanished on the sage bands: one colour for the whole site, and sage-500 on sage-800 is
about 2.5:1 — under the 3:1 a focus indicator needs. It went missing exactly where the page's main calls
to action live. Cream on those sections now.

THE FONTS. AdBhashitha shipped 1605 glyphs to set 187 codepoints, as .woff, unpreloaded: 306 KB for the
face every heading uses, arriving after first paint so each page opened in a fallback serif and then
reflowed. Subset to Latin and the punctuation it actually has, every layout feature kept, compressed to
woff2: **306 KB → 8 KB**, and a pixel diff of the catering page before and after is exactly zero. The
script wordmark is only recompressed, never subset — its swashes come from alternates and the logo is the
one thing that must not change shape. All three faces are preloaded now and together weigh less than the
display face did alone.

THE REST OF THE LIST. The products filter wrapped to three rows on a phone with "PASTRIES" stranded on the
last; it is a scrolling snap row below sm, wrapping and centred above it, and the negative margin lets a
half-chip show at the edge so it is obviously scrollable. Chips are 44px tall and the gallery arrows 44px
wide — both were under the thumb-sized minimum. The contact form has a honeypot: a real field with a
plausible name, off-page rather than display:none, skipped by the tab key. A filled one gets the same
thank-you a person gets, because telling a bot it failed only teaches it to try again — and nothing is
recorded or sent, which the test proves against the enquiry table.

And the catering small print, which was loose text floating between two rows of cards, is a soft panel
belonging to the table above it.

61 tests. Verified at 390 and 900.

src/main/styles/components.css

@@ -55,8 +55,13 @@
  * FIELDS. One input, everywhere. The public form had its own (cream, ring-2, py-2.5) and the admin had
  * another (white, ring-1, py-2, text-sm), which is what happens when a form gets written twice.
  */
+/*
+ * text-base on a phone, not text-sm: Safari zooms the whole page in when you focus an input smaller than
+ * 16px, which on the contact form means every enquiry typed on a phone starts by throwing the layout
+ * sideways. The denser size comes back at sm, where no browser does that.
+ */
 @utility field {
-  @apply w-full rounded-field border border-bakery-300 bg-white px-3.5 py-2.5 text-sm
+  @apply w-full rounded-field border border-bakery-300 bg-white px-3.5 py-2.5 text-base sm:text-sm
          focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500;
 }
 
@@ -178,10 +183,13 @@
   @apply pill border border-bakery-200/60 text-bakery-50 hover:bg-bakery-50/10;
 }
 
-/* Smaller, for a filter row rather than a call to action. */
+/*
+ * Smaller than a pill, for a filter row rather than a call to action — but still 44px tall, which is the
+ * smallest thing a thumb should be asked to hit.
+ */
 @utility chip {
-  @apply inline-flex items-center rounded-full border px-6 py-2 label
-         bg-white border-bakery-300 text-bakery-700 transition-colors hover:bg-bakery-100;
+  @apply inline-flex items-center justify-center rounded-full border px-5 sm:px-6 min-h-11 label
+         whitespace-nowrap bg-white border-bakery-300 text-bakery-700 transition-colors hover:bg-bakery-100;
 }
 
 @utility chip-on {
@@ -201,6 +209,19 @@
   @apply py-14 md:py-20;
 }
 
+/*
+ * A row of filters that scrolls sideways on a phone instead of wrapping onto three lines with one item
+ * stranded on the last. It wraps and centres from sm, where there is room. The negative margin lets the
+ * strip bleed to the screen edge so a half-visible chip shows there is more.
+ */
+@utility filter-row {
+  @apply flex gap-3 overflow-x-auto no-scrollbar snap-x -mx-4 px-4
+         sm:flex-wrap sm:justify-center sm:gap-4 sm:overflow-visible sm:mx-0 sm:px-0;
+  & > * {
+    @apply snap-start;
+  }
+}
+
 /*
  * 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".