/*
 * Jordan Festival — About page (template-about.php only).
 * The site's language (ivory, white and navy grounds, the display serif for
 * English headlines and Tajawal for Arabic, red as the accent) told as one
 * editorial story: opening → story → the Jordan–America letter → the four
 * threads as a photo mosaic → one full-width moment → a quiet close.
 * Geometry is kept to two details: the airmail border and postmark of the
 * letter, and a keffiyeh selvedge on the opening photo.
 */

/* Display serif (SIL OFL, self-hosted), as on the homepage. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-600-0000.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; }

.about-page {
	--ab-ivory: #FBF8F2;
	--ab-ivory-line: #EAE3D7;
	--ab-paper: #FFFCF6;
	--ab-on-dark: rgba(246, 242, 235, .84);
	--ab-on-dark-soft: rgba(246, 242, 235, .64);
	/* How far a photo reaches past the container to the viewport edge. */
	--ab-bleed: calc((min(100vw, 1280px) - 100vw) / 2 - var(--jf-gutter));
	/* How far the opening photo hangs into the story section. */
	--ab-hang: clamp(96px, 9vw, 136px);
	--ab-serif: var(--jf-serif);
}
[dir="rtl"] .about-page { --ab-serif: var(--jf-arabic); }

/* Shared ------------------------------------------------------------- */
.ab-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jf-navy);
}
.ab-rule { flex: none; width: 28px; height: 2px; background: var(--jf-red); }
.ab-kicker--light { color: #fff; }
[dir="rtl"] .ab-kicker { font-size: 16px; }

.ab-photo { position: relative; margin: 0; }
.ab-photo__frame { position: relative; overflow: hidden; background: #DDD2C1; }
.ab-photo__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-photo__caption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--jf-muted);
}
.ab-photo__caption .diamond { width: 6px; height: 6px; }
.ab-photo__caption--light { color: var(--ab-on-dark-soft); }
[dir="rtl"] .ab-photo__caption { font-size: 14px; }

/* 1. Opening --------------------------------------------------------- */
/* Who we are, on ivory, beside a portrait that hangs into the story. */
.ab-open {
	position: relative;
	padding: clamp(64px, 6vw, 96px) 0 0;
	background: var(--ab-ivory);
}
.ab-open__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	align-items: end;
}
.ab-open__copy { grid-column: 1 / span 7; padding-bottom: calc(var(--ab-hang) + 8px); }
.ab-open__title {
	margin-top: 28px;
	max-width: 12em;
	font-family: var(--ab-serif);
	font-size: clamp(40px, 4.4vw, 66px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--jf-navy);
	text-wrap: balance;
}
.ab-open__intro {
	margin-top: 28px;
	max-width: 34em;
	font-size: 19px;
	line-height: 1.7;
	color: var(--jf-ink-2);
	text-wrap: pretty;
}
[dir="rtl"] .ab-open__title { font-size: clamp(38px, 4vw, 60px); font-weight: 700; line-height: 1.3; max-width: 13em; }
[dir="rtl"] .ab-open__intro { font-size: 20px; line-height: 1.9; }

.ab-open__photo {
	grid-column: 9 / span 4;
	z-index: 2;
	margin-bottom: calc(-1 * var(--ab-hang));
	padding-inline-start: 14px;
}
/* A keffiyeh selvedge runs down the photo's inner edge. */
.ab-open__photo::before {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 28px;
	inset-inline-start: 0;
	width: 14px;
	background: url("../images/brand/keffiyeh-selvedge.svg") 0 0 / 14px 14px repeat-y;
}
.ab-open__photo .ab-photo__frame { aspect-ratio: 4 / 5; }
.ab-open__photo .ab-photo__frame img { object-position: 40% 50%; }

/* 2. Our story ------------------------------------------------------- */
/* A large photo and the story beside it, held together in the container
   (7 + 5 columns). The copy column starts below the opening photo, which
   hangs over this section. */
.ab-story { padding: 0 0 clamp(88px, 8vw, 128px); background: #fff; overflow: clip; }
.ab-story__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	align-items: start;
}
.ab-story__photo {
	grid-column: 1 / span 7;
	grid-row: 1;
	margin-top: clamp(56px, 5vw, 80px);
}
.ab-story__photo .ab-photo__frame { aspect-ratio: 4 / 5; max-height: 760px; }
.ab-story__photo .ab-photo__frame img { object-position: 50% 45%; }
.ab-story__copy {
	grid-column: 8 / span 5;
	grid-row: 1;
	padding-top: calc(var(--ab-hang) + clamp(64px, 6vw, 96px));
	padding-inline-start: clamp(8px, 2vw, 32px);
}
.ab-story__title {
	margin-top: 22px;
	font-family: var(--ab-serif);
	font-size: clamp(30px, 2.8vw, 42px);
	font-weight: 600;
	line-height: 1.18;
	color: var(--jf-navy);
	text-wrap: balance;
}
[dir="rtl"] .ab-story__title { font-weight: 700; line-height: 1.4; }
.ab-story__body { margin-top: 32px; font-size: 18px; line-height: 1.8; }
.ab-story__body > p:first-child { font-size: 21px; line-height: 1.65; color: var(--jf-navy); }
[dir="rtl"] .ab-story__body { font-size: 19px; line-height: 2; }
[dir="rtl"] .ab-story__body > p:first-child { font-size: 22px; line-height: 1.9; }

/* 3. From Jordan to America ------------------------------------------ */
/* Navy. The idea told as a letter: airmail border, a stamp of Jordan and
   a postmark "from Jordan to America"; under it, three steps on a route. */
.ab-bridge {
	padding: clamp(88px, 8vw, 120px) 0 clamp(80px, 7vw, 104px);
	background: var(--jf-navy);
	color: #fff;
	overflow: clip;
}
.ab-bridge :focus-visible { outline-color: #fff; }
.ab-bridge__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	align-items: center;
}
.ab-bridge__copy { grid-column: 1 / span 6; }
.ab-bridge__title {
	margin-top: 22px;
	font-family: var(--ab-serif);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 600;
	line-height: 1.16;
	color: #fff;
	text-wrap: balance;
}
.ab-bridge__text {
	margin-top: 24px;
	max-width: 34em;
	font-size: 18px;
	line-height: 1.75;
	color: var(--ab-on-dark);
	text-wrap: pretty;
}
[dir="rtl"] .ab-bridge__title { font-weight: 700; line-height: 1.4; }
[dir="rtl"] .ab-bridge__text { font-size: 19px; line-height: 1.95; }

/* The letter. */
.ab-letter { grid-column: 8 / span 5; margin: 0; }
.ab-letter__paper {
	position: relative;
	aspect-ratio: 3 / 2;
	padding: 11px;
	background: repeating-linear-gradient(-45deg, var(--jf-red) 0 16px, var(--ab-paper) 16px 26px, #5B7CC0 26px 42px, var(--ab-paper) 42px 52px);
	transform: rotate(-2deg);
	box-shadow: 0 26px 48px rgba(0, 0, 0, .32);
}
[dir="rtl"] .ab-letter__paper { transform: rotate(2deg); }
.ab-letter__paper::before {
	content: "";
	position: absolute;
	inset: 11px;
	background: var(--ab-paper);
}
.ab-letter__lines {
	position: absolute;
	inset-inline-start: 11%;
	bottom: 15%;
	width: 52%;
	display: grid;
	gap: 14px;
	font-family: var(--ab-serif);
	font-size: clamp(18px, 1.7vw, 24px);
	font-style: italic;
	color: var(--jf-navy);
}
.ab-letter__lines span { padding: 0 2px 6px; border-bottom: 1px solid #CDBFA9; }
[dir="rtl"] .ab-letter__lines { font-style: normal; font-weight: 700; }
.ab-stamp {
	--r: 5px;
	position: absolute;
	top: 13%;
	inset-inline-end: 9%;
	width: 30%;
	padding: calc(2 * var(--r));
	background: #fff;
	transform: rotate(3deg);
	filter: drop-shadow(0 4px 6px rgba(13, 30, 65, .2));
	-webkit-mask:
		radial-gradient(var(--r), #0000 98%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
		linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
	mask:
		radial-gradient(var(--r), #0000 98%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
		linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
.ab-stamp img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
/* The postmark sits over the stamp's inner corner, its cancel lines
   running across the paper. */
.ab-postmark {
	position: absolute;
	top: 5%;
	inset-inline-end: 29%;
	width: 46%;
	height: auto;
	color: var(--jf-red);
	opacity: .78;
	transform: rotate(-8deg);
	pointer-events: none;
	/* The ring reads from its own start point in either language. */
	direction: ltr;
}
[dir="rtl"] .ab-postmark { transform: scaleX(-1) rotate(-8deg); }
[dir="rtl"] .ab-postmark__ring { transform: scaleX(-1); transform-origin: 66px 66px; }
.ab-postmark__ring {
	font-family: var(--jf-font);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	fill: currentColor;
}
/* Arabic letters must stay joined: no stretching or tracking on the ring. */
[dir="rtl"] .ab-postmark__ring { font-family: var(--jf-arabic); font-size: 14.5px; letter-spacing: 0; }
.ab-letter .ab-photo__caption { margin-top: 22px; justify-content: flex-end; }

/* The route: three steps joined by an airmail-dashed line. */
.ab-route {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 32px;
	margin: clamp(64px, 6vw, 88px) 0 0;
	padding: 0;
	list-style: none;
}
.ab-route__step { position: relative; padding-top: 34px; padding-inline-end: 24px; }
.ab-route__step::before {
	content: "";
	position: absolute;
	top: 7px;
	inset-inline: 0 -32px;
	border-top: 2px dashed rgba(246, 242, 235, .32);
}
.ab-route__step:last-child::before { inset-inline-end: 0; }
.ab-route__node {
	position: absolute;
	top: 1px;
	inset-inline-start: 0;
	width: 14px;
	height: 14px;
	background: var(--jf-red);
	transform: rotate(45deg);
	box-shadow: 0 0 0 5px var(--jf-navy);
}
.ab-route__title {
	font-family: var(--ab-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}
.ab-route__text { margin-top: 10px; max-width: 24em; font-size: 16px; line-height: 1.7; color: var(--ab-on-dark-soft); }
[dir="rtl"] .ab-route__title { font-weight: 700; }
[dir="rtl"] .ab-route__text { font-size: 17px; line-height: 1.9; }

/* 4. What we celebrate ----------------------------------------------- */
/* One mosaic: the heading and gastronomy (portrait) in the narrower
   column, culture large beside them, arts and community below it. */
.ab-cel { padding: clamp(88px, 8vw, 128px) 0; background: var(--ab-ivory); }
.ab-cel__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
	grid-template-areas:
		"head   cult cult"
		"gastro cult cult"
		"gastro arts comm";
	column-gap: 32px;
	row-gap: 48px;
	align-items: start;
}
.ab-cel__head { grid-area: head; padding-inline-end: 24px; }
.ab-cel__title {
	margin-top: 22px;
	font-family: var(--ab-serif);
	font-size: clamp(32px, 3.2vw, 48px);
	font-weight: 600;
	line-height: 1.12;
	color: var(--jf-navy);
	text-wrap: balance;
}
.ab-cel__intro { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--jf-ink-2); text-wrap: pretty; }
[dir="rtl"] .ab-cel__title { font-weight: 700; line-height: 1.35; }
[dir="rtl"] .ab-cel__intro { font-size: 19px; line-height: 1.95; }

.ab-thread--culture { grid-area: cult; }
.ab-thread--gastronomy { grid-area: gastro; }
.ab-thread--arts { grid-area: arts; }
.ab-thread--community { grid-area: comm; }
.ab-thread__photo .ab-photo__frame { aspect-ratio: 4 / 3; }
.ab-thread--culture .ab-photo__frame { aspect-ratio: 3 / 2; }
.ab-thread--gastronomy .ab-photo__frame { aspect-ratio: 4 / 5; }
.ab-thread__copy {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	align-items: baseline;
	margin-top: 22px;
}
.ab-thread__num {
	grid-row: 1;
	font-family: var(--jf-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--jf-red);
}
.ab-thread__name {
	grid-row: 1;
	font-family: var(--ab-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--jf-navy);
}
.ab-thread__text { grid-column: 2; margin-top: 8px; max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--jf-ink-2); }
.ab-thread--culture .ab-thread__name { font-size: 30px; }
[dir="rtl"] .ab-thread__name { font-weight: 700; line-height: 1.35; }
[dir="rtl"] .ab-thread__text { font-size: 17px; line-height: 1.9; }
.ab-thread .ab-photo__caption { margin-top: 10px; font-size: 12px; }
[dir="rtl"] .ab-thread .ab-photo__caption { font-size: 13px; }

/* 5. The spirit of Jordan -------------------------------------------- */
/* One full-width photo; the statement over its darkened start side. */
.ab-spirit {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 46vw, 760px);
	padding: 96px 0;
	background: var(--jf-navy);
	color: #fff;
	overflow: hidden;
}
.ab-spirit__photo { position: absolute; inset: 0; }
.ab-spirit__photo .ab-photo__frame { position: absolute; inset: 0; background: var(--jf-navy); }
.ab-spirit__photo .ab-photo__frame img { object-position: 60% 50%; }
.ab-spirit__photo .ab-photo__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(13, 30, 65, .9) 0%, rgba(13, 30, 65, .72) 38%, rgba(13, 30, 65, .12) 72%, rgba(13, 30, 65, 0) 100%);
}
[dir="rtl"] .ab-spirit__photo .ab-photo__frame::after { transform: scaleX(-1); }
[dir="rtl"] .ab-spirit__photo .ab-photo__frame img { object-position: 40% 50%; }
.ab-spirit__photo .ab-photo__caption {
	position: absolute;
	bottom: 20px;
	inset-inline-end: var(--jf-gutter);
	margin: 0;
	color: rgba(255, 255, 255, .8);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.ab-spirit__inner { position: relative; width: 100%; }
.ab-spirit__copy { max-width: 560px; }
.ab-spirit__title {
	margin-top: 24px;
	font-family: var(--ab-serif);
	font-size: clamp(36px, 3.8vw, 58px);
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}
.ab-spirit__text { margin-top: 24px; max-width: 30em; font-size: 19px; line-height: 1.7; color: var(--ab-on-dark); text-wrap: pretty; }
[dir="rtl"] .ab-spirit__title { font-weight: 700; line-height: 1.35; }
[dir="rtl"] .ab-spirit__text { font-size: 20px; line-height: 1.9; }

/* 6. Close ----------------------------------------------------------- */
/* A short line and two ways on, on white, leading into the footer. */
.ab-close { padding: clamp(72px, 6vw, 96px) 0; background: #fff; }
.ab-close__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	align-items: end;
}
.ab-close__copy { grid-column: 1 / span 7; }
.ab-close__title {
	font-family: var(--ab-serif);
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jf-navy);
}
.ab-close__text { margin-top: 14px; max-width: 32em; font-size: 18px; line-height: 1.7; color: var(--jf-ink-2); }
[dir="rtl"] .ab-close__title { font-weight: 700; line-height: 1.4; }
[dir="rtl"] .ab-close__text { font-size: 19px; line-height: 1.9; }
.ab-close__actions {
	grid-column: 8 / span 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px 32px;
}
[dir="rtl"] .ab-close__actions .btn { font-size: 16px; }
.ab-close__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--jf-navy);
	border-bottom: 2px solid var(--jf-red);
}
.ab-close__link:hover { color: var(--jf-red); }
[dir="rtl"] .ab-close__link { font-size: 17px; }

/* Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.about-page { --ab-hang: 88px; }
	.ab-open__copy { grid-column: 1 / span 7; }
	.ab-open__photo { grid-column: 8 / span 5; }

	.ab-story__photo { grid-column: 1 / span 6; margin-inline-start: var(--ab-bleed); }
	.ab-story__photo .ab-photo__caption { padding-inline-start: calc(-1 * var(--ab-bleed)); }
	.ab-story__copy { grid-column: 7 / span 6; padding-inline-start: 0; }

	.ab-bridge__copy { grid-column: 1 / -1; }
	.ab-letter { grid-column: 2 / span 10; margin-top: 64px; }
	.ab-letter__paper { max-width: 560px; margin-inline: auto; }
	.ab-letter .ab-photo__caption { justify-content: center; }

	.ab-cel__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"head   head"
			"cult   cult"
			"gastro arts"
			"gastro comm";
	}
	.ab-cel__head { max-width: 640px; padding: 0; }

	.ab-close__copy { grid-column: 1 / -1; }
	.ab-close__actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 32px; }
}

/* Phone -------------------------------------------------------------- */
@media (max-width: 760px) {
	.about-page { --ab-hang: 0px; }

	.ab-open { padding-top: 48px; }
	.ab-open__grid { display: block; }
	.ab-open__copy { padding-bottom: 40px; }
	.ab-open__intro { font-size: 18px; }
	.ab-open__photo { width: 82%; margin: 0 0 -56px auto; margin-inline: auto 0; }
	.ab-open__photo .ab-photo__caption { display: none; }

	.ab-story { padding-top: 0; }
	.ab-story__grid { display: block; }
	.ab-story__photo { width: 78%; margin: 88px 0 0; margin-inline-start: calc(-1 * var(--jf-gutter)); }
	.ab-story__photo .ab-photo__caption { padding-inline-start: var(--jf-gutter); }
	.ab-story__copy { padding-top: 48px; }
	.ab-story__body > p:first-child { font-size: 19px; }

	/* Twelve columns' gaps alone outgrow a phone: stack these grids. */
	.ab-bridge__grid, .ab-close__grid { display: block; }
	.ab-letter { margin-top: 48px; }
	.ab-letter__lines { gap: 10px; inset-inline-start: 9%; bottom: 13%; width: 56%; font-size: 16px; }
	.ab-letter__lines span { padding-bottom: 4px; }
	.ab-stamp { --r: 4px; }

	.ab-route { grid-template-columns: 1fr; row-gap: 32px; }
	.ab-route__step { padding: 0; padding-inline-start: 40px; }
	.ab-route__step::before { top: 8px; bottom: -40px; inset-inline: 6px auto; border-top: 0; border-inline-start: 2px dashed rgba(246, 242, 235, .32); }
	.ab-route__step:last-child::before { display: none; }
	.ab-route__node { top: 6px; }
	.ab-route__title { font-size: 23px; }

	.ab-cel__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "cult" "gastro" "arts" "comm";
		row-gap: 44px;
	}
	.ab-thread--gastronomy .ab-photo__frame { aspect-ratio: 4 / 3; }
	.ab-thread--gastronomy .ab-photo__frame img { object-position: 50% 30%; }
	.ab-thread__name, .ab-thread--culture .ab-thread__name { font-size: 24px; }

	.ab-spirit { flex-direction: column; align-items: stretch; min-height: 0; padding: 0; }
	.ab-spirit__photo { position: relative; inset: auto; }
	.ab-spirit__photo .ab-photo__frame { position: relative; inset: auto; aspect-ratio: 4 / 3; }
	.ab-spirit__photo .ab-photo__frame::after { background: linear-gradient(180deg, rgba(13, 30, 65, 0) 55%, var(--jf-navy) 100%); transform: none; }
	.ab-spirit__photo .ab-photo__caption { bottom: 14px; inset-inline-end: var(--jf-gutter); font-size: 12px; }
	.ab-spirit__inner { padding-top: 32px; padding-bottom: 72px; }
	.ab-spirit__title { margin-top: 18px; }
	.ab-spirit__text { font-size: 18px; }
	[dir="rtl"] .ab-spirit__photo .ab-photo__frame::after { transform: none; }

	.ab-close__actions { flex-direction: column; align-items: flex-start; }
}

/* Phones: the story photo spans the content width, centred the same way in
   both languages, cropped wider so the dancers stay the focus. */
@media (max-width: 640px) {
	.ab-story__photo { width: 100%; margin: 88px 0 0; transform: none; }
	.ab-story__photo .ab-photo__frame { aspect-ratio: 1 / 1; max-height: none; }
	.ab-story__photo .ab-photo__frame img { object-position: 50% 82%; }
	.ab-story__photo .ab-photo__caption { padding-inline-start: 0; }
}

@media (max-width: 420px) {
	.ab-letter { margin-inline: -4px; }
	.ab-letter__lines { font-size: 14px; gap: 6px; }
	.ab-postmark { width: 54%; inset-inline-end: 24%; }
}