Typography

Extends base.css with classes for cases where a tag alone isn't enough - helpers/typography.css.

Size & Color

Class	Purpose
`.ncss-text-sm/base/md/lg/xl`	Font size
`.ncss-text-muted/brand/brand-2/neutral/success/warning/danger`	Text color
`.ncss-text-inherit`	`color: inherit` - for text on a colored surface
`.ncss-text-light/-dark` (+ `-100/-300/-700/-900`)	Forced light/dark text, theme-independent - see Colors

<p class="ncss-text-lg ncss-text-muted">Larger, muted text</p>

Alignment & Wrapping

`.ncss-text-center/start/end/justify`	Text alignment
`.ncss-text-balance` / `.ncss-text-pretty`	`text-wrap: balance/pretty`
`.ncss-truncate`	Single-line truncation with ellipsis
`.ncss-clamp-lines` (+ `--ncss-clamp-lines`)	Multi-line truncation, modern CSS instead of JS
`.ncss-hyphenate`	`hyphens: auto` (needs a correct `lang` attribute)

<h2 class="ncss-text-balance">A heading that wraps evenly</h2>
<p class="ncss-truncate">Very long text that gets cut off on a single line…</p>

Drop Cap & Multi-column Text

`.ncss-drop-cap` (+ `--sm`/`--lg`/`--light`/`--brand`)	Initial letter via `initial-letter` (+ `-webkit-` prefix for Safari)
`.ncss-columns` (+ `--ncss-columns-width`)	Multi-column body text, `column-width`-based
`.ncss-pull-quote`	Highlighted quote, `column-span: all` inside `.ncss-columns`
`.ncss-text-boxed`	"Highlighter" look across multiple lines (`box-decoration-break: clone`) - needs `display:inline`, never nest directly inside `.ncss-stack`/`-cluster`/`-grid`

<p class="ncss-drop-cap ncss-columns" style="--ncss-columns-width: 18rem;">
  Long body text that automatically splits into multiple columns…
</p>

Other

.ncss-eyebrow (kicker above a heading), .ncss-lead-quote (left accent border), .ncss-tracking-tight/normal/wide/wider/widest (letter spacing), .ncss-nums-tabular/-oldstyle (font-variant-numeric). Bulleted/definition lists (.ncss-list--*, .ncss-dl--*) are their own component: Lists.