/* Fonts (SIL OFL 1.1, self-hosted; variable weights), reset and typography. */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Noto Kufi Arabic";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/noto-kufi-arabic-arabic-wght-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
	font-family: "Tajawal";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/tajawal-arabic-400-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "Tajawal";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/tajawal-arabic-700-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "Noto Sans Tifinagh";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/noto-sans-tifinagh-tifinagh-400-normal.woff2") format("woff2");
	unicode-range: U+02C7, U+0301-0302, U+0304, U+0306-0307, U+0309, U+0323, U+0331, U+200C-200D, U+202E, U+25CC, U+2D30-2D7F;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:lang(ar) body,
body:lang(ar) {
	font-family: var(--font-body-ar);
}

h1,
h2,
h3 {
	margin-block: 0 var(--space-4);
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3 {
	font-family: var(--font-heading-ar);
	font-weight: var(--weight-semibold);
	letter-spacing: 0;
	line-height: 1.4;
}

.tfng {
	font-family: var(--font-tfng);
	letter-spacing: 0.04em;
}

p {
	margin-block: 0 var(--space-4);
}

a {
	color: var(--color-accent-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
	color: var(--color-accent-deep);
}

img,
svg {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background: var(--color-ink);
	color: var(--color-on-accent);
	border-radius: var(--radius-sm);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

.icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex: none;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

::selection {
	background: var(--color-accent);
	color: var(--color-on-accent);
}