:root {
	--gap-s: clamp(.5rem, 2vw, 1rem);
	--gap-m: clamp(1rem, 3vw, 2rem);
	--gap-l: clamp(2rem, 6vw, 4rem);

	--fs-s: .75rem;
	--fs-m: .875rem;
	--fs-l: 1.25rem;
	--fs-xl: 2rem;

	--ls-s: .02em;
	--ls-m: .08em;
	--ls-l: .16em;
	--ls-xl: .3em;
}


.vbox {
	display: flex;
	flex-direction: column;
}

.hbox {
	display: flex;
	flex-direction: row;
}

.center {
    align-items: center;
    justify-content: center;
}


.expand-h {
    height: 100%;
}

.expand-w {
    width: 100%;
}


.space {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.space-evenly {
    justify-content: space-evenly;
}


.gap-s {
    gap: var(--gap-s);
}

.gap-m {
    gap: var(--gap-m);
}

.gap-l {
    gap: var(--gap-l);
}


.italic {
    font-style: italic;
}



.thin {
    font-weight: 100;
}

.normal {
    font-weight: 300;
}

.thick {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

.heavy {
    font-weight: 900;
}


.bolder {
    font-weight: bolder;
}

.lighter {
    font-weight: lighter;
}


.upper {
    text-transform: uppercase;
}

.lower {
    text-transform: lowercase;
}

.title {
    text-transform: capitalize;
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Hyper Link-style hazard stripe bar */
.stripes {
	height: .25rem;
	background: repeating-linear-gradient(135deg, var(--stripe) 0 2px, transparent 2px 6px);
}