@bearmenu/ui 0.8.10 → 0.8.11

package/src/components/concept-compare.tsx

@@ -135,11 +135,16 @@ const ROOM_SCRIM =
   "absolute inset-0 bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0)_0%,oklch(0.16_0.012_55_/_0)_30%,oklch(0.16_0.012_55_/_0.55)_58%,oklch(0.16_0.012_55_/_0.9)_100%)]";
 
 /**
- * The head band's glass. Mask and ink both run the band's full height and go
- * to ZERO at its underside on the same curve — a soft edge, not a line.
+ * The head band's ink. It runs the band's full height and goes to ZERO at its
+ * underside on an eased curve — a soft edge, not a line. Ink only: the
+ * backdrop-blur AND the mask that used to sit under it were removed for the
+ * measurement recorded in `GlassGround`. Without the mask the gradient alone
+ * shapes the fade, so its lower half is darker than before (~0.28 at 75 %
+ * where mask×gradient gave ~0.08) — deliberate, that is where the room
+ * names begin.
  */
 const HEAD_GLASS =
-  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg before:[mask-image:linear-gradient(to_bottom,black_35%,transparent_100%)] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.8)_0%,oklch(0.16_0.012_55_/_0.6)_35%,oklch(0.16_0.012_55_/_0.22)_75%,oklch(0.16_0.012_55_/_0)_100%)]";
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.86)_0%,oklch(0.16_0.012_55_/_0.7)_35%,oklch(0.16_0.012_55_/_0.28)_75%,oklch(0.16_0.012_55_/_0)_100%)]";
 
 /* The foot band's glass lives in `concept-compare-rail.tsx`, with the foot. */
 
@@ -303,7 +308,7 @@ export function ConceptCompare({
                     "inline-flex h-[22px] w-max items-center gap-1 rounded-full px-2 text-[10px] font-extrabold uppercase tracking-[0.08em]",
                     isCheapest
                       ? "bg-success text-white"
-                      : "bg-white/15 text-white/85 backdrop-blur-[2px]"
+                      : "bg-white/20 text-white/85"
                   )}
                 >
                   {isCheapest && <ArrowDown className="h-3 w-3 shrink-0" aria-hidden />}
@@ -330,7 +335,7 @@ export function ConceptCompare({
 
                 {/* The kitchen's own wording — the evidence that these are
                     matched rows rather than one row repeated. */}
-                <span className="mt-2 block truncate font-serif text-[14px] italic text-white/90">
+                <span className="mt-2 block truncate font-serif text-[14px] text-white/90">
                   {room.alias}
                 </span>
 

package/src/components/glass-ground.tsx

@@ -2,47 +2,47 @@ import type { CSSProperties } from "react";
 import { cn } from "../lib/utils";
 
 /**
- * GlassGround — a frosted, inked caption rising out of one edge of a
- * photograph.
+ * GlassGround — an inked caption rising out of one edge of a photograph.
  *
- * Layers over a `PhotoGround`: two masked `backdrop-blur`s (the frost) and
- * an ink gradient (the contrast), running in one direction — absent where the
- * photograph is the subject, solid where the type is. `MenuFamilyBlock` drew
- * this first; this is the same idea with the stops as data, so a card can say
- * "clear for 128px, then glass" without a sixth copy of the gradient strings.
+ * One layer over a `PhotoGround`: an ink gradient running in one direction —
+ * absent where the photograph is the subject, solid where the type is.
+ * `MenuFamilyBlock` drew this first; this is the same idea with the stops as
+ * data, so a card can say "clear for 128px, then ink" without a sixth copy of
+ * the gradient string.
  *
- * ## Why two blurs, and why the ramps are eased
+ * ## Why there is no blur any more
  *
- * One blur under a linear mask has an edge: the eye reads the line where
- * sharp becomes soft, however gently the mask fades it in. Two blurs — a
- * light one that starts early and a heavier one that starts late — make the
- * softening itself a gradient (the "progressive blur" of a phone's lock
- * screen), and every ramp here is an ease-in through five stops rather than
- * a straight line, because a straight ramp has a visible crease at each end
- * where its slope changes.
+ * This used to be two masked `backdrop-blur`s under the ink — a progressive
+ * frost. Measured on `/menu` in production (2026-09-14): the page carried 73
+ * backdrop-filter composited layers, six dossiers' worth of these among them,
+ * and the main thread spent 9 ms per scrolled frame re-layerising them
+ * (2.7 s over a six-second fling; 56 ms with backdrop-filter disabled). A
+ * frost is not worth a page that cannot scroll on a phone, so the caption
+ * rests on the ink alone, eased through five stops so the ramp has no crease.
+ * See `docs/audits/audit-menu-page-performance-2026-09-14.md` in the app.
  *
  * ## Why the stops are custom properties
  *
- * Tailwind emits only the classes it can read verbatim, so the gradients
- * cannot be assembled from props into a class. The classes below are literal
- * and read `--glass-*` variables; the component writes those inline, having
+ * Tailwind emits only the classes it can read verbatim, so the gradient
+ * cannot be assembled from props into a class. The class below is literal and
+ * reads `--glass-*` variables; the component writes those inline, having
  * interpolated the quarter stops in JS (`clear` and `full` must share a
  * unit). Same mechanism as `HueChip`'s hue. The ink's colour is the
  * package's one scrim literal, `oklch(0.16 0.012 55)`, never `var(--scrim)`.
  *
  * ## The ramp ends where the type begins
  *
- * `clear` is where the frost starts, `full` where it and the ink are solid.
- * Set `full` to the exact seam the content starts at — a ramp that runs past
- * the seam puts the first row of type on half-frost.
+ * `clear` is where the ink starts, `full` where it is solid. Set `full` to
+ * the exact seam the content starts at — a ramp that runs past the seam puts
+ * the first row of type on half-ink.
  */
 
 export type GlassStops = {
   /** Which way the ink runs — toward the type. */
   direction: "to bottom" | "to right";
-  /** Where the frost begins, e.g. `"0px"` or `"24%"`. */
+  /** Where the ink begins, e.g. `"0px"` or `"24%"`. */
   clear: string;
-  /** Where frost and ink are solid — the seam the content starts at. Same unit as `clear`. */
+  /** Where the ink is solid — the seam the content starts at. Same unit as `clear`. */
   full: string;
 };
 
@@ -52,16 +52,11 @@ export type GlassGroundProps = {
   lgStops?: GlassStops;
   /**
    * How dark the ink gets at the far edge, 0–1. `0.96` is a caption the
-   * photograph is only a texture under; `0.4` is a photograph the caption is
+   * photograph is only a texture under; `0.6` is a photograph the caption is
    * drawn on — the type is lifted, the room stays a room.
    */
   peak?: number;
-  /**
-   * How much the frost softens the photograph where it is solid. `xl` turns
-   * a room into colour; `sm` keeps it a room and only takes the edge off the
-   * detail behind the type.
-   */
-  blur?: "sm" | "md" | "lg" | "xl";
+  /** Placement only. The ink is a `bg-*` on this same element, so a background here would replace it. */
   className?: string;
 };
 
@@ -70,23 +65,9 @@ export type GlassGroundProps = {
 const STOPS = [0, 0.25, 0.5, 0.75, 1] as const;
 const EASE = [0, 0.06, 0.25, 0.56, 1] as const;
 
-/** The light blur starts at once and is solid halfway; the heavy one starts halfway. */
-const FROST_SOFT =
-  "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s0),rgba(0,0,0,0.25)_var(--glass-s1),black_var(--glass-s2))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s0),rgba(0,0,0,0.25)_var(--glass-lg-s1),black_var(--glass-lg-s2))]";
-const FROST_HEAVY =
-  "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s1),rgba(0,0,0,0.25)_var(--glass-s2),rgba(0,0,0,0.6)_var(--glass-s3),black_var(--glass-s4))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s1),rgba(0,0,0,0.25)_var(--glass-lg-s2),rgba(0,0,0,0.6)_var(--glass-lg-s3),black_var(--glass-lg-s4))]";
-
 const INK =
   "bg-[linear-gradient(var(--glass-dir),oklch(0.16_0.012_55_/_0)_var(--glass-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)] lg:bg-[linear-gradient(var(--glass-lg-dir),oklch(0.16_0.012_55_/_0)_var(--glass-lg-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-lg-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-lg-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-lg-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-lg-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)]";
 
-/** Literal, for the scanner: the light and the heavy blur per strength. */
-const BLUR = {
-  sm: ["backdrop-blur-[2px]", "backdrop-blur-sm"],
-  md: ["backdrop-blur-sm", "backdrop-blur-md"],
-  lg: ["backdrop-blur-md", "backdrop-blur-lg"],
-  xl: ["backdrop-blur-lg", "backdrop-blur-xl"],
-} as const;
-
 /** "72px" → [72, "px"]; "24%" → [24, "%"]. */
 function measure(value: string): [number, string] {
   const match = value.trim().match(/^(-?\d*\.?\d+)\s*([a-z%]*)$/i);
@@ -101,13 +82,7 @@ function positions(clear: string, full: string): string[] {
   return STOPS.map((fraction) => `${from + (to - from) * fraction}${unit}`);
 }
 
-export function GlassGround({
-  stops,
-  lgStops = stops,
-  peak = 0.96,
-  blur = "xl",
-  className,
-}: GlassGroundProps) {
+export function GlassGround({ stops, lgStops = stops, peak = 0.96, className }: GlassGroundProps) {
   const base = positions(stops.clear, stops.full);
   const lg = positions(lgStops.clear, lgStops.full);
   const style = {
@@ -120,10 +95,10 @@ export function GlassGround({
   } as CSSProperties;
 
   return (
-    <span aria-hidden className={cn("pointer-events-none absolute inset-0 block", className)} style={style}>
-      <span className={cn("absolute inset-0", BLUR[blur][0], FROST_SOFT)} />
-      <span className={cn("absolute inset-0", BLUR[blur][1], FROST_HEAVY)} />
-      <span className={cn("absolute inset-0", INK)} />
-    </span>
+    <span
+      aria-hidden
+      className={cn("pointer-events-none absolute inset-0 block", INK, className)}
+      style={style}
+    />
   );
 }

package/src/components/kitchen-dossier.stories.tsx

@@ -76,7 +76,7 @@ const meta: Meta<typeof KitchenDossier> = {
     docs: {
       description: {
         component:
-          "One kitchen, told as a story on its own photograph. The room is clear at the top; a frosted caption rises from the foot (`GlassGround`) with the identity, and under it a panel says the three things the reviews established one at a time — the dish it is known for, what people say, the grade — with segments at the top edge. The story runs while the card is in view and pauses while pressed; a tap advances; reduced motion stops the timer and keeps the tap.",
+          "One kitchen, told as a story on its own photograph. The room is clear at the top; an inked caption rises from the foot (`GlassGround`) with the identity, and under it a panel says the three things the reviews established one at a time — the dish it is known for, what people say, the grade — with segments at the top edge. The story runs while the card is in view and pauses while pressed; a tap advances; reduced motion stops the timer and keeps the tap.",
       },
     },
   },

package/src/components/kitchen-dossier.tsx

@@ -20,7 +20,7 @@ import { VenueQuotes } from "./venue-quotes";
  * The hub used to say this three times: a spotlight with everything the
  * digest knows, a ranked row with a grade, a card with the signature dish —
  * and the same kitchen led all three. This is the one card: the venue's
- * photograph clear at the top, a frosted caption rising from the foot with
+ * photograph clear at the top, an inked caption rising from the foot with
  * the identity (rating, name, type · area · reviews), and under it a PANEL
  * that says the three or four things the reviews established one at a time —
  * the dish it is known for, what people say, the grade — with segments at the
@@ -33,12 +33,12 @@ import { VenueQuotes } from "./venue-quotes";
  * bands. This is the reverse — the room is the subject and the facts are its
  * caption — which is `GlassGround` at its lightest and smallest: anchored to
  * the CAPTION, not the card, so it covers the identity, the panel and the
- * action plus a short lead above them and nothing else; a `sm` blur that
- * only takes the edge off the detail; ink that never passes 0.45; a text
- * shadow under the identity doing the rest. Everything above the caption is
- * the photograph, untouched. The panel is its own glass, so its rule reads
- * as a panel and not a hole. The same layout at every width; the desktop
- * card is wider, not turned on its side.
+ * action plus a short lead above them and nothing else; ink that never
+ * passes 0.6; a text shadow under the identity doing the rest. Everything
+ * above the caption is the photograph, untouched. The panel is a translucent
+ * ink pane (no backdrop blur — see `GlassGround` for the measurement that
+ * removed it), so its rule reads as a panel and not a hole. The same layout
+ * at every width; the desktop card is wider, not turned on its side.
  *
  * ## Two targets, and everything else is "next"
  *
@@ -99,10 +99,10 @@ export type KitchenDossierProps = {
 };
 
 /**
- * How far above the caption the glass begins — the ramp from clear photograph
- * to frost, ending exactly where the identity starts. Long, so the edge is a
- * gradient and not a line. The glass wrapper's `-top-32` is this same 128px;
- * the two must agree, or the identity sits on half-frost.
+ * How far above the caption the ink begins — the ramp from clear photograph
+ * to ink, ending exactly where the identity starts. Long, so the edge is a
+ * gradient and not a line. The ink wrapper's `-top-32` is this same 128px;
+ * the two must agree, or the identity sits on half-ink.
  */
 const GLASS_LEAD = "128px";
 
@@ -149,7 +149,7 @@ export function KitchenDossier({
           <span className="text-[16px] font-bold leading-tight tracking-[-0.01em] text-white">{item.name}</span>
         )}
         {signature.why && (
-          <p className="mt-1 line-clamp-2 font-serif text-[13px] italic leading-snug text-white/75">
+          <p className="mt-1 line-clamp-2 font-serif text-[13px] leading-snug text-white/75">
             {signature.why}
           </p>
         )}
@@ -253,7 +253,7 @@ export function KitchenDossier({
         {/* The clear photograph, with the one fact that belongs on it. */}
         <div className="relative min-h-[184px] flex-1">
           {labels.openUntil && (
-            <span className="absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.72)] px-3 text-[11.5px] font-bold text-white backdrop-blur-[2px]">
+            <span className="absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-3 text-[11.5px] font-bold text-white">
               <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
               {labels.openUntil}
             </span>
@@ -271,8 +271,7 @@ export function KitchenDossier({
           >
             <GlassGround
               stops={{ direction: "to bottom", clear: "0px", full: GLASS_LEAD }}
-              peak={0.4}
-              blur="sm"
+              peak={0.6}
             />
           </div>
           <div className="[text-shadow:0_1px_12px_oklch(0_0_0/0.55)]">
@@ -299,7 +298,7 @@ export function KitchenDossier({
           {parts.length > 0 && (
             <StoryPanel
               parts={parts}
-              className="rounded-[14px] border border-white/10 bg-[oklch(0.16_0.012_55_/_0.35)] p-4 backdrop-blur-md"
+              className="rounded-[14px] border border-white/10 bg-[oklch(0.16_0.012_55_/_0.62)] p-4"
             />
           )}
 

package/src/components/menu-family-block.stories.tsx

@@ -36,7 +36,7 @@ const meta: Meta<typeof MenuFamilyBlock> = {
     docs: {
       description: {
         component:
-          "The cuisines index's family card. **The mosaic is the ground**: the grid of venue photographs is the background for the entire card, and everything floats on it through three layers — the mosaic wearing the family's hue, a masked `backdrop-filter` that is absent where the photography is the subject and full where the rows begin, and an ink gradient that buys the contrast frost alone cannot. Phone: top to bottom. Desktop: the same layers turned ninety degrees, photo column clear on the left, rows frosted on the right, mosaic 3×2 rather than 2×2. The content region is `.dark`-scoped, which is how `MenuKitchenList` and `HueChip` render on the ink without a fork. Two costs accepted: a masked backdrop-filter repeated ten times down a scroll, and thumbnails that sit on a photograph and survive only because the ink is heavy under them.",
+          "The cuisines index's family card. **The mosaic is the ground**: the grid of venue photographs is the background for the entire card, and everything floats on it through two layers — the mosaic wearing the family's hue, and an ink gradient that is absent where the photography is the subject and full where the rows begin. (There was a masked `backdrop-filter` between them until 0.8.11; ten of them down a scroll cost the consumer's menu page 9 ms per frame, so the ink carries the type alone now.) Phone: top to bottom. Desktop: the same layers turned ninety degrees, photo column clear on the left, rows inked on the right, mosaic 3×2 rather than 2×2. The content region is `.dark`-scoped, which is how `MenuKitchenList` and `HueChip` render on the ink without a fork. One cost accepted: thumbnails that sit on a photograph and survive only because the ink is heavy under them.",
       },
     },
   },
@@ -45,7 +45,7 @@ const meta: Meta<typeof MenuFamilyBlock> = {
 export default meta;
 type Story = StoryObj<typeof MenuFamilyBlock>;
 
-/** A stand-in photograph with enough variance that the frost has something to soften. */
+/** A stand-in photograph with enough variance that the ink has something to sit on. */
 function photo(hue: number, label: string) {
   return (
     "data:image/svg+xml;utf8," +
@@ -78,7 +78,7 @@ export const Bare: Story = {
   },
 };
 
-/** Frost and ink run top to bottom: clear photography under the name, the rows on the frosted foot. */
+/** The ink runs top to bottom: clear photography under the name, the rows on the inked foot. */
 export const Mobile: Story = {
   args: { family: { ...mockFamilyBlock, photoUrls: PHOTOS } },
   decorators: [

package/src/components/menu-family-block.tsx

@@ -21,17 +21,16 @@ import type {
  *
  *  1. **The mosaic**, full-bleed, wearing the family's hue through a
  *     `mix-blend-color` layer.
- *  2. **A masked backdrop-filter** — absent where the photography is the
- *     subject, full where the rows begin — so the pictures stay sharp where
- *     they are looked at and go soft exactly where they are read over.
- *  3. **An ink gradient** over that. This is what actually buys the contrast:
- *     frost alone blurs without darkening, and blurred mid-tones will not carry
- *     16px type.
+ *  2. **An ink gradient** — absent where the photography is the subject, full
+ *     where the rows begin. This is what buys the contrast. There used to be a
+ *     masked backdrop-filter under it; it was removed for the measurement
+ *     recorded in `GlassGround` (73 blur layers cost `/menu` 9 ms per scrolled
+ *     frame on a phone).
  *
- * On the phone the frost and ink run top to bottom: the name and the action
- * sit on clear photography, the chips and the rows on the frosted foot. On
- * desktop the same three layers turn ninety degrees — the photo column on the
- * left stays clear, the row column on the right is the frosted one. The mosaic
+ * On the phone the ink runs top to bottom: the name and the action sit on
+ * clear photography, the chips and the rows on the inked foot. On desktop the
+ * same layers turn ninety degrees — the photo column on the left stays clear,
+ * the row column on the right is the inked one. The mosaic
  * runs 3×2 there rather than 2×2, because at 1110px a four-tile grid makes each
  * photograph too big to read as texture.
  *
@@ -105,15 +104,8 @@ const PHONE_TILES = 4;
 const GROUND = PHOTO_GROUND;
 
 /**
- * The frost: absent at the top, full at the foot on the phone; absent on the
- * left, full on the right from `lg`. The mask is what makes it a gradient of
- * softness rather than a frosted pane — the subject stays sharp.
- */
-const FROST =
-  "backdrop-blur-xl [mask-image:linear-gradient(to_bottom,transparent_0%,black_42%)] lg:[mask-image:linear-gradient(to_right,transparent_36%,black_54%)]";
-
-/**
- * The ink. Same direction as the frost, heavier at the foot, and it is the
+ * The ink. Absent at the top, heavier at the foot on the phone; absent on the
+ * left, full on the right from `lg`. It is the
  * layer the contrast rests on. Literal rather than `var(--scrim)`: that token
  * lives in the app's stylesheet, not this package's, so a DS component reading
  * it renders nothing in Storybook and the other three consumers.
@@ -177,10 +169,7 @@ export function MenuFamilyBlock({
         gradient={gradient}
       />
 
-      {/* ── Layer 2: the frost ──────────────────────────────────────────── */}
-      <span aria-hidden className={cn("absolute inset-0", FROST)} />
-
-      {/* ── Layer 3: the ink ────────────────────────────────────────────── */}
+      {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
       <span aria-hidden className={cn("absolute inset-0", INK)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
@@ -189,7 +178,7 @@ export function MenuFamilyBlock({
             the left third, with its stack anchored to the foot. */}
         <div className={cn("relative flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5", TEXT_SCRIM)}>
           {overflow > 0 && (
-            <span className="mb-16 self-end rounded-full bg-[oklch(0.16_0.012_55_/_0.72)] px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-[2px] lg:mb-3 lg:self-start">
+            <span className="mb-16 self-end rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:mb-3 lg:self-start">
               {labels.more(overflow)}
             </span>
           )}
@@ -201,7 +190,7 @@ export function MenuFamilyBlock({
             {labels.venueUnit(family.venueCount)}
           </span>
 
-          {/* The action, as a frosted pill on the photography. `bg-white/12`
+          {/* The action, as a translucent pill on the photography. `bg-white/16`
               on the ink rather than `bg-accent`: ten filled accent buttons on
               one page is ten primary actions, and the pill reads as part of the
               picture rather than as a control laid on top of it.
@@ -212,13 +201,13 @@ export function MenuFamilyBlock({
               chevron. The shape and the label are the whole affordance. */}
           <LinkComponent
             href={family.href}
-            className="mt-3.5 inline-flex h-10 w-max items-center rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white motion-reduce:transition-none"
+            className="mt-3.5 inline-flex h-10 w-max items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors hover:bg-white/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white motion-reduce:transition-none"
           >
             {labels.browse}
           </LinkComponent>
         </div>
 
-        {/* The frosted column: chips, then the rows. */}
+        {/* The inked column: chips, then the rows. */}
         <div className="flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5">
           <ul className="flex flex-wrap items-center gap-1.5">
             {family.priceBandLabel && (

package/src/components/menu-family-card.stories.tsx

@@ -8,7 +8,7 @@ const labels = {
   browse: "Browse Italian",
 };
 
-/** A stand-in photograph with enough variance that the frost has something to soften. */
+/** A stand-in photograph with enough variance that the ink has something to sit on. */
 function photo(hue: number, label: string) {
   return (
     "data:image/svg+xml;utf8," +
@@ -35,7 +35,7 @@ const meta: Meta<typeof MenuFamilyCard> = {
     docs: {
       description: {
         component:
-          "The hub's doorway to a family — a cuisine on the dishes tab, a drink family on the drinks tab. The same photo language as `MenuFamilyBlock` (the mosaic is the ground, wearing the family's hue; a masked frost and an ink gradient carry the type) drawn one step earlier, in a row of three, where the reader is choosing a family and not yet a venue: one number, one name, the groups the family consists of, and the `Browse` pill. It lists no venue. The count is VENUES: cuisine exists only on places, so a card counting dishes cannot be built. The whole card is one link.",
+          "The hub's doorway to a family — a cuisine on the dishes tab, a drink family on the drinks tab. The same photo language as `MenuFamilyBlock` (the mosaic is the ground, wearing the family's hue; an ink gradient carries the type) drawn one step earlier, in a row of three, where the reader is choosing a family and not yet a venue: one number, one name, the groups the family consists of, and the `Browse` pill. It lists no venue. The count is VENUES: cuisine exists only on places, so a card counting dishes cannot be built. The whole card is one link.",
       },
     },
   },

package/src/components/menu-family-card.tsx

@@ -83,13 +83,6 @@ const MOSAIC_CELLS = 4;
 /** The card's ground is `PhotoGround`'s, so the two cannot differ. */
 const GROUND = PHOTO_GROUND;
 
-/**
- * The frost: absent over the top half, full at the foot, where the chips and
- * the pill sit. The mask is what makes it a gradient of softness rather than
- * a frosted pane — the rooms stay sharp behind the number.
- */
-const FROST = "backdrop-blur-xl [mask-image:linear-gradient(to_bottom,transparent_28%,black_58%)]";
-
 /**
  * The ink. The count and the name sit at opposite ends of the card, so both
  * ends are dark — a gradient that cleared in the middle looked better empty
@@ -137,10 +130,10 @@ export function MenuFamilyCard({
         gradient={gradient}
       />
 
-      {/* ── Layer 2: the frost ──────────────────────────────────────────── */}
-      <span aria-hidden className={cn("absolute inset-0 -z-20", FROST)} />
-
-      {/* ── Layer 3: the ink ────────────────────────────────────────────── */}
+      {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
+      {/* There was a masked backdrop-blur under this. Removed for the same
+          measurement that took it out of `GlassGround`: the type rests on the
+          ink, and the rooms stay sharp all the way down. */}
       <span aria-hidden className={cn("absolute inset-0 -z-10", INK)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
@@ -179,10 +172,10 @@ export function MenuFamilyCard({
           </span>
         )}
 
-        {/* The action, as a frosted pill on the photography — the block's
+        {/* The action, as a translucent pill on the photography — the block's
             pill, so the two cards read as one family. A `span`, because the
             card is already the link. */}
-        <span className="mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md transition-colors group-hover:bg-white/20 motion-reduce:transition-none">
+        <span className="mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors group-hover:bg-white/25 motion-reduce:transition-none">
           {labels.browse}
         </span>
       </span>

package/src/components/menu-hub-hero.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { MenuHubHero } from "./menu-hub-hero";
+import { VenueWall } from "./venue-wall";
+
+const tiles = Array.from({ length: 12 }, (_, i) => `/tiles/${i}.webp`);
+const mosaicImages = () => Array.from(document.querySelectorAll("img[loading='lazy']"));
+
+// The phone shows six tiles; the rest are `hidden` below `lg` so a lazy
+// still past the sixth is never requested. This is the request-count win
+// measured on the consumer's menu page — pinned so a cell-count edit cannot
+// silently put all twelve stills back on the phone's critical path.
+describe("MenuHubHero mosaic", () => {
+  it("shows the first six tiles on the phone and hides the rest until lg", () => {
+    render(<MenuHubHero headline="Every kitchen" tileUrls={tiles} />);
+    const images = mosaicImages();
+    expect(images).toHaveLength(28);
+    images.slice(0, 6).forEach((img) => expect(img).not.toHaveClass("hidden"));
+    images.slice(6).forEach((img) => expect(img).toHaveClass("hidden", "lg:block"));
+  });
+
+  it("cycles the tile list so the phone's six are the first six given", () => {
+    render(<MenuHubHero headline="Every kitchen" tileUrls={tiles.slice(0, 4)} />);
+    const srcs = mosaicImages()
+      .slice(0, 6)
+      .map((img) => img.getAttribute("src"));
+    expect(srcs).toEqual(["/tiles/0.webp", "/tiles/1.webp", "/tiles/2.webp", "/tiles/3.webp", "/tiles/0.webp", "/tiles/1.webp"]);
+  });
+});
+
+describe("VenueWall mosaic", () => {
+  it("follows the hero's rule: six on the phone, eighteen from lg", () => {
+    render(<VenueWall places={[]} headline="Every menu" tileUrls={tiles} />);
+    const images = mosaicImages();
+    expect(images).toHaveLength(18);
+    images.slice(0, 6).forEach((img) => expect(img).not.toHaveClass("hidden"));
+    images.slice(6).forEach((img) => expect(img).toHaveClass("hidden", "lg:block"));
+  });
+});

package/src/components/menu-hub-hero.tsx

@@ -65,6 +65,13 @@ export type MenuHubHeroProps = {
 
 /** Enough cells to fill the widest hero without the grid reading as a pattern. */
 const TEXTURE_CELLS = 28;
+/**
+ * The phone shows the first six, three across. Twenty-eight cells four across
+ * on a 375px hero were 90px tiles under a 90% scrim — a texture nobody could
+ * read as a room — and every one of the twelve stills downloaded to draw it.
+ * Six at ~125px are rooms again and cost six requests.
+ */
+const PHONE_CELLS = 6;
 
 export function MenuHubHero({
   kicker,
@@ -97,10 +104,12 @@ export function MenuHubHero({
       ) : (
         <div
           aria-hidden
-          className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7"
+          className="absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-7"
         >
           {Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
             const url = tileUrls?.length ? tileUrls[cell % tileUrls.length] : undefined;
+            // `hidden` keeps a lazy image from ever being requested on the phone.
+            const phone = cell < PHONE_CELLS ? undefined : "hidden lg:block";
 
             return url ? (
               // eslint-disable-next-line @next/next/no-img-element
@@ -110,12 +119,15 @@ export function MenuHubHero({
                 alt=""
                 loading="lazy"
                 decoding="async"
-                className="h-full w-full object-cover"
+                className={cn("h-full w-full object-cover", phone)}
               />
             ) : (
               <div
                 key={cell}
-                className="bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]"
+                className={cn(
+                  "bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]",
+                  phone
+                )}
               />
             );
           })}
@@ -133,7 +145,7 @@ export function MenuHubHero({
         className={cn(
           "absolute inset-0",
           tileUrls?.length || backgroundUrl
-            ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.88)_52%,oklch(0.16_0.012_55_/_0.72)_100%)]"
+            ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.86)_52%,oklch(0.16_0.012_55_/_0.6)_100%)]"
             : "bg-[linear-gradient(100deg,oklch(0.18_0.012_55_/_0.95)_0%,oklch(0.18_0.012_55_/_0.72)_52%,oklch(0.18_0.012_55_/_0.3)_100%)]"
         )}
       />
@@ -173,7 +185,7 @@ export function MenuHubHero({
         {(proof || action) && (
           <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
             {proof && (
-              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/10 px-4 py-2 text-[13px] backdrop-blur-[6px]">
+              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]">
                 {proofIcon}
                 {proof}
               </span>

package/src/components/photo-ground.tsx

@@ -14,7 +14,7 @@ import { cn } from "../lib/utils";
  *
  * It owns the photographs and their colour: the ground, the tiles, the fallback
  * initial, the family's hue and an optional uniform dark overlay. It does NOT
- * own the glass — the scrims and frosted bands that carry a card's type run in
+ * own the ink — the scrims and bands that carry a card's type run in
  * a different direction on every card (down the family block's phone, across
  * its desktop, in from both ends of the concept card) and are the card's own.
  *

package/src/components/signature-chip.tsx

@@ -19,8 +19,8 @@ import { cn } from "../lib/utils";
  *
  * `surface="image"` is for card covers, where the chip sits over the photo
  * rather than in the caption block. The accent-on-canvas palette has no
- * contrast guarantee over an arbitrary photo, so it swaps to the same frosted
- * fill the place badge uses there and keeps the dashed edge — which is what
+ * contrast guarantee over an arbitrary photo, so it swaps to the same solid
+ * ink fill the place badge uses there and keeps the dashed edge — which is what
  * says "there is evidence behind this" — in the inverted colour.
  *
  * The label is passed in: the DS owns no translation keys.
@@ -64,7 +64,7 @@ export function SignatureChip({
         shared,
         "inline-flex items-center rounded-full border border-dashed",
         onImage
-          ? "border-background/70 bg-foreground/70 text-background backdrop-blur-sm hover:bg-foreground/85"
+          ? "border-background/70 bg-foreground/80 text-background hover:bg-foreground/90"
           : "border-accent/40 text-accent hover:bg-accent/10",
         "focus-visible:outline-none focus-visible:ring-2",
         onImage ? "focus-visible:ring-background/70" : "focus-visible:ring-accent/40",

package/src/components/venue-quotes.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<typeof VenueQuotes> = {
     docs: {
       description: {
         component:
-          "The digest's standout lines as pull-quotes — one to three short positives, already resolved into the request locale. They are the only place on a hub where a reviewer speaks in their own register, so they are set in serif italic against the sans everything else uses. `onCite` turns a quote into a button opening the reviews behind it: `review_ids` is what makes the claim checkable, and a quote nobody can trace is just copy.",
+          "The digest's standout lines as pull-quotes — one to three short positives, already resolved into the request locale. They are the only place on a hub where a reviewer speaks in their own register, so they are set in quoted serif against the sans everything else uses. `onCite` turns a quote into a button opening the reviews behind it: `review_ids` is what makes the claim checkable, and a quote nobody can trace is just copy.",
       },
     },
   },

package/src/components/venue-quotes.tsx

@@ -6,7 +6,7 @@ import type { CitedText } from "./place-types";
  *
  * These are `reviews_digest.highlights`: one to three short positives already
  * resolved into the request locale. They are the only place on a hub where a
- * reviewer speaks in their own register, so they are set in serif italic
+ * reviewer speaks in their own register, so they are set in quoted serif
  * against the sans everything else uses.
  *
  * `onCite` turns a quote into a button that opens the reviews behind it —
@@ -39,8 +39,10 @@ export function VenueQuotes({ quotes, onCite, citeLabel, limit, className }: Ven
         const citations = quote.review_ids?.length ?? 0;
         const canCite = !!onCite && citations > 0;
 
+        // Upright, quoted: the italic face was the only reason the consumer's
+        // menu page loaded 281 KB of Fraunces italic at navigation time.
         const text = (
-          <blockquote className="border-l-2 border-border pl-3 font-serif text-[13px] italic leading-[1.45] text-muted-foreground">
+          <blockquote className="border-l-2 border-border pl-3 font-serif text-[13px] leading-[1.45] text-muted-foreground">
             {`“${quote.text}”`}
           </blockquote>
         );