/**
 * UTILITIES
 *
 * Single-purpose overrides. Last layer, so they win without !important.
 * Keep this short — anything that grows variants belongs in a component.
 */

@layer utilities {
	.visually-hidden:not(:focus):not(:active) {
		clip-path: inset(50%);
		block-size: 1px;
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	.skip-link {
		position: absolute;
		inset-block-start: var(--space-2xs);
		inset-inline-start: var(--space-2xs);
		z-index: 999;
		padding: var(--space-2xs) var(--space-s);
		background-color: var(--clr-accent);
		color: var(--clr-accent-text);
		border-radius: var(--radius-md);
	}

	/* Display steps, for when an element isn't the right heading level. */
	.text-display-1 {
		font-family: var(--font-display);
		font-size: var(--fs-display-1);
		line-height: var(--lh-display-1);
		letter-spacing: var(--track-display-1);
		text-transform: uppercase;
	}
	.text-display-2 {
		font-family: var(--font-display);
		font-size: var(--fs-display-2);
		line-height: var(--lh-display-2);
		letter-spacing: var(--track-display-2);
		text-transform: uppercase;
	}
	.text-display-3 {
		font-family: var(--font-display);
		font-size: var(--fs-display-3);
		line-height: var(--lh-display-3);
		letter-spacing: var(--track-display-3);
		text-transform: uppercase;
	}
	.text-display-4 {
		font-family: var(--font-display);
		font-size: var(--fs-display-4);
		line-height: var(--lh-display-4);
		text-transform: uppercase;
	}

	/* The eyebrow that opens most sections: "/// 01 — Who we are" */
	.eyebrow {
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-semibold);
		line-height: var(--lh-eyebrow);
		letter-spacing: var(--track-eyebrow);
		text-transform: uppercase;
	}
	.eyebrow::before {
		content: "/// ";
		color: var(--clr-accent);
	}

	.text-accent  { color: var(--clr-accent); }
	.text-muted   { color: var(--clr-text-muted); }
	.font-bold    { font-weight: var(--weight-bold); }

	.bg-alt     { background-color: var(--clr-bg-alt); }
	.bg-inverse { background-color: var(--clr-bg-inverse); color: var(--clr-text-inverse); }
}