/* Links
======================================== */
.link{
	--offset: 2px;
}
.txt-serif--extra.link{
	--offset: 3px;
}
.link:focus,
.link.active,
.desktop .link:hover,
.devices .link:active{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--offset);
}

/* Triggers
======================================== */
.trigger{
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	cursor: pointer;
}
.trigger:focus,
.trigger.active,
.desktop .trigger:hover{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Close
======================================== */
.close-icon{
	--w: calc(var(--global-m)*2);
	width: var(--w);
	height: var(--w);
	margin-top: calc(var(--page-sides--s) - var(--page-top));
	cursor: pointer;
	pointer-events: all;
}
.close-icon svg{
	width: 100%;
	height: 100%;
	stroke-width: 1px;
	stroke: white;
}
.devices .close-icon{
	position: relative;
}
.devices .close-icon::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% + var(--page-sides--s)*2);
	height: calc(100% + var(--page-sides--s)*2);
	transform: translate(-50%, -50%);
}

/* Cursor
======================================== */
#cursor{
	--w: var(--global-m);
	position: fixed;
	width: calc(var(--w)*3);
	height: calc(var(--w)*2);
	mix-blend-mode: difference;
	transform: translate(-50%, -50%);
	cursor: none;
	pointer-events: none;
	z-index: 3;
}
#cursor.left{
	transform: translate(-50%, -50%) scaleX(-1);
}
#cursor svg{
	width: 100%;
	height: 100%;
	stroke-width: 1px;
	stroke: white;
}
.devices #cursor{
	display: none !important;
}