.u-flex      { display: flex; }
.u-grid      { display: grid; }
.u-col       { flex-direction: column; }
.u-wrap      { flex-wrap: wrap; }
.u-mid       { align-items: center; }
.u-top       { align-items: flex-start; }
.u-between   { justify-content: space-between; }
.u-center    { justify-content: center; }

.u-gap-xs    { gap: .5rem; }
.u-gap-s     { gap: 1rem; }
.u-gap-m     { gap: 1.9vw; }
.u-gap-l     { gap: 3.2vw; }
.u-gap-v     { gap: 2.4vh; }

.u-mt-s      { margin-top: 1.6vh; }
.u-mt-m      { margin-top: 3.4vh; }
.u-mt-l      { margin-top: 6vh; }
.u-mb-s      { margin-bottom: 1.6vh; }
.u-mb-m      { margin-bottom: 3.4vh; }
.u-mb-l      { margin-bottom: 6vh; }
.u-mx-auto   { margin-left: auto; margin-right: auto; }
.u-ml-auto   { margin-left: auto; }

.u-pt-l      { padding-top: 7vh; }
.u-pb-l      { padding-bottom: 7vh; }

.u-w-full    { width: 100%; }
.u-maxw-copy { max-width: 60ch; }
.u-maxw-half { max-width: 46ch; }

.u-text-lead   { font-size: 1.1rem; line-height: 1.75; }
.u-text-small  { font-size: .88rem; line-height: 1.6; }
.u-text-micro  { font-size: .78rem; line-height: 1.55; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-serif       { font-family: Spectral, Georgia, serif; }
.u-sans        { font-family: Karla, Helvetica, Arial, sans-serif; }
.u-bold        { font-weight: 700; }
.u-heavy       { font-weight: 900; }
.u-track       { letter-spacing: .16em; text-transform: uppercase; }

.u-ink       { color: #2e1065; }
.u-ink-soft  { color: #4a3170; }
.u-ink-mute  { color: #6b5390; }
.u-accent    { color: #7c3aed; }
.u-gold      { color: #8a6524; }
.u-invert    { color: #ffffff; }

.u-bg-white  { background: #ffffff; }
.u-bg-tint   { background: #faf5ff; }
.u-bg-deep   { background: #f3e8ff; }
.u-round     { border-radius: 12px; }
.u-round-l   { border-radius: 20px; }
.u-hair      { border: 1px solid #e6dcf2; }
.u-pad       { padding: 1.7rem; }
.u-pad-l     { padding: 2.6rem; }

.u-rel       { position: relative; }
.u-hide      { display: none; }

@media (max-width: 1024px) {
  .u-hide-tab { display: none; }
  .u-gap-l { gap: 4vh; }
}
@media (max-width: 768px) {
  .u-hide-mob { display: none; }
  .u-gap-m { gap: 3vh; }
  .u-text-right { text-align: left; }
  .u-pad-l { padding: 1.6rem; }
}