/* utilities.css — spacing/layout helpers */
.u-center { text-align: center; }
.u-left { text-align: left; }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-6 { gap: var(--sp-6); }
.u-wrap { flex-wrap: wrap; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-mb-8 { margin-bottom: var(--sp-8); }
.u-mx-auto { margin-inline: auto; }
.u-muted { color: var(--color-text-muted); }
.u-subtle { color: var(--color-text-subtle); }
.u-narrow { max-width: 60ch; }
.u-narrow-center { max-width: 60ch; margin-inline: auto; }
.u-full { width: 100%; }
.u-hide { display: none; }
.surface-alt { background: var(--color-background-alt); }
.surface-tint { background: var(--color-background-tint); }

/* scroll-in animation hook */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }