Restore the DatedList's multi-column grid on the cocktails index (#78) - #80

/cocktails/ was the only content page dropping a component straight into a
full-bleed 1440px .ds-container with no rail. .ds-dated was behaving exactly to
spec — measured at the reporter's viewport, .ds-dated__row is 1319px wide with
`grid-template-columns: 180px 1108.83px` — but a date and a three-word drink
name filled the left 40% and the hairline rule ran on across nine hundred empty
pixels. Reproduced locally against a fresh build, so the screenshot was not a
stale cache or a viewport artifact.

Put the page in a .ds-split: title and intro in the rail, the archive beside
them. That is what the design system says the full-bleed width is for —
"Width is spent on a two-column RailLayout […] content beside it", and
"the source site is a single narrow column; the two-column rail is this
system's way of filling the page at desktop width" — and it is what the home
page and every recipe page already do.

Rightmost ink at 1512px goes from 40% to 65% of the container. The list itself
is untouched: same rows, same order, same links, same two-column grid, same
stack at 640px.

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

The first pass at this misread the defect. It wrapped the page in a .ds-split
and put the title in a rail, which moved the ink from 40% to 65% of the
container but left the list one column wide — which is what the issue was
about.

The actual cause is that design/tokens/utilities.css is a lossy export of the
component. It has:

  .ds-dated{display:grid;gap:var(--space-4);…}

display:grid with no grid-template-columns — one column. components/lists/
DatedList.jsx, fetched from the source project with DesignSync, is:

  function DatedList({ items = [], onSelect, columns = true }) {
    <ul style={{ display: "grid",
                 gridTemplateColumns: columns
                   ? "repeat(auto-fit, minmax(var(--grid-min), 1fr))"
                   : "1fr",
                 gap: "0 var(--gutter-column)" }}>

columns defaults to true. The archive is supposed to reflow across as many
360px columns as fit — upstream's own section-index template calls the result
"a two-up list of posts". A token file cannot express a prop, so the export
flattened the component to its columns={false} variant, and the page rendered
as one narrow column down the left of a 1440px container.

design/README.md already records this exact class of gap for --col-min,
--sidebar and --container-max-wide: "upstream these are supplied per-instance
by the React components (inline style), not by the token layer", and any
template using the component must supply them. .ds-dated belongs on that list.

So it is restored in pages.css — design/tokens/ is a read-only mirror and the
design system is not wrong here, the export is — along with the row geometry,
date size and title treatment the same component specifies. Titles come off the
display face at --text-h4, which the component never set and which cannot fit
"Slightly Sour Strawberry Smash" in a column of the grid.

The row override is wrapped in @media (min-width: 641px) because pages.css is
concatenated after ds/utilities.css: flat, it would outrank utilities.css's own
640px stack and the row would never collapse on a phone.

1512px: 3 columns, ink 40% -> 94%. 900px: 2 columns. 375px: 1 column, stacked.

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

The DatedList component is uncapped `auto-fit` — as many --grid-min columns as
fit, which is three in a 1319px container. Upstream never sees three because
its list sits in a ~1000px column behind a ProfileHeader rail, and its template
describes the result as "a two-up list of posts". This site has no rail, so the
cap has to be stated.

Stated as a floor rather than a fixed `repeat(2, …)`:

  minmax(max(var(--grid-min), (100% - var(--gutter-column)) / 2), 1fr)

A track can never be narrower than half the row, so auto-fit cannot place a
third column; below two full --grid-min columns the --grid-min side of the
max() wins again and the grid collapses to one on its own. A fixed two-track
grid would instead hold two cramped columns all the way down to the 640px
stack.

Swept 375–2560px in chromium, firefox and webkit: identical in all three. One
column to 700px, two from 820px, still two at 2560px. Titles get 463px instead
of 233px, so none of the fourteen wraps.

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