body:is(.courses-archive, .instructors-page) {
	--paper: #f2f0e3;
	--paper-warm: #ebe2ce;
	--bone: #faf7ef;
	--ink: #15140f;
	--ink-soft: #2a2620;
	--ink-mute: #5a5448;
	--ink-faint: #8b8676;
	--accent: #ed6f5c;
	--accent-shadow: rgba(237, 111, 92, 0.16);
	--line: rgba(21, 20, 15, 0.23);
	--line-soft: rgba(21, 20, 15, 0.12);
	--display: "Inter Tight", "Alexandria", sans-serif;
	--body: "Inter", "IBM Plex Sans Arabic", sans-serif;
	--mono: "JetBrains Mono", "IBM Plex Mono", monospace;
	--serif: "Playfair Display", serif;
	color: var(--ink) !important;
	font-family: var(--body) !important;
	background: var(--paper) !important;
	background-color: var(--paper) !important;
	direction: rtl;
	line-height: 1.65;
}
body:is(.courses-archive, .instructors-page) a {
	text-decoration: none;
}
body:is(.courses-archive, .instructors-page) img {
	display: block;
	max-width: 100%;
}
body:is(.courses-archive, .instructors-page) ::selection {
	background: var(--accent);
	color: var(--bone);
}
body:is(.courses-archive, .instructors-page) :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

body:is(.courses-archive, .instructors-page) header.nav {
	position: relative;
	inset: auto;
	z-index: 100;
	width: min(100% - 128px, 1360px);
	height: 93px;
	margin: 0 auto;
	padding: 0;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	box-shadow: none;
	font-family: var(--body);
}
body:is(.courses-archive, .instructors-page) .nav__logo {
	gap: 0;
	margin-left: auto;
}
body:is(.courses-archive, .instructors-page) .nav__logo-text {
	color: var(--ink);
	font:
		800 27px / 1 "Inter Tight",
		"Alexandria",
		sans-serif;
	letter-spacing: -0.065em;
	text-transform: lowercase;
	white-space: nowrap;
	align-items: baseline;
}
body:is(.courses-archive, .instructors-page) .nav__logo-name {
	color: var(--ink) !important;
}
body:is(.courses-archive, .instructors-page) .nav__logo-domain {
	margin-inline-start: 1px;
	color: var(--accent);
	font-family: inherit;
	font-size: 0.56em;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: -0.065em;
}
body:is(.courses-archive, .instructors-page) .nav__links {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	gap: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	transform: translate(-50%, -50%);
}
body:is(.courses-archive, .instructors-page) .nav__links a {
	width: auto;
	padding: 0;
	color: var(--ink);
	font: 600 13px / 1.4 var(--body);
	letter-spacing: 0;
	border: 0;
}
body:is(.courses-archive, .instructors-page) .nav__links a::after {
	display: none;
}
body:is(.courses-archive, .instructors-page) .nav__links a:hover,
body:is(.courses-archive, .instructors-page) .nav__links a.is-active {
	color: var(--accent) !important;
}
body:is(.courses-archive, .instructors-page) header.nav a.nav__cta {
	position: relative;
	padding: 10px 20px;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--ink);
	border-radius: 999px;
	box-shadow: none;
	font: 700 12px / 1.4 var(--body);
	letter-spacing: 0;
}
body:is(.courses-archive, .instructors-page) header.nav a.nav__cta::before {
	display: none;
}
body:is(.courses-archive, .instructors-page) header.nav a.nav__cta:hover {
	color: var(--paper) !important;
	background: var(--ink);
	transform: translateY(-1px);
}
body:is(.courses-archive, .instructors-page) .nav__avatar-mark {
	color: var(--bone);
	background: var(--accent);
}
body:is(.courses-archive, .instructors-page) .nav__user-menu {
	background: var(--bone);
	border-color: var(--line-soft);
	box-shadow: 0 14px 26px rgba(21, 20, 15, 0.12);
}
body:is(.courses-archive, .instructors-page) .nav__toggle span {
	background: var(--ink);
}

body:is(.courses-archive, .instructors-page) main {
	min-height: 60vh;
}
body:is(.courses-archive, .instructors-page) :is(.ca-head, .il-head) {
	width: min(100% - 128px, 1360px);
	margin: 0 auto;
	padding: clamp(78px, 9vw, 136px) 0 60px;
	border-bottom: 1px solid var(--line);
}
body:is(.courses-archive, .instructors-page)
	:is(.ca-head__title, .il-head__title) {
	max-width: 920px;
	margin: 0;
	color: var(--ink);
	font: 800 clamp(34px, 3.8vw, 52px) / 1.18 var(--display);
	letter-spacing: -0.06em;
}
body:is(.courses-archive, .instructors-page)
	:is(.ca-head__title, .il-head__title)
	.hl {
	padding: 0;
	color: var(--accent);
	background: none;
}
body:is(.courses-archive, .instructors-page)
	:is(.ca-head__rule, .il-head__rule) {
	display: none;
}
body.instructors-page .il-head__sub {
	max-width: 580px;
	margin: 26px 0 0;
	color: var(--ink-mute);
	font-size: 16px;
	line-height: 1.9;
}

body.courses-archive .ca-filters {
	width: min(100% - 48px, 1360px);
	margin: 0 auto;
	padding: 44px 0 0;
	display: grid;
	grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(110px, 1fr)) auto;
	align-items: end;
	gap: 12px;
}
body.courses-archive .ca-filter {
	display: grid;
	gap: 6px;
	color: var(--ink-mute);
	font: 500 10px / 1.25 var(--body);
}
body.courses-archive .ca-filter :is(input, select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 42px;
	padding: 8px 12px !important;
	border: 1px solid var(--line) !important;
	border-radius: 12px !important;
	background: var(--bone) !important;
	color: var(--ink) !important;
	box-shadow: none !important;
	font: 500 12px / 1.4 var(--body) !important;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease !important;
}
body.courses-archive .ca-filter input::placeholder {
	color: var(--ink-mute);
	opacity: 1;
}
body.courses-archive .ca-filter :is(input, select):focus-visible {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 2px var(--accent-shadow) !important;
	outline: 2px solid var(--accent) !important;
	outline-offset: 2px !important;
}
body.courses-archive .ca-filter__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
}
body.courses-archive .ca-filter__submit {
	min-height: 42px;
	padding: 9px 20px !important;
	border: 1px solid var(--accent) !important;
	border-radius: 999px !important;
	background: var(--accent) !important;
	color: var(--bone) !important;
	box-shadow: none !important;
	font: 700 12px var(--body) !important;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background 0.18s ease,
		transform 0.18s ease;
}
body.courses-archive .ca-filter__submit:hover {
	background: var(--accent-soft) !important;
	color: var(--ink) !important;
	border-color: var(--accent-soft) !important;
	box-shadow: none !important;
	transform: translateY(-1px) !important;
}
body.courses-archive .ca-filter__submit:active {
	box-shadow: none !important;
	transform: translateY(1px) !important;
}
body.courses-archive .ca-filter__reset {
	color: var(--ink);
	font: 500 11px var(--body);
	white-space: nowrap;
}
body.courses-archive .ca-filter__reset:hover {
	color: var(--accent);
}
body.courses-archive .ca-results-count {
	width: min(100% - 128px, 1360px);
	margin: 24px auto 0;
	color: var(--ink-faint);
	font-size: 12px;
}
body.instructors-page .il-head__browse {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
	padding: 10px 20px;
	border: 1px solid var(--accent);
	border-radius: 999px;
	background: var(--accent);
	color: var(--bone);
	font: 700 13px / 1.4 var(--body);
	text-decoration: none;
	transition:
		border-color 0.18s ease,
		background 0.18s ease,
		transform 0.18s ease;
}
body.instructors-page .il-head__browse:hover {
	border-color: var(--accent-soft);
	background: var(--accent-soft);
	color: var(--ink);
	transform: translateY(-1px);
}

body:is(.courses-archive, .instructors-page) :is(.ca-grid, .il-grid) {
	width: min(100% - 128px, 1360px);
	margin: 0 auto;
	padding: 45px 0 110px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 24px;
}
body:is(.courses-archive, .instructors-page) :is(.c-card, .i-card) {
	min-width: 0;
	background: var(--bone);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow:
		0 4px 10px -7px var(--accent-shadow),
		inset 0 0 0 1px rgba(21, 20, 15, 0.04);
	color: var(--ink);
	overflow: hidden;
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}
body:is(.courses-archive, .instructors-page) :is(.c-card, .i-card):hover {
	border-color: var(--accent);
	box-shadow:
		0 7px 14px -8px var(--accent-shadow),
		inset 0 0 0 1px rgba(21, 20, 15, 0.04);
	transform: translateY(-3px);
}
body:is(.courses-archive, .instructors-page)
	:is(.c-card, .i-card):focus-within {
	border-color: var(--accent);
}
body.courses-archive .c-card {
	cursor: pointer;
}
body.courses-archive .c-card__name a {
	color: inherit;
}
body:is(.courses-archive, .instructors-page)
	:is(.c-card__hero, .i-card__frame) {
	position: relative;
	margin-top: 0;
	overflow: hidden;
	background: var(--paper-warm);
	transform: none;
}
body.courses-archive .c-card__hero {
	aspect-ratio: 16 / 10;
}
body.instructors-page .i-card__frame {
	aspect-ratio: 4 / 3;
}
body:is(.courses-archive, .instructors-page)
	:is(.c-card__hero img, .i-card__img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none !important;
	transform: none;
	transition: transform 0.4s ease;
}
body:is(.courses-archive, .instructors-page)
	:is(.c-card, .i-card):hover
	:is(.c-card__hero img, .i-card__img) {
	transform: scale(1.035);
}
body:is(.courses-archive, .instructors-page)
	:is(.c-card__hero-tag, .i-card__stamp) {
	position: absolute;
	right: 14px;
	bottom: 14px;
	top: auto;
	left: auto;
	z-index: 1;
	padding: 6px 10px;
	border: 0;
	background: var(--bone);
	color: var(--ink);
	font: 600 11px var(--body);
	letter-spacing: 0;
}
body.courses-archive .c-card__body,
body.instructors-page .i-card__body {
	padding: 24px;
}
body:is(.courses-archive, .instructors-page) :is(.c-card__name, .i-card__name) {
	margin: 0 0 12px;
	color: var(--ink);
	font: 700 clamp(23px, 2.2vw, 32px) / 1.35 var(--display);
	letter-spacing: -0.04em;
}
body.courses-archive .c-card__name {
	font-size: clamp(21px, 1.9vw, 28px);
}
body.instructors-page .i-card__name .hl {
	padding: 0;
	color: var(--accent);
	background: none;
}
body:is(.courses-archive, .instructors-page) :is(.c-card__desc, .i-card__desc) {
	margin: 0 0 20px;
	color: var(--ink-mute);
	font-size: 13px;
	line-height: 1.85;
}
body.courses-archive .c-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 16px;
}
body.courses-archive .c-card__meta-item {
	color: var(--ink-mute);
	font-size: 12px;
}
body.courses-archive .c-card__price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft);
}
body.courses-archive .c-card__price-now {
	color: var(--ink);
	font: 800 23px var(--display);
}
body.courses-archive .c-card__price-old {
	color: var(--ink-faint);
	font: 12px var(--mono);
	text-decoration: line-through;
}
body.courses-archive .c-card__discount {
	color: var(--accent);
	font: 700 11px var(--body);
}
body.courses-archive .ca-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 48px 0;
	color: var(--ink-mute);
}
body.courses-archive .ca-pagination {
	width: min(100% - 128px, 1360px);
	margin: -50px auto 80px;
}
body.courses-archive .ca-pagination .page-numbers {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}
body.courses-archive .ca-pagination :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	color: var(--ink);
}
body.courses-archive .ca-pagination a:hover,
body.courses-archive .ca-pagination .current {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--bone);
}

body.instructors-page .i-card {
	display: flex;
	flex-direction: column;
}
body.instructors-page .i-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0;
}
body.instructors-page .i-card__role {
	margin: 0 0 16px;
	color: var(--ink-mute);
	font: 600 12px var(--body);
	direction: ltr;
	text-align: right;
}
body.instructors-page .i-card__rule {
	width: 32px;
	height: 1px;
	margin-bottom: 16px;
	background: var(--accent);
}
body.instructors-page .i-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 18px;
}
body.instructors-page .i-card__tag {
	padding: 4px 9px;
	border: 1px solid var(--line-soft);
	color: var(--ink-mute);
	font: 10px var(--mono);
}
body.instructors-page .i-card__cta {
	margin-top: auto;
	padding-top: 10px;
	color: var(--accent);
	font: 700 12px var(--body);
}
body.instructors-page .i-card__cta::after {
	content: " ↖";
}
body.instructors-page .i-card:hover .i-card__cta {
	color: var(--ink);
}

@media (max-width: 1279px) {
	body:is(.courses-archive, .instructors-page) header.nav {
		width: min(100% - 88px, 1360px);
	}
}
@media (max-width: 1079px) {
	body:is(.courses-archive, .instructors-page) header.nav {
		width: calc(100% - 64px);
	}
	body:is(.courses-archive, .instructors-page) .nav__links {
		display: none;
	}
	body.courses-archive .ca-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 799px) {
	body:is(.courses-archive, .instructors-page) :is(.ca-grid, .il-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 680px) {
	body:is(.courses-archive, .instructors-page) header.nav {
		width: calc(100% - 40px);
		height: 75px;
	}
	body:is(.courses-archive, .instructors-page) .nav__logo-text {
		font-size: 27px;
	}
	body:is(.courses-archive, .instructors-page) .nav__links {
		top: 75px;
		right: 0;
		left: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		gap: 0;
		max-height: calc(100dvh - 75px);
		padding: 8px 20px;
		overflow-y: auto;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		transform: translateY(-120%);
		opacity: 0;
		pointer-events: none;
	}
	body:is(.courses-archive, .instructors-page) .nav.is-open .nav__links {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	body:is(.courses-archive, .instructors-page) .nav__links a {
		display: block;
		width: 100%;
		padding: 13px 0;
	}
	body:is(.courses-archive, .instructors-page)
		:is(.ca-head, .il-head, .ca-grid, .il-grid) {
		width: calc(100% - 40px);
	}
	body:is(.courses-archive, .instructors-page) :is(.ca-head, .il-head) {
		padding: 74px 0 44px;
	}
	body:is(.courses-archive, .instructors-page)
		:is(.ca-head__title, .il-head__title) {
		font-size: clamp(32px, 7vw, 42px);
	}
	body:is(.courses-archive, .instructors-page) :is(.ca-grid, .il-grid) {
		grid-template-columns: 1fr;
		padding-bottom: 85px;
	}
	body.courses-archive :is(.ca-filters, .ca-results-count, .ca-pagination) {
		width: calc(100% - 40px);
	}
	body.courses-archive .ca-filters {
		grid-template-columns: 1fr;
		padding-top: 30px;
	}
	body.courses-archive .ca-filters,
	body.courses-archive .ca-results-count,
	body.courses-archive .ca-pagination {
		width: calc(100% - 40px);
	}
	body.courses-archive .ca-filter__actions {
		justify-content: space-between;
	}
}
