/* ============================================================
   utilities.css — small single-purpose helpers.
   ============================================================ */

.u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.u-clamp-1, .u-clamp-2, .u-clamp-3, .u-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.u-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.u-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

.u-hidden { display: none !important; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid { display: grid; }

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

.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-wrap { flex-wrap: wrap; }

.u-gap-1 { gap: var(--s-1); }
.u-gap-2 { gap: var(--s-2); }
.u-gap-3 { gap: var(--s-3); }
.u-gap-4 { gap: var(--s-4); }
.u-gap-5 { gap: var(--s-5); }
.u-gap-6 { gap: var(--s-6); }
.u-gap-7 { gap: var(--s-7); }
.u-gap-8 { gap: var(--s-8); }
.u-gap-9 { gap: var(--s-9); }

/* The full spacing scale, not a subset. A gap that silently does nothing
   because .u-mt-3 was never written is impossible to spot in a template. */
.u-mt-0  { margin-top: 0; }
.u-mt-1  { margin-top: var(--s-1); }
.u-mt-2  { margin-top: var(--s-2); }
.u-mt-3  { margin-top: var(--s-3); }
.u-mt-4  { margin-top: var(--s-4); }
.u-mt-5  { margin-top: var(--s-5); }
.u-mt-6  { margin-top: var(--s-6); }
.u-mt-7  { margin-top: var(--s-7); }
.u-mt-8  { margin-top: var(--s-8); }
.u-mt-9  { margin-top: var(--s-9); }
.u-mt-10 { margin-top: var(--s-10); }
.u-mt-11 { margin-top: var(--s-11); }
.u-mt-12 { margin-top: var(--s-12); }

.u-mb-0  { margin-bottom: 0; }
.u-mb-1  { margin-bottom: var(--s-1); }
.u-mb-2  { margin-bottom: var(--s-2); }
.u-mb-3  { margin-bottom: var(--s-3); }
.u-mb-4  { margin-bottom: var(--s-4); }
.u-mb-5  { margin-bottom: var(--s-5); }
.u-mb-6  { margin-bottom: var(--s-6); }
.u-mb-7  { margin-bottom: var(--s-7); }
.u-mb-8  { margin-bottom: var(--s-8); }
.u-mb-9  { margin-bottom: var(--s-9); }

.u-text-soft { color: var(--c-text-soft); }
.u-text-meta { color: var(--c-text-meta); }
.u-text-invert { color: var(--c-text-invert); }

.u-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-meta);
    line-height: 1.4;
}

.u-full { width: 100%; }
.u-relative { position: relative; }

/* Photo wrappers: fixed ratio so nothing shifts while images load. */
.u-ratio { position: relative; overflow: hidden; }
.u-ratio > .photo,
.u-ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-ratio--16-10 { aspect-ratio: 16 / 10; }
.u-ratio--16-9 { aspect-ratio: 16 / 9; }
.u-ratio--4-3 { aspect-ratio: 4 / 3; }
.u-ratio--1-1 { aspect-ratio: 1 / 1; }
.u-ratio--2-3 { aspect-ratio: 2 / 3; }

/* Stretched link: makes a whole card clickable without nesting anchors. */
.u-stretch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Anything that must stay clickable above a stretched link. */
.u-above { position: relative; z-index: 2; }

/* Below-the-fold sections skip layout work until they are near the viewport. */
.u-defer {
    content-visibility: auto;
    contain-intrinsic-size: auto 640px;
}

.u-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.u-no-scrollbar::-webkit-scrollbar { display: none; }