/* Page hero: lapis night, girih lattice, a photo seen through the gold star window */
.ei.pagehero { position: relative; overflow: hidden; isolation: isolate; color: var(--ei-light);
	padding: calc(var(--ei-hdr) + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 104px);
	background: radial-gradient(60% 80% at 78% 50%, #1b2a66 0%, var(--ei-lapis) 48%, var(--ei-lapis-2) 100%); }
.ei .ph__pattern { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ei-gold); opacity: .14; z-index: -1;
	-webkit-mask: radial-gradient(55% 75% at 78% 50%, #000 25%, transparent 78%); mask: radial-gradient(55% 75% at 78% 50%, #000 25%, transparent 78%); }
.ei .ph__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(24% 34% at 78% 50%, rgba(240, 196, 106, .2), transparent 70%); }

.ei .ph__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ei.pagehero--text .ph__in { grid-template-columns: minmax(0, 1fr); }
.ei .ph__copy { max-width: 720px; }

.ei .ph__crumbs { font-size: 14px; color: var(--ei-light-2); margin-bottom: 28px; }
.ei .ph__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ei .ph__crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.ei .ph__crumbs li + li::before { content: ""; width: 6px; height: 6px; background: var(--ei-gold); transform: rotate(45deg); flex: none; }
.ei .ph__crumbs a { text-decoration: none; }
.ei .ph__crumbs a:hover { color: var(--ei-gold-2); }
.ei .ph__crumbs [aria-current] { color: var(--ei-light); }

.ei .ph__title { font: 400 clamp(44px, 6.2vw, 92px)/1 var(--ei-display); letter-spacing: -0.015em; text-wrap: balance; text-shadow: 0 4px 40px rgba(5, 10, 30, .5); }
.ei .ph__copy .lead { color: #d0d5e8; font-size: 18px; margin-top: 22px; max-width: 48ch; }
.ei .ph__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* The star window: photo clipped to the Rub el Hizb, gold outline and seal ring drawn over it */
.ei .ph__window { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: end; }
.ei .ph__photo { position: absolute; inset: 8.333%;
	clip-path: polygon(50% 0, 64.645% 14.645%, 85.355% 14.645%, 85.355% 35.355%, 100% 50%, 85.355% 64.645%, 85.355% 85.355%, 64.645% 85.355%, 50% 100%, 35.355% 85.355%, 14.645% 85.355%, 14.645% 64.645%, 0 50%, 14.645% 35.355%, 14.645% 14.645%, 35.355% 14.645%); }
.ei .ph__photo img { width: 100%; height: 100%; object-fit: cover; }
.ei .ph__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ei .ph__outline { fill: none; stroke: var(--ei-gold-2); stroke-width: .014; }
.ei .ph__ring { fill: none; stroke: rgba(240, 196, 106, .5); stroke-width: .005; }
.ei .ph__ring--in { stroke: rgba(240, 196, 106, .22); stroke-dasharray: .02 .03; }

@media (max-width: 1020px) {
	.ei .ph__in { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; }
}
@media (max-width: 720px) {
	.ei.pagehero { padding: calc(var(--ei-hdr) + 28px) 0 56px;
		background: radial-gradient(90% 60% at 80% 20%, #1b2a66 0%, var(--ei-lapis) 50%, var(--ei-lapis-2) 100%); }
	.ei .ph__pattern { -webkit-mask: radial-gradient(70% 50% at 80% 20%, #000 25%, transparent 80%); mask: radial-gradient(70% 50% at 80% 20%, #000 25%, transparent 80%); }
	.ei .ph__in { grid-template-columns: minmax(0, 1fr); gap: 0; }
	/* small star tucked to the top right, beside the breadcrumb and kicker */
	.ei .ph__window { grid-row: 1; width: 132px; justify-self: end; margin: -8px -6px -96px 0; z-index: 0; }
	.ei .ph__copy { position: relative; z-index: 1; }
	.ei .ph__crumbs { margin-bottom: 20px; padding-right: 136px; }
	.ei.pagehero--text .ph__crumbs { padding-right: 0; }
	.ei .ph__copy .kicker { padding-right: 136px; }
	.ei.pagehero--text .ph__copy .kicker { padding-right: 0; }
	.ei .ph__title { font-size: clamp(38px, 11vw, 52px); margin-top: 28px; }
	.ei.pagehero--text .ph__title { margin-top: 0; }
	.ei .ph__copy .lead { font-size: 16px; margin-top: 16px; }
	.ei .ph__cta { margin-top: 24px; }
	.ei .ph__cta .btn { flex: 1 1 auto; }
}