Say it in the margin, not the sentence

Source · Dan, 2026-06-22

"let this be the 'footnote pattern' as it also highlights in red, and it picks out highlight bold for particular words or phrases."

The problem

A long-read accretes reader questions and replies in the margins. Dumped inline they swamp the spine of the piece; given long descriptive titles they turn the footer into a wall of competing headlines. You want the appendix dense and scannable when closed, and fully self-announcing when opened — without the collapsed list shouting over the article above it.

The conventional footnote solves one half: it gets the annotation out of the body. It fails the other half: the collapsed list has no hierarchy, so the eye can't scan it, and the opened body leads with a number rather than a title, so you're already back in the spine before the note has announced itself.

The element, in-page

The live copy below runs in a sandboxed iframe (the pattern-preview primitive). Superscript markers link to the footnote list; clicking any marker scrolls to the matching note and highlights it via CSS :target. The back-link returns to the reference point in the body. Flip the tabs to read the source.

The two-signature system

Two semantic signals do the emphasis work — each carries a distinct register, and they're meant to be rationed:

Red italic  carries the through-line: the accent colour (#2c4a3a) on a phrase that runs across the argument, and the one-word keyword in the collapsed summary. It's the note's identity.
Bold  picks out the single term under the lens in a given paragraph — the word the reply is examining right now. It's the note's focus.
Nested  for bold-red: a word that is simultaneously the through-line and the examined term — the pivot at which argument and annotation meet.

The discipline is one  per paragraph maximum. If every third word is picked out, nothing is — the signal relies on scarcity.

When it breaks

Two-word creep. The discipline is one keyword per footnote. A tight two-word term (clean exits) is the ceiling, not the target. Let the handle grow and the collapsed list stops being an index.
Bold everywhere. If every other word is picked out in , nothing is. The pick-out only works rationed to the one term that matters in that paragraph.
Orphan keyword. If the summary word never appears in the carried-in headline, the closed and open states stop agreeing. The headline must land on the same word as the collapsed handle.
Dropped back-link. Without a .fn-back link, the reader who expands a note has no cheap route back to where they were in the body text — the footnote becomes a dead-end.

Where it applies

Use on long-form editorial pieces — happiness.gf.cx/behaviour/ articles are the canonical home — where the author wants to answer reader questions without pulling the reader out of the spine.
Use when annotations have a single identifiable keyword: the note is answering a question, defining a term, or examining a phrase the body uses without explaining.
Skip when every paragraph has three markers: at that density you need a sidebar or a separate page, not a foot-anchored list.
Skip when the notes are pure citations with no prose body — a standard numbered reference list is simpler and more familiar for that job.

Reusable elements

The named, copyable pieces — lift any one without the others:

Superscript marker pair — <a href="#fnN" id="fnrefN">N</a> in the body; id="fnN" on the list item. Bidirectional: the id on the ref is the back-link's target.
Carried-in headline —  as the first element of each footnote body; carries the full title that was too long for the collapsed summary. Must end on the same keyword as the summary word.
One-keyword summary — the collapsed row is just the muted label + a single italic keyword. Every keyword on the page is unique — it is the footnote's handle and memory hook.
:target highlight — scroll-margin-top + background transition on li:target; no JS required for the visual state, only for smooth scrolling.
Two-signature emphasis — red  for through-line, bold  for the examined term, nested  for bold-red pivot. All three copy cleanly to any editorial surface.
Back-link — <a href="#fnrefN" class="fn-back">↩ back</a> at the close of each note body; monospace, muted, right of the last sentence.

Reference

Source: Dan, 2026-06-22 — named and formalised while converting behaviour/scorched-earth-game-plays-out/ to the pattern.
In use / example: happiness.gf.cx/behaviour/scorched-earth-game-plays-out/ — the conversion that named the pattern, with keywords call · yours · state · keystone · table · collateral · protective · glance. Also the-1am-paragraph/ — where the single-word reveal was first cut.
Reusable elements: Superscript marker pair · carried-in headline · one-keyword summary · :target highlight · two-signature emphasis (red em + bold strong + nested bold-red) · back-link (listed above).
Origin: Named by Dan on 2026-06-22. Pairs with the editorial article micro-decision grouping — that pattern shapes the spine, this one shapes the margins.