/* ============================================================
   utilities.css — single-purpose helpers (no raw hex)
   ============================================================ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-5); }
.flex { display: flex; gap: var(--space-4); }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
.text-right { text-align: right; }
.tabular { font-variant-numeric: tabular-nums; }
.full { width: 100%; }
.hidden { display: none; }
.scroll-x { overflow-x: auto; }

/* Audrey's natural register — the brand board sets it as tracked caps. All-caps needs
   +5–12% tracking (light sans needs the top of that range) or the caps read cramped. */
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--sage-ink); }
.disp-caps { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.10em; }