Card
One card shape for anything the journal can point at: summaries, categories, dream categories, favorites, and people, places and projects. A visual on top, the context below it. Three sizes, each with a fixed height, each filling its grid column. Below 670px every card turns horizontal on its own.
Shown in a 46rem column, the width of the splash page's #how section. Width has a floor and fills its track, with no max, so a row never leaves a gap. Height is fixed; long content clamps instead of stretching the card.
Below 670px every row drops to one column and every card flips: visual on the left, content on the right, full width. The title goes to one line with an ellipsis; the description keeps two. Medium and large share this shape; small gets its own, with no description. .horizontal forces it at any width (lists, side panels); .vertical opts out.
Every type in a .card-row up to 72rem wide: 6 small, 5 medium or 3 large per row. People show their initials; past the size's badge limit (2 / 3 / 4) the last slot becomes +N. Resize the window to watch the rows reflow.
The root is .item-card because .card is already the plain panel under dreams, patterns and triage. The parts keep the handoff's names, so the Figma layers can use the same ones.
article.item-card[.sm | .lg][.horizontal | .vertical]
a.card-visual aria-hidden, tabindex=-1, holds the glyph
div.card-body
div.card-type eyebrow
a.card-title the one tab stop
p.card-desc plain text, never inside a link
div.card-badges
span.badge.card-badge × n
span.card-more "+N"
Everything is bound to tokens.css. The card added two tokens: --card-thumb-hover, the visual's hover fill (dark: --bg-muted mixed 10% toward --fill-accent; light: --bg-page), and --dur-hover .25s, the app's first duration token. Card fill --bg-raised; visual and badge fill --bg-muted; hairlines --border-default; title --text-default; description and badges --text-muted; glyph, title hover and focus ring --text-accent; eyebrow --text-accent-muted; radius --radius-lg and --radius-pill.