The Land

The New Pattern: Large-Number Stat Callout

Stage 3 introduces Unit 15's new CSS pattern: the large-number statistical callout. This is a component used across data journalism, annual reports, and nonprofit communications to present a hard number at display scale, with minimal surrounding text.

The design logic is matter-of-fact. A very large number. A short label below it naming what it measures. A single sentence of context below that. No editorializing in the CSS. The number carries the weight on its own.

In Stage 3 you will build four stat callouts documenting the land loss of the allotment era: 138 million acres in 1887, 48 million in 1934, 90 million transferred in 47 years. These are documented figures from the Meriam Report (1928) and federal land records. The CSS presents them. It does not interpret them.

The Stat Callout CSS

The key new property in this stage is clamp() applied at display scale. You have used clamp() before for section headings. Here you are using it on numbers meant to dominate the visual field of the card.

The stat grid and card

• gap: 32px: Slightly wider than the 24px policy grid gap. Stat callouts are large visual objects; more space between them lets each number breathe.
• text-align: center: Centers all text content within the card. The number, the label, and the context sentence all align to the center axis. This is standard for display statistics, the number functions as a focal point, not the start of a reading line.

The number itself

• font-family: 'Playfair Display': The same serif used for section headings. At display scale, Playfair Display's weight and contrast make numbers feel like published record rather than dashboard data.
• font-size: clamp(3rem, 6vw, 5rem): Three arguments. Never smaller than 3rem. Never larger than 5rem. Between those limits, scale at 6% of the viewport width. On a 900px screen: 6vw = 54px, which is between 3rem (48px) and 5rem (80px), so it uses 54px. On a 600px screen: 6vw = 36px, which is below 3rem, so it uses 3rem (48px). The number never collapses to unreadable.
• line-height: 1: No extra vertical space above or below the number. At display scale, the default line-height would add visible gaps above and below the text. line-height: 1 collapses this to exactly the cap height of the text.

Label and context text

• .stat-label: Names what the number measures. All-caps, tracked wide, --gold color. It reads before the number on the first pass, anchoring what the reader is about to see.
• .stat-context: One sentence of factual context, source, date range, or clarifying note. Smaller and dimmer than the label. It is there for the reader who needs it, not visible enough to compete with the number.

Your Task

The four stat callouts are pre-built with documented figures. Read each one carefully and verify it against the sources listed in Step 1. Then do one thing:

• Find the <!-- ADD YOUR STAT --> comment at the bottom of the stat grid. Research the land base of the Tribal nation you plan to document in Stage 5. How many acres did they hold before allotment? How many remain today? Add a 5th stat callout to the grid using one of those numbers.

Why the Design Choice Matters

You could write "The allotment era resulted in the loss of 90 million acres of Indigenous land" and it would convey the same information. But a sentence in paragraph form processes differently than a number at 5rem. The reader has to assemble the meaning from the words. The number presents itself whole. It lands before the brain can organize a defense against it.

The minimal framing, no color gradient, no animation, no decorative element, is also a choice. Anything added around the number would dilute it. The design is doing exactly what good data visualization does: removing everything that is not the data.