:root {
	--navy: #071d3a;
	--navy-2: #0e315d;
	--gold: #d79b28;
	--gold-dark: #b37a1f;
	--red: #d71920;
	--red-dark: #8f1d1d;
	--cream: #f7f0da;
	--brown: #5b3518;
	--green: #275b2d;
	--white: #fff;
	--ticker-duration: 28s;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 15% 15%, rgba(215, 155, 40, .16), transparent 26%),
		linear-gradient(135deg, #fbf5df 0%, #f6edcf 48%, #efe3bd 100%);
	color: #282018;
	font-family: "Cairo", Arial, sans-serif;
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
}

img {
	height: auto;
	max-width: 100%;
}

button {
	font-family: inherit;
}

.skip-link {
	background: var(--navy);
	color: #fff;
	inset-inline-start: 16px;
	padding: 10px 14px;
	position: fixed;
	top: -60px;
	z-index: 10000;
}

.skip-link:focus {
	top: 16px;
}

.site-newsbar {
	align-items: center;
	background: linear-gradient(180deg, var(--navy-2), var(--navy));
	border-bottom: 3px solid #9e271f;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	display: flex;
	height: 72px;
	overflow: hidden;
	position: sticky;
	top: 0;
	z-index: 20;
}

.time-box {
	align-items: center;
	background: linear-gradient(145deg, #102d56, #07162d);
	border-left: 6px solid rgba(255, 255, 255, .85);
	clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	min-width: 232px;
	padding: 8px 26px;
	text-align: center;
}

.time-box strong {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: .5px;
	line-height: 1;
}

.time-box span {
	font-size: 16px;
	font-weight: 700;
	margin-top: 6px;
	opacity: .96;
}

.ticker-window {
	align-items: center;
	direction: ltr;
	display: flex;
	flex: 1;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.ticker-track {
	align-items: center;
	display: flex;
	direction: ltr;
	flex: 0 0 auto;
	transform: translate3d(100%, 0, 0);
	width: max-content;
	will-change: transform;
}

.ticker-track--ready {
	animation: none;
}

.ticker-track--pauseable:hover,
.ticker-track--pauseable:focus-within {
	animation-play-state: paused;
}

.ticker-group {
	align-items: center;
	direction: rtl;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 34px;
	padding-inline: 17px;
}

.ticker-item {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 21px;
	font-weight: 800;
	gap: 10px;
}

.ticker-item::before {
	background: var(--red);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(215, 25, 32, .8);
	content: "";
	height: 16px;
	width: 16px;
}

.ticker-item b {
	color: var(--gold);
	font-weight: 900;
	margin-inline-end: 2px;
}

.family-hero {
	align-items: stretch;
	direction: ltr;
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(430px, 1.05fr) minmax(340px, .95fr);
	margin: 34px auto 46px;
	width: min(1220px, 94vw);
}

.tree-card,
.bio-card {
	background: rgba(255, 250, 235, .84);
	border: 1px solid rgba(91, 53, 24, .16);
	border-radius: 30px;
	box-shadow: 0 22px 55px rgba(62, 42, 18, .17);
	overflow: hidden;
	position: relative;
}

.tree-card::before,
.bio-card::before {
	background-image:
		linear-gradient(30deg, transparent 48%, #b9944e 49%, transparent 51%),
		linear-gradient(150deg, transparent 48%, #b9944e 49%, transparent 51%);
	background-size: 42px 42px;
	content: "";
	inset: 0;
	opacity: .13;
	pointer-events: none;
	position: absolute;
}

.tree-card {
	align-items: center;
	direction: rtl;
	display: flex;
	justify-content: center;
	min-height: 660px;
	padding: clamp(8px, 1vw, 14px);
}

.tree-figure {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	justify-content: center;
	min-height: inherit;
	position: relative;
	width: 100%;
	z-index: 1;
}

.tree-toolbar,
.tree-zoom-button,
.family-seal--small,
[data-tree-open] {
	display: none !important;
}

.family-seal {
	background: #050505;
	border: 1px solid rgba(215, 155, 40, .5);
	border-radius: 28px;
	box-shadow: 0 16px 34px rgba(42, 26, 8, .18);
	display: block;
	height: 152px;
	object-fit: cover;
	object-position: center;
	width: 152px;
}

.family-seal-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
	position: relative;
	z-index: 1;
}

.tree-image {
	border-radius: 16px;
	filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .2));
	height: 100%;
	max-height: min(84vh, 930px);
	object-fit: contain;
	pointer-events: none;
	position: relative;
	user-select: none;
	width: 100%;
	-webkit-user-drag: none;
}

.tree-note {
	background: rgba(255, 247, 223, .88);
	border: 1px solid rgba(91, 53, 24, .15);
	border-radius: 999px;
	color: var(--brown);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0;
	max-width: 100%;
	overflow: hidden;
	padding: 7px 14px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bio-card {
	direction: rtl;
	padding: 38px 42px 38px;
}

.bismillah {
	color: #201407;
	font-size: 26px;
	font-weight: 900;
	margin-bottom: 8px;
	position: relative;
	text-align: center;
	z-index: 1;
}

.eyebrow {
	color: var(--gold-dark);
	font-size: 20px;
	font-weight: 900;
	margin: 0 0 8px;
	position: relative;
	text-align: center;
	z-index: 1;
}

.bio-card h1 {
	color: var(--red-dark);
	font-size: 48px;
	line-height: 1.16;
	margin: 0 0 22px;
	position: relative;
	text-align: center;
	text-shadow: 0 2px 0 #fff;
	z-index: 1;
}

.intro {
	color: #33251b;
	font-size: 20px;
	font-weight: 600;
	line-height: 2.05;
	margin: 0;
	position: relative;
	text-align: justify;
	z-index: 1;
}

.stats {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, 1fr);
	margin: 30px 0;
	position: relative;
	z-index: 1;
}

.stat {
	background: linear-gradient(180deg, #fff7df, #f1dfae);
	border: 1px solid rgba(91, 53, 24, .16);
	border-radius: 20px;
	box-shadow: inset 0 1px 0 #fff;
	padding: 18px 10px;
	text-align: center;
}

.stat strong {
	color: var(--green);
	display: block;
	font-size: 31px;
	font-weight: 900;
	line-height: 1;
}

.stat span {
	color: var(--brown);
	display: block;
	font-size: 14px;
	font-weight: 800;
	margin-top: 8px;
}

.quote {
	background: rgba(255, 255, 255, .55);
	border-radius: 18px;
	border-right: 6px solid var(--gold);
	color: #4b3524;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.9;
	margin: 24px 0 0;
	padding: 20px 22px;
	position: relative;
	z-index: 1;
}

.site-footer {
	align-items: center;
	color: #6a553e;
	display: flex;
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	margin: 0 auto 30px;
	text-align: center;
	width: min(1220px, 94vw);
}

.site-footer img {
	background: #050505;
	border-radius: 8px;
	height: 36px;
	object-fit: cover;
	width: 36px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.ticker-track {
		animation: none;
		transform: none;
	}
}

@media (max-width: 980px) {
	.family-hero {
		direction: rtl;
		grid-template-columns: 1fr;
	}

	.tree-card {
		min-height: auto;
	}

	.tree-image {
		max-height: 82vh;
	}

	.bio-card h1 {
		font-size: 38px;
	}

	.bio-card {
		padding: 34px 24px;
	}

	.time-box {
		min-width: 170px;
	}

	.time-box strong {
		font-size: 23px;
	}

	.ticker-item {
		font-size: 18px;
	}

	.stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 620px) {
	.site-newsbar {
		height: 52px;
	}

	.time-box {
		border-left-width: 3px;
		clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
		min-width: 96px;
		padding: 4px 8px;
	}

	.time-box strong {
		font-size: 16px;
	}

	.time-box span {
		font-size: 9px;
		line-height: 1.15;
		margin-top: 3px;
	}

	.ticker-item {
		font-size: 12.5px;
		gap: 6px;
	}

	.ticker-item::before {
		height: 8px;
		width: 8px;
	}

	.ticker-group {
		gap: 14px;
		padding-inline: 10px;
	}

	.family-hero {
		margin-top: 20px;
	}

	.tree-card,
	.bio-card {
		border-radius: 20px;
	}

	.tree-card {
		padding: 7px;
	}

	.tree-note {
		font-size: 11px;
		padding: 5px 10px;
	}

	.family-seal {
		height: 132px;
		width: 132px;
	}

	.stats {
		grid-template-columns: 1fr;
	}

	.bio-card h1 {
		font-size: 31px;
	}

	.intro {
		font-size: 17px;
		line-height: 1.9;
	}

	.bismillah {
		font-size: 22px;
	}
}

@media (max-width: 380px) {
	.time-box {
		min-width: 86px;
		padding-inline: 6px;
	}

	.time-box strong {
		font-size: 14px;
	}

	.time-box span {
		font-size: 8px;
	}

	.ticker-item {
		font-size: 11.5px;
	}
}