Interest card

IN A ONE-PER-VIEW RAIL, THE BODY GOES

Put these in a rail and on a phone each card gets a whole screen and about two seconds. The kicker, the title and the date are what a reader uses in two seconds; the paragraph is not. So the body reads display: var(--rail-brief, flex) — the rail sets that property when it is showing one card at a time, and nothing else sets it, so a card anywhere else is untouched.

Worth knowing what that costs: the text is gone for everyone at that width, screen readers included. On a card that links somewhere it is a summary of a page the reader can open. On a card that does not, it is the only copy there was — so give those cards a title that stands on its own.

THREE NAMES, NOT A MARK PLUS TWO TINTS

One class that draws the square and two that recolour it is the tidier CSS, and it was the first thing written here. It also means .interest-card-tone-lead on its own draws nothing at all — no mark, no error, no clue. Three complete names cost a repeated selector list and buy a caller who cannot get it half right, and one frontmatter word maps straight onto one class with no branch in the middle.

THE BODY IS A PARAGRAPH AND A BOX OF PARAGRAPHS

Write <p class="interest-card-body"> for one sentence, or put the class on a wrapper and pour rendered Markdown into it. Both draw the same, and the second is the only shape a caller can produce from a two-paragraph entry — the fragment arrives as bare <p> nobody can put a class on.

It was a paragraph style alone at first, and that is a trap this system has already been caught in once. The wrapper set no display and no gap, the reset had already zeroed every p margin, and two paragraphs drew exactly 0px apart and read as one run-on block. Same fix as timeline-text, same gap as the card puts between its own children.

WHY THIS IS NOT A FEATURE CELL

They are siblings and they are separate on purpose. A feature cell leads with a picture and says what a thing is; this leads with a pair of labels and says what somebody does. The part they share is the cell, which they both get from the grid.

The head row is baseline-aligned, not centred. The kicker is 11px and the note is 10.5px; centring leaves the two strings visibly unaligned, which reads as a rendering fault. Same rule as the section head, same half-pixel reason. A toned kicker is a flex row and still lines up, because a flex container takes the baseline of its first item.

The right-hand label is .interest-card-note, and it used to be -since. It held "SINCE 2016" when it arrived and now holds "2026 · 04" as often as not — a class named after the string somebody put in it is a name that stops being true without anything failing. It is named for the slot instead, exactly as section-head-note is, which is the same job at the same end of the same kind of row.

A linked card takes an inset ring. It is a grid cell sitting against hairlines it shares with its neighbours, so an outset ring gets drawn half underneath the cell next door. Same reason menu-item and accordion-head are inset, and the transparent outline beside it is what survives Windows high-contrast mode, where a box-shadow is not painted at all.