/* =========================================================
   Behsad Homepage Hero
   External static CSS — Twenty Twenty-Five
   Page: 5534

   IMPORTANT
   - ASCII digits only
   - Mikhak verified as the real loaded FontFace family
   - Header / Manifesto untouched
   ========================================================= */

.bt-behsad-hero {
	--bt-behsad-hero-max-width: 1600px;
	--bt-behsad-hero-gutter: clamp(1.5rem, 4.5vw, 6rem);
	--bt-behsad-header-offset: 0px;

	--bt-behsad-green: #2c675a;
	--bt-behsad-hero-white: #fefdfb;

	position: relative;

	width: 100%;
	max-width: none;
	margin-block: 0;

	background: var(--bt-behsad-hero-white);
	overflow-x: hidden;

	font-family:
		"Vazirmatn",
		"Vazir",
		"Noto Sans Arabic",
		Tahoma,
		Arial,
		sans-serif;
}


/* =========================================================
   Isolation
   ========================================================= */

.bt-behsad-hero,
.bt-behsad-hero *,
.bt-behsad-hero *::before,
.bt-behsad-hero *::after {
	box-sizing: border-box;
}


/* =========================================================
   Main composition
   ========================================================= */

.bt-behsad-hero__inner {
	position: relative;

	width: min(100%, var(--bt-behsad-hero-max-width));
	min-height: clamp(38rem, 76svh, 48rem);

	margin-inline: auto;
	padding-inline: var(--bt-behsad-hero-gutter);
}


/* =========================================================
   Statement
   ========================================================= */

.bt-behsad-hero__statement {
	position: absolute;

	/*
	 * Approved baseline plus optical delta:
	 * DOWN 113px
	 */
	top: calc(
		var(--bt-behsad-header-offset) +
		clamp(7rem, 14svh, 9.25rem) +
		113px
	);

	/*
	 * Approved baseline plus optical delta:
	 * LEFT 76px, therefore increase the right offset.
	 */
	right: calc(
		var(--bt-behsad-hero-gutter) +
		clamp(0.75rem, 1.35vw, 1.6rem) +
		76px
	);

	width: auto;
	max-width: min(44rem, 72vw);

	margin: 0;
	padding: 0;

	font-family:
		"Mikhak",
		"Vazirmatn",
		"Noto Sans Arabic",
		Tahoma,
		Arial,
		sans-serif;

	font-size: clamp(2.05rem, 2.85vw, 2.9rem);
	font-weight: 500;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	text-align: right;
	white-space: nowrap;

	color: var(--bt-behsad-green);

	background: none;
	border: 0;
	box-shadow: none;
}


/* =========================================================
   Historical artwork
   ========================================================= */

.bt-behsad-hero__artwork-wrap {
	position: absolute;

	left: clamp(1rem, 3.35vw, 4rem);
	bottom: 0;

	width: min(64vw, 58rem);

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;
}


.bt-behsad-hero__artwork-viewport {
	position: relative;

	width: 100%;
	aspect-ratio: 1672 / 460;

	margin: 0;
	padding: 0;

	overflow: hidden;
	background: var(--bt-behsad-hero-white);
}


.bt-behsad-hero__artwork {
	display: block;

	width: 100%;
	height: auto;
	max-width: none;

	margin: 0;
	padding: 0;

	border: 0;

	transform: translateY(-28.7%);

	image-rendering: auto;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1024px) {

	.bt-behsad-hero {
		--bt-behsad-hero-gutter:
			clamp(1.5rem, 4.5vw, 3.25rem);
	}

	.bt-behsad-hero__inner {
		min-height: clamp(34rem, 70svh, 41rem);
	}

	.bt-behsad-hero__statement {
		top: calc(
			var(--bt-behsad-header-offset) +
			clamp(4.75rem, 11svh, 6.5rem) +
			70px
		);

		right: calc(
			var(--bt-behsad-hero-gutter) +
			clamp(0.75rem, 1.35vw, 1.6rem) +
			48px
		);

		max-width: 80vw;

		font-size: clamp(1.95rem, 4.05vw, 2.52rem);
		font-weight: 500;
		line-height: 1.5;
	}

	.bt-behsad-hero__artwork-wrap {
		left: clamp(0.5rem, 2vw, 1.5rem);
		bottom: 0;

		width: min(76vw, 48rem);
	}

	.bt-behsad-hero__artwork-viewport {
		aspect-ratio: 1672 / 500;
	}

	.bt-behsad-hero__artwork {
		transform: translateY(-26.6%);
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 680px) {

	.bt-behsad-hero {
		--bt-behsad-hero-gutter:
			clamp(1.25rem, 6vw, 1.75rem);
	}

	.bt-behsad-hero__inner {
		display: flex;
		flex-direction: column;

		width: 100%;
		min-height: 0;

		padding-top: calc(
			var(--bt-behsad-header-offset) +
			clamp(3rem, 11vw, 4.1rem)
		);

		padding-right: var(--bt-behsad-hero-gutter);
		padding-bottom: 0;
		padding-left: var(--bt-behsad-hero-gutter);
	}

	.bt-behsad-hero__statement {
		position: relative;

		top: auto;
		right: auto;

		width: 100%;
		max-width: none;

		margin: 0;

		font-size: clamp(1.82rem, 7.7vw, 2.2rem);
		font-weight: 500;

		line-height: 1.55;

		white-space: normal;
		text-align: right;
	}

	.bt-behsad-hero__artwork-wrap {
		position: relative;

		left: auto;
		bottom: auto;

		align-self: flex-start;

		width: 110%;
		max-width: none;

		margin-top: clamp(4rem, 15vw, 5rem);
		margin-right: 0;
		margin-bottom: 0;
		margin-left: -5%;
	}

	.bt-behsad-hero__artwork-viewport {
		aspect-ratio: 1672 / 540;
	}

	.bt-behsad-hero__artwork {
		transform: translateY(-24.4%);
	}
}


/* =========================================================
   Narrow phones
   ========================================================= */

@media (max-width: 420px) {

	.bt-behsad-hero__inner {
		padding-top: calc(
			var(--bt-behsad-header-offset) +
			2.75rem
		);
	}

	.bt-behsad-hero__statement {
		font-size: clamp(1.75rem, 8.15vw, 2.05rem);
		font-weight: 500;
		line-height: 1.55;
	}

	.bt-behsad-hero__artwork-wrap {
		width: 112%;

		margin-top: clamp(3.75rem, 14vw, 4.75rem);
		margin-left: -6%;
	}

	.bt-behsad-hero__artwork-viewport {
		aspect-ratio: 1672 / 555;
	}

	.bt-behsad-hero__artwork {
		transform: translateY(-23.8%);
	}
}


/* =========================================================
   Short desktop / tablet viewports
   ========================================================= */

@media (max-height: 650px) and (min-width: 681px) {

	.bt-behsad-hero__inner {
		min-height: 33rem;
	}

	.bt-behsad-hero__statement {
		top: calc(
			var(--bt-behsad-header-offset) +
			4.25rem +
			70px
		);
	}

	.bt-behsad-hero__artwork-wrap {
		bottom: 0;
		width: min(62vw, 50rem);
	}
}


/* =========================================================
   Twenty Twenty-Five / Gutenberg
   ========================================================= */

.bt-behsad-hero.alignfull {
	width: auto;
	max-width: none;

	margin-block: 0;
}

.bt-behsad-hero h1,
.bt-behsad-hero img {
	margin-block-start: 0;
	margin-block-end: 0;
}

.bt-behsad-hero img {
	border-radius: 0;
	box-shadow: none;
}

.bt-behsad-hero__artwork {
	max-width: none;
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.bt-behsad-hero,
	.bt-behsad-hero *,
	.bt-behsad-hero *::before,
	.bt-behsad-hero *::after {
		animation: none;
		transition: none;
	}
}