/* ============================================================
   Utilities — sparingly used helpers
   ============================================================ */

.u-center { text-align: center; }
.u-right  { text-align: right; }
.u-left   { text-align: left; }

.u-italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }
.u-display { font-family: var(--f-display); }
.u-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.u-mute { color: var(--c-text-mute); }
.u-text-2 { color: var(--c-text-2); }
.u-terra { color: var(--c-terracotta); }
.u-turq { color: var(--c-turquoise); }
.u-honey { color: var(--c-honey-dk); }
.u-bougainvillea { color: var(--c-bougainvillea); }

.u-bg-paper { background: var(--c-paper); }
.u-bg-alt   { background: var(--c-limestone-2); }
.u-bg-espresso { background: var(--c-espresso); color: var(--c-limestone); }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }

.u-hide-on-mobile { display: initial; }
.u-show-on-mobile { display: none; }
@media (max-width: 700px) {
  .u-hide-on-mobile { display: none !important; }
  .u-show-on-mobile { display: initial; }
}

.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid { display: grid; }
.u-block { display: block; }

.u-relative { position: relative; }
.u-overflow-hidden { overflow: hidden; }

.u-full { width: 100%; }
.u-narrow { max-width: var(--container-text); margin-inline: auto; }