@bearmenu/ui 0.8.10 → 0.8.12

package/src/components/item.tsx

@@ -52,63 +52,87 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
 );
 Item.displayName = "Item";
 
-const ItemMedia = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-media"
-      className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
-      {...props}
-    />
-  )
+/**
+ * The parts take `asChild` too. An `Item asChild` around a `<button>` makes
+ * the parts the button's children, and a button may hold only phrasing
+ * content — so the parts have to be able to render as `<span>`s there.
+ */
+type ItemPartProps = React.HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+};
+
+const ItemMedia = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-media"
+        className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemMedia.displayName = "ItemMedia";
 
-const ItemContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-content"
-      className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
-      {...props}
-    />
-  )
+const ItemContent = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-content"
+        className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemContent.displayName = "ItemContent";
 
-const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-title"
-      className={cn("truncate text-sm font-semibold text-foreground", className)}
-      {...props}
-    />
-  )
+const ItemTitle = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-title"
+        className={cn("truncate text-sm font-semibold text-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemTitle.displayName = "ItemTitle";
 
-const ItemDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-description"
-      className={cn("truncate text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
+const ItemDescription = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-description"
+        className={cn("truncate text-xs text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemDescription.displayName = "ItemDescription";
 
-const ItemActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-actions"
-      className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
-      {...props}
-    />
-  )
+const ItemActions = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-actions"
+        className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemActions.displayName = "ItemActions";
 

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"
  *
@@ -72,6 +72,8 @@ export type KitchenDossierLabels = {
   next: string;
   /** Dimension key → translated label. */
   dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+  /** Beside the grade in the title row, e.g. "/10". Omit for the bare numeral. */
+  gradeUnit?: string;
 };
 
 export type KitchenDossierProps = {
@@ -99,10 +101,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 +151,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>
         )}
@@ -202,25 +204,18 @@ export function KitchenDossier({
         .sort((a, b) => (dimensions[b] ?? 0) - (dimensions[a] ?? 0))
         .slice(0, DIMENSION_LIMIT)
     : [];
-  if (grade && (grade.overall || strongest.length > 0)) {
+  // The overall grade leads the title row now, so the part shows what the
+  // title cannot: the three strongest dimensions. No numeral repeated.
+  if (dimensions && strongest.length > 0) {
     parts.push(
       <Part key="grade" kicker={labels.theGrade}>
-        <div className="flex items-end gap-4">
-          {grade.overall && (
-            <span className="text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums text-[oklch(0.82_0.15_85)]">
-              {grade.overall}
-            </span>
-          )}
-          {dimensions && strongest.length > 0 && (
-            <VenueGradeDimensions
-              className="min-w-0 flex-1"
-              dimensions={dimensions}
-              labels={labels.dimensions}
-              order={strongest}
-              formatScore={formatScore}
-            />
-          )}
-        </div>
+        <VenueGradeDimensions
+          className="min-w-0"
+          dimensions={dimensions}
+          labels={labels.dimensions}
+          order={strongest}
+          formatScore={formatScore}
+        />
       </Part>
     );
   }
@@ -253,7 +248,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 +266,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)]">
@@ -282,16 +276,42 @@ export function KitchenDossier({
                   {place.name}
                 </LinkComponent>
               </h3>
-              {rating !== undefined && (
-                <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
-                  {rating.toFixed(1)}
-                  <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+              {/* The GRADE leads — the number the rail is named for, in the
+                  grade's amber. Google's star used to sit here while the
+                  grade waited in story part three; a card rated by BearMenu
+                  cannot lead with a number BearMenu did not compute. The
+                  star drops to the meta line, and the title row only falls
+                  back to it for a kitchen with no grade. */}
+              {grade?.overall ? (
+                <span className="inline-flex shrink-0 items-baseline gap-1 text-[22px] font-extrabold leading-none tabular-nums text-[oklch(0.82_0.15_85)] lg:text-[26px]">
+                  {grade.overall}
+                  {labels.gradeUnit && (
+                    <span className="text-[11px] font-bold text-white/70">{labels.gradeUnit}</span>
+                  )}
                 </span>
+              ) : (
+                rating !== undefined && (
+                  <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
+                    {rating.toFixed(1)}
+                    <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+                  </span>
+                )
               )}
             </div>
-            {(meta || labels.reviewCount) && (
-              <p className="mt-1 truncate text-[12.5px] text-white/70">
-                {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+            {(meta || labels.reviewCount || (grade?.overall && rating !== undefined)) && (
+              <p className="mt-1 flex min-w-0 items-center gap-1 text-[12.5px] text-white/70">
+                {(meta || labels.reviewCount) && (
+                  <span className="truncate">
+                    {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+                  </span>
+                )}
+                {grade?.overall && rating !== undefined && (
+                  <span className="inline-flex shrink-0 items-center gap-1 tabular-nums">
+                    {(meta || labels.reviewCount) && <span aria-hidden>·</span>}
+                    {rating.toFixed(1)}
+                    <Star className="h-3 w-3" aria-hidden />
+                  </span>
+                )}
               </p>
             )}
           </div>
@@ -299,7 +319,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

@@ -1,5 +1,6 @@
 import { Wallet } from "lucide-react";
 import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
 import { HueChip } from "./hue-chip";
 import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
 import { Separator } from "./separator";
@@ -12,28 +13,27 @@ import type {
 } from "./menu-types";
 
 /**
- * MenuFamilyBlock — the cuisines index's family card. The mosaic is the ground.
+ * MenuFamilyBlock — the cuisines index's family card. One photograph is the ground.
  *
  * ## Three layers, and everything floats on them
  *
- * The grid of venue photographs is the background for the ENTIRE card, edge to
- * edge, and the facts sit on it. Three layers do the work:
+ * One venue photograph is the background for the ENTIRE card, edge to edge,
+ * and the facts sit on it. Three layers do the work:
  *
- *  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.
+ *  1. **The photograph**, full-bleed, wearing the family's hue through a
+ *     `mix-blend-color` layer. It was a mosaic of six; the design draws one
+ *     plate, and six tiles under the ink read as texture rather than a room.
+ *  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
- * runs 3×2 there rather than 2×2, because at 1110px a four-tile grid makes each
- * photograph too big to read as texture.
+ * 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
+ * photo column on the left (a third) stays clear, and the row column on the
+ * right is opaque paper in the card's own dark — three venue rows never sit
+ * on a photograph.
  *
  * ## The dark scope
  *
@@ -81,6 +81,12 @@ export type MenuFamilyBlockLabels = {
   priceBand: string;
   /** Main action, e.g. "Browse Italian". Sits on the photography — keep it short. */
   browse: string;
+  /**
+   * The action from `lg`, where the photo column is a third of the card and
+   * "Browse Bakeries & patisseries" does not fit — e.g. "Browse". The full
+   * `browse` stays the accessible name.
+   */
+  browseShort?: string;
   /** Passed through to the venue rows. */
   kitchens: MenuKitchenListLabels;
 };
@@ -97,29 +103,22 @@ export type MenuFamilyBlockProps = {
   className?: string;
 };
 
-/** 2×2 on the phone, 3×2 from `lg`. Tiles past the fourth are desktop-only. */
-const MOSAIC_TILES = 6;
-const PHONE_TILES = 4;
-
 /** The card's ground is `PhotoGround`'s, so the two cannot differ. */
 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. Nearly absent at the top, heavier at the foot on the phone — the
+ * top 40% is the photograph, the rows sit on 0.92+; a to-right ramp from
+ * `lg`, where the row column brings its own opaque paper anyway. 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.
  */
 const INK =
-  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.42)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.9)_48%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+
+/** The row column's paper from `lg`: the card's dark, opaque. */
+const PAPER = "lg:bg-[oklch(0.21_0.012_55)]";
 
 /**
  * A second, LOCAL scrim under the name, count and action — the photo column's
@@ -148,10 +147,12 @@ export function MenuFamilyBlock({
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuFamilyBlockProps) {
-  const photos = (family.photoUrls ?? []).slice(0, MOSAIC_TILES);
-  const overflow = Math.max(family.venueCount - photos.length, 0);
-  const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+  const [photo] = family.photoUrls ?? [];
+  // "+N more" counts past the rows shown, which are the venues the reader can
+  // see — the photograph is one of them, not a venue on its own.
   const venues = family.venues ?? [];
+  const overflow = Math.max(family.venueCount - venues.length, 0);
+  const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
 
   return (
     <article
@@ -163,33 +164,26 @@ export function MenuFamilyBlock({
         className
       )}
     >
-      {/* ── Layer 1: the photographs, wearing the family's colour ──────── */}
-      {/* A 2×2 on the phone, 3×2 from `lg`: at 1110px a four-tile grid makes
-          each photograph too big to read as texture. With no photographs at
-          all, one slot with the family's initial. */}
-      <PhotoGround
-        photos={photos.length > 0 ? photos : [undefined]}
-        initials={initial}
-        mosaicClassName={
-          photos.length > 0 ? "grid-cols-2 grid-rows-2 lg:grid-cols-3" : "grid-cols-1"
-        }
-        phoneTiles={PHONE_TILES}
-        gradient={gradient}
-      />
-
-      {/* ── Layer 2: the frost ──────────────────────────────────────────── */}
-      <span aria-hidden className={cn("absolute inset-0", FROST)} />
+      {/* ── Layer 1: the photograph, wearing the family's colour ───────── */}
+      {/* One venue's photograph, or the family's initial on the ground. */}
+      <PhotoGround photos={[photo]} initials={initial} mode="stack" gradient={gradient} />
 
-      {/* ── Layer 3: the ink ────────────────────────────────────────────── */}
+      {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
       <span aria-hidden className={cn("absolute inset-0", INK)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
-      <div className="relative grid grid-cols-1 lg:grid-cols-[38%_1fr]">
-        {/* The photo column. On the phone it is the card's head; on desktop
-            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)}>
+      <div className="relative grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+        {/* The photo column. On the phone it is the card's head, with the
+            overflow pill pinned to the corner and the photograph clear above
+            the name; on desktop the left third, its stack anchored to the foot. */}
+        <div
+          className={cn(
+            "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] 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="absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:static lg:mb-3 lg:self-start">
               {labels.more(overflow)}
             </span>
           )}
@@ -197,55 +191,57 @@ export function MenuFamilyBlock({
           <h3 className="text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]">
             {family.name}
           </h3>
-          <span className="mt-0.5 block text-[13px] font-medium tabular-nums text-white/70">
+          {/* The count and the band on one line: two facts about the family,
+              read together — "96 kitchens, 14–46 lei". */}
+          <span className="mt-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[13px] font-medium tabular-nums text-white/70">
             {labels.venueUnit(family.venueCount)}
+            {family.priceBandLabel && (
+              <span
+                className="inline-flex items-center gap-1"
+                aria-label={`${labels.priceBand}: ${family.priceBandLabel}`}
+              >
+                <Wallet className="h-3.5 w-3.5 shrink-0 text-white/60" aria-hidden />
+                {family.priceBandLabel}
+              </span>
+            )}
           </span>
 
-          {/* The action, as a frosted pill on the photography. `bg-white/12`
-              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.
-
-              No glyph. An arrow read as "leaves the site" beside a label that
-              already says where it goes, and a chevron would have made the pill
-              one more row: every venue row to its right ends in exactly that
-              chevron. The shape and the label are the whole affordance. */}
+          {/* The hub's one action on ink. No glyph: a chevron would have made
+              the pill one more row, and every venue row beside it ends in
+              exactly that chevron. */}
           <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"
+            aria-label={labels.browse}
+            className={cn(buttonVariants({ variant: "ink", size: "pill" }), "mt-3.5 w-max max-w-full")}
           >
-            {labels.browse}
+            {labels.browseShort ? (
+              <>
+                <span className="lg:hidden">{labels.browse}</span>
+                <span className="hidden lg:inline">{labels.browseShort}</span>
+              </>
+            ) : (
+              labels.browse
+            )}
           </LinkComponent>
         </div>
 
-        {/* The frosted 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 && (
-              /* No hue: a fact about money, not about the family. In the dark
-                 scope `HueChip`'s `--muted` fallback is the dark pill the design
-                 draws. */
-              <HueChip
-                as="li"
-                className="font-bold tabular-nums"
-                aria-label={`${labels.priceBand}: ${family.priceBandLabel}`}
-                icon={<Wallet className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />}
-              >
-                {family.priceBandLabel}
-              </HueChip>
-            )}
-            {family.chips?.map((chip) => (
-              /* Label only. The counts are VENUES beside a dish group's name,
-                 which every reader takes for dishes. */
-              <HueChip key={chip.slug} as="li" hue={hue}>
-                {chip.label}
-              </HueChip>
-            ))}
-          </ul>
+        {/* The row column: chips, then the rows, on paper from `lg`. */}
+        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", PAPER)}>
+          {family.chips && family.chips.length > 0 && (
+            <ul className="flex flex-wrap items-center gap-1.5 lg:justify-end">
+              {family.chips.map((chip) => (
+                /* Label only. The counts are VENUES beside a dish group's name,
+                   which every reader takes for dishes. */
+                <HueChip key={chip.slug} as="li" hue={hue}>
+                  {chip.label}
+                </HueChip>
+              ))}
+            </ul>
+          )}
 
           {venues.length > 0 && (
             <>
-              <Separator className="my-3" />
+              <Separator className="my-3 via-white/15" />
               <MenuKitchenList
                 kitchens={venues}
                 labels={labels.kitchens}
@@ -281,12 +277,12 @@ export function MenuFamilyBlockSkeleton({
       className={cn("dark relative overflow-hidden rounded-[14px]", GROUND, className)}
       aria-hidden
     >
-      <div className="grid grid-cols-1 lg:grid-cols-[38%_1fr]">
-        <div className="flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5">
-          <Skeleton className="mb-16 h-6 w-[72px] self-end rounded-full lg:mb-3 lg:self-start" />
+      <div className="grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+        <div className="relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5">
+          <Skeleton className="absolute right-3.5 top-3.5 h-6 w-[72px] rounded-full lg:static lg:mb-3" />
           <Skeleton className="h-7 w-[60%]" />
-          <Skeleton className="mt-2 h-3.5 w-[90px]" />
-          <Skeleton className="mt-3.5 h-10 w-[160px] rounded-full" />
+          <Skeleton className="mt-2 h-3.5 w-[150px]" />
+          <Skeleton className="mt-3.5 h-11 w-[160px] rounded-full" />
         </div>
         <div className="flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5">
           <div className="flex gap-1.5">