/*
 * Jordan Festival — Festival page (single-jf_festival.php only).
 *
 * Upcoming: an ivory opening with the title, the festival photograph and,
 * resting on its lower edge, the navy festival pass (date, time, place,
 * ticket link). Then the description, photographs in justified rows, videos
 * and a short attendance strip.
 * Past: the same opening without the pass: a quiet dateline and the
 * photograph with the year stamped on it, the story, then the memories on
 * navy ("Relive the festival").
 * Ticket details (keffiyeh selvedge, perforation) are used on the pass and
 * the attendance strip only.
 */

/* 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; }

.fd {
	--fd-ivory: #FBF8F2;
	--fd-ivory-line: #EAE3D7;
	--fd-navy-2: #172A54;
	--fd-on-navy: rgba(255, 255, 255, .86);
	--fd-on-navy-soft: #B9C2D6;
	--fd-on-navy-line: rgba(255, 255, 255, .2);
	--fd-section: clamp(72px, 7vw, 112px);
	--fd-edge: 14px;
	--fd-gap: 12px;
}

/* Shared ------------------------------------------------------------- */
.fd-rule { display: inline-block; flex: none; width: 28px; height: 2px; background: var(--jf-red); }

.fd-section-title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--jf-serif);
	font-size: clamp(28px, 2.4vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jf-navy);
}

.fd-kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* Status: a filled diamond for upcoming, an outline for past; always with
   the words, never the mark alone. */
.fd-status {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jf-navy);
}
.fd-status__mark {
	flex: none;
	width: 9px;
	height: 9px;
	border: 2px solid var(--jf-red);
	background: var(--jf-red);
	transform: rotate(45deg);
}
.fd-status--past { color: var(--jf-ink-2); }
.fd-status--past .fd-status__mark { border-color: var(--jf-muted); background: transparent; }

/* "Preview Content": a quiet label (small ring + text) on demo records. */
.fd-sample {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jf-ink-2);
}
.fd-sample::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .75;
}

.fd-tickets { gap: 12px; min-width: 210px; height: 54px; white-space: normal; text-align: center; }
.fd-tickets__icon { flex: none; width: 14px; height: 14px; }
[dir="rtl"] .fd-tickets__icon { transform: scaleX(-1); }

.fd-btn-line {
	gap: 10px;
	border: 2px solid var(--jf-navy);
	background: transparent;
	color: var(--jf-navy);
}
.fd-btn-line:hover { background: var(--jf-navy); color: #fff; }
.fd-btn-line .jf-arrow { color: var(--jf-red); }
.fd-btn-line:hover .jf-arrow { color: #fff; }
.fd-btn-navy { gap: 10px; background: var(--jf-navy); color: #fff; }
.fd-btn-navy:hover { background: var(--jf-red); color: #fff; }

/* On navy grounds the red focus ring is too faint. */
.fd-pass :focus-visible,
.fd-attend--tickets :focus-visible,
.fd--past .fd-media :focus-visible { outline-color: #fff; }

/* Opening ------------------------------------------------------------ */
.fd-open {
	padding: 32px 0 clamp(56px, 5vw, 80px);
	background: var(--fd-ivory);
}
.fd--past.fd--photo .fd-open { padding-bottom: 0; }

.fd-open__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-areas:
		"head lede"
		"photo photo"
		"pass pass";
	column-gap: clamp(40px, 6vw, 112px);
}
.fd-open__head { grid-area: head; min-width: 0; }
.fd-lede { grid-area: lede; }
.fd-open__photo { grid-area: photo; }
.fd-open__poster { grid-area: poster; }
.fd-pass { grid-area: pass; }

.fd-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--jf-ink-2);
}
.fd-back:hover { color: var(--jf-red); }
.fd-back .jf-arrow { color: var(--jf-red); transform: scaleX(-1); }
[dir="rtl"] .fd-back .jf-arrow { transform: none; }

.fd-flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: clamp(28px, 3vw, 44px);
}

.fd-title {
	margin-top: 18px;
	font-family: var(--jf-serif);
	font-size: clamp(40px, 4.3vw, 64px);
	font-weight: 600;
	line-height: 1.08;
	color: var(--jf-navy);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.fd-lede {
	align-self: end;
	max-width: 34em;
	padding-bottom: 6px;
	font-size: 19px;
	line-height: 1.65;
	color: var(--jf-ink-2);
}

/* Past: date and place as a quiet line under the title. */
.fd-dateline {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 0;
	margin-top: 28px;
}
.fd-dateline__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fd-dateline__item + .fd-dateline__item {
	margin-inline-start: 28px;
	padding-inline-start: 28px;
	border-inline-start: 1px solid var(--jf-line);
}
.fd-dateline dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jf-muted);
}
.fd-dateline dd { font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--jf-navy); overflow-wrap: anywhere; }

/* The photograph. */
.fd-open__photo {
	position: relative;
	margin-top: clamp(36px, 4vw, 56px);
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--fd-ivory-line);
}
.fd--past .fd-open__photo { aspect-ratio: 2 / 1; }
.fd-open__photo img { width: 100%; height: 100%; object-fit: cover; }

/* The year, stamped on a past festival's photograph. */
.fd-stamp {
	position: absolute;
	top: clamp(20px, 3vw, 36px);
	inset-inline-end: clamp(20px, 3vw, 36px);
	display: grid;
	place-items: center;
	width: clamp(76px, 7vw, 100px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .92);
	box-shadow: inset 0 0 0 5px rgba(13, 30, 65, .3), inset 0 0 0 6px rgba(255, 255, 255, .78);
	background: rgba(13, 30, 65, .32);
	font-family: var(--jf-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
	transform: rotate(-10deg);
}

/* A poster (no photograph): shown whole beside the title. */
.fd--poster .fd-open__grid {
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	grid-template-areas:
		"head poster"
		"lede poster"
		"pass pass";
}
.fd--poster .fd-lede { align-self: start; margin-top: 28px; }
.fd-open__poster { align-self: start; margin-top: 44px; }
.fd-open__poster img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 560px;
	margin-inline-start: auto;
	box-shadow: 0 24px 48px rgba(13, 30, 65, .18);
}
.fd--poster .fd-pass { margin-top: 48px; }

/* No image at all. */
.fd--no-photo .fd-open__grid {
	grid-template-areas:
		"head lede"
		"pass pass";
}
.fd--no-photo .fd-pass { margin-top: 48px; }
.fd--past.fd--no-photo .fd-open { padding-bottom: clamp(56px, 5vw, 80px); }

/* The festival pass ------------------------------------------------------ */
.fd-pass {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: -72px 40px 0;
	padding-inline-start: var(--fd-edge);
	background: var(--jf-navy);
	color: #fff;
	box-shadow: 0 24px 48px rgba(13, 30, 65, .18);
}
.fd-pass__edge,
.fd-attend__edge {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	width: var(--fd-edge);
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat 0 0 / 14px 14px;
}

.fd-pass__facts {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(0, 1.6fr);
	min-width: 0;
}
.fd-pass:not(:has(.fd-pass__fact:nth-child(3))) .fd-pass__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-pass:not(:has(.fd-pass__fact:nth-child(2))) .fd-pass__facts { grid-template-columns: minmax(0, 1fr); }
.fd-pass__fact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 30px clamp(24px, 2.4vw, 36px);
}
.fd-pass__fact + .fd-pass__fact { border-inline-start: 1px solid var(--fd-on-navy-line); }
.fd-pass__fact dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fd-on-navy-soft);
}
.fd-pass__fact dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }

.fd-pass__when { display: flex; align-items: center; gap: 16px; }
.fd-pass__day {
	font-family: var(--jf-serif);
	font-size: clamp(48px, 4.2vw, 60px);
	font-weight: 600;
	line-height: .9;
	color: #fff;
}
.fd-pass__month { display: flex; flex-direction: column; gap: 4px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.fd-pass__weekday { font-size: 15px; font-weight: 500; color: var(--fd-on-navy-soft); }
.fd-pass__main { font-size: 20px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.fd-pass__sub { font-size: 15px; line-height: 1.5; color: var(--fd-on-navy-soft); overflow-wrap: anywhere; }
.fd-pass__address { margin-top: 2px; }
.fd-pass__map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--jf-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.fd-pass__map:hover { color: var(--fd-on-navy-soft); }
.fd-pass__map .jf-arrow { color: var(--jf-red); }

/* The stub: a perforated tear line, then the ticket link. */
.fd-pass__action {
	display: flex;
	align-items: center;
	padding: 28px clamp(28px, 3vw, 44px);
	border-inline-start: 2px dashed rgba(255, 255, 255, .32);
}

/* About the festival ------------------------------------------------- */
.fd-story { padding: var(--fd-section) 0; background: #fff; }
.fd--past.fd--photo .fd-story { padding-top: calc(var(--fd-section) + 8px); }
.fd-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 32px clamp(40px, 6vw, 112px);
	align-items: start;
}
.fd-story--poster .fd-story__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
.fd-story__title { position: sticky; top: calc(var(--jf-header-h, 80px) + 24px); }

.fd-prose {
	max-width: 40em;
	font-size: 18px;
	line-height: 1.75;
	color: var(--jf-ink-2);
	overflow-wrap: break-word;
}
.fd-prose > * + * { margin-top: 1.1em; }
.fd-prose > :first-child { margin-top: 0; }
.fd-prose > p:first-child { font-size: 1.12em; line-height: 1.65; color: var(--jf-navy); }
.fd-prose h2,
.fd-prose h3,
.fd-prose h4 {
	margin-top: 1.8em;
	font-family: var(--jf-serif);
	font-weight: 600;
	line-height: 1.25;
	color: var(--jf-navy);
}
.fd-prose h2 { font-size: 28px; }
.fd-prose h3 { font-size: 23px; }
.fd-prose h4 { font-size: 19px; }
.fd-prose ul,
.fd-prose ol { padding-inline-start: 1.3em; }
.fd-prose li + li { margin-top: .4em; }
.fd-prose ul li::marker { color: var(--jf-red); }
.fd-prose a {
	color: var(--jf-navy);
	white-space: normal;
	text-decoration: underline;
	text-decoration-color: var(--jf-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.fd-prose a:hover { color: var(--jf-red); }
.fd-prose blockquote {
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--jf-red);
	font-family: var(--jf-serif);
	font-size: 22px;
	line-height: 1.5;
	color: var(--jf-navy);
}
.fd-prose img { height: auto; }
.fd-prose figure,
.fd-prose .wp-caption { max-width: 100%; }
.fd-prose figcaption,
.fd-prose .wp-caption-text { margin-top: 8px; font-size: 14px; color: var(--jf-muted); }
.fd-prose strong { color: var(--jf-navy); }

.fd-poster img { width: 100%; box-shadow: 0 18px 40px rgba(13, 30, 65, .16); }

/* Photographs and videos ------------------------------------------------- */
.fd-media { padding: var(--fd-section) 0; background: var(--fd-ivory); border-top: 1px solid var(--fd-ivory-line); }
.fd--past .fd-media { background: var(--jf-navy); border-top: 0; color: #fff; }
.fd--past .fd-media .fd-section-title { color: #fff; }

.fd-media__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
}
.fd-media__count { font-size: 15px; font-weight: 600; color: var(--fd-on-navy-soft); }
.fd--past .fd-media .fd-section-title { font-size: clamp(32px, 3.2vw, 48px); }

/* Justified rows: in each row the photos share one height and fill the
   width, each at its own proportions (rows chosen in PHP). A row is never
   taller than 560px. */
.fd-photos { display: flex; flex-direction: column; gap: var(--fd-gap); margin-top: 40px; }
.fd--past .fd-photos { margin-top: 48px; }
.fd-photos__row {
	display: flex;
	gap: var(--fd-gap);
	width: 100%;
	max-width: calc(var(--fd-sum) * 560px + (var(--fd-n) - 1) * var(--fd-gap));
	margin-inline: auto;
}
.fd-photo { position: relative; flex: var(--fd-r) 1 0; min-width: 0; aspect-ratio: var(--fd-r); }
.fd-photo__link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--fd-ivory-line);
}
.fd--past .fd-photo__link { background: var(--fd-navy-2); }
.fd-photo__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.fd-photo__link:hover img { transform: scale(1.03); }
.fd-photo__link:focus-visible { outline-offset: 4px; }

/* Photo viewer (assets/js/festival.js) */
.fd-viewer {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(8, 17, 38, .96);
	color: #fff;
}
.fd-viewer::backdrop { background: rgba(8, 17, 38, .96); }
.fd-viewer__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	padding: 72px 96px 32px;
}
.fd-viewer__img {
	max-width: 100%;
	max-height: calc(100% - 48px);
	width: auto;
	height: auto;
	object-fit: contain;
}
.fd-viewer__caption { font-size: 15px; color: var(--fd-on-navy-soft); text-align: center; }
.fd-viewer__count { font-weight: 700; color: #fff; }
.fd-viewer__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.fd-viewer__btn:hover { background: var(--jf-red); border-color: var(--jf-red); }
.fd-viewer__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fd-viewer__btn svg { width: 20px; height: 20px; }
.fd-viewer__close { top: 16px; inset-inline-end: 16px; }
.fd-viewer__prev,
.fd-viewer__next { top: 50%; margin-top: -24px; }
.fd-viewer__prev { inset-inline-start: 24px; }
.fd-viewer__next { inset-inline-end: 24px; }
.fd-viewer__prev svg,
[dir="rtl"] .fd-viewer__next svg { transform: scaleX(-1); }
[dir="rtl"] .fd-viewer__prev svg { transform: none; }
html.fd-viewer-open { overflow: hidden; }

/* Videos */
.fd-photos + .fd-videos { margin-top: clamp(56px, 5vw, 80px); }
.fd-videos__title {
	font-family: var(--jf-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--jf-navy);
}
.fd--past .fd-videos__title { color: #fff; }
.fd-video-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 28px;
}
.fd-media__head + .fd-videos .fd-video-list { margin-top: 40px; }
.fd-video-list--single { grid-template-columns: minmax(0, 960px); }
.fd-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fd-video__frame iframe,
.fd-video__frame video,
.fd-video__frame embed,
.fd-video__frame object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.fd-video__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px;
	border: 1px solid var(--jf-line);
	background: #fff;
	color: var(--jf-navy);
	white-space: normal;
	transition: border-color .2s, background-color .2s;
}
.fd-video__link:hover { color: var(--jf-navy); border-color: var(--jf-navy); }
.fd--past .fd-video__link { border-color: var(--fd-on-navy-line); background: transparent; color: #fff; }
.fd--past .fd-video__link:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: var(--fd-navy-2); }
.fd-video__play {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--jf-red);
}
.fd-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -9px 0 0 -5px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}
.fd-video__text { display: flex; flex-direction: column; gap: 2px; }
.fd-video__cta { font-size: 18px; font-weight: 700; }
.fd-video__host { font-size: 14px; color: var(--jf-muted); }
.fd--past .fd-video__host { color: var(--fd-on-navy-soft); }

/* Attend --------------------------------------------------------------- */
.fd-attend { padding: var(--fd-section) 0; background: #fff; }
.fd-attend__strip {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px clamp(32px, 4vw, 64px);
}
/* With a ticket link: a slim navy ticket. */
.fd-attend--tickets .fd-attend__strip {
	gap: 0;
	padding-inline-start: var(--fd-edge);
	background: var(--jf-navy);
	color: #fff;
}
.fd-attend--tickets .fd-attend__text { padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3.4vw, 56px); }
.fd-attend--tickets .fd-attend__action {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding: 32px clamp(28px, 3.4vw, 56px);
	border-inline-start: 2px dashed rgba(255, 255, 255, .32);
}
.fd-attend .fd-kicker { color: var(--fd-on-navy-soft); }
.fd-attend__title {
	margin-top: 10px;
	font-family: var(--jf-serif);
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.fd-attend__meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 12px; font-size: 17px; color: var(--fd-on-navy); }
.fd-attend__meta > * + *::before { content: "·"; margin-inline: 12px; color: var(--jf-red); }

/* Without one: a quiet line with the way to get in touch. */
.fd-attend:not(.fd-attend--tickets) { padding: clamp(56px, 5vw, 80px) 0; border-top: 1px solid var(--fd-ivory-line); }
.fd-attend:not(.fd-attend--tickets) .fd-attend__edge { display: none; }
.fd-attend:not(.fd-attend--tickets) .fd-attend__title { margin-top: 0; font-size: clamp(26px, 2.2vw, 32px); color: var(--jf-navy); }
.fd-attend__note { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--jf-ink-2); }
.fd-media + .fd-attend:not(.fd-attend--tickets),
.fd-story + .fd-attend:not(.fd-attend--tickets) { background: var(--fd-ivory); }

/* Close -------------------------------------------------------------- */
.fd-next { padding: var(--fd-section) 0; background: var(--fd-ivory); border-top: 1px solid var(--fd-ivory-line); }
.fd-media + .fd-next,
.fd-attend + .fd-next { background: #fff; }
.fd-media + .fd-attend:not(.fd-attend--tickets) + .fd-next,
.fd-story + .fd-attend:not(.fd-attend--tickets) + .fd-next { background: #fff; }
.fd--past .fd-media + .fd-next { border-top: 0; }

.fd-next__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
}
.fd-next__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding-bottom: 2px;
	font-size: 15px;
	font-weight: 700;
	color: var(--jf-navy);
	border-bottom: 2px solid var(--jf-red);
}
.fd-next__all:hover { color: var(--jf-red); }
.fd-next__all .jf-arrow { color: var(--jf-red); }

.fd-others {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px clamp(32px, 4vw, 64px);
	margin-top: 40px;
}
.fd-other {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 24px;
	border-top: 2px solid var(--jf-navy);
}
.fd-other__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fd-other__flags .fd-status { font-size: 12px; letter-spacing: .16em; }
.fd-other__flags .fd-sample { min-height: 22px; }
.fd-other__title {
	margin-top: 16px;
	font-family: var(--jf-serif);
	font-size: clamp(21px, 1.8vw, 26px);
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: break-word;
}
.fd-other__link { color: var(--jf-navy); white-space: normal; }
.fd-other__link::after { content: ""; position: absolute; inset: 0; }
.fd-other__link:focus-visible { outline: none; }
.fd-other:has(.fd-other__link:focus-visible) { outline: 2px solid var(--jf-red); outline-offset: 6px; }
.fd-other:hover .fd-other__link { color: var(--jf-red); }
.fd-other__meta { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--jf-ink-2); }
.fd-other__cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--jf-navy);
}
.fd-other__cue .jf-arrow { color: var(--jf-red); transition: transform .2s ease; }
.fd-other:hover .fd-other__cue .jf-arrow { transform: translateX(4px); }
[dir="rtl"] .fd-other:hover .fd-other__cue .jf-arrow { transform: scaleX(-1) translateX(4px); }

.fd-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 36px;
	margin-top: 36px;
}
.fd-links__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	color: var(--jf-navy);
}
.fd-links__link:hover { color: var(--jf-red); }
.fd-links__link .jf-arrow { color: var(--jf-red); }

/* Arabic ------------------------------------------------------------- */
[dir="rtl"] .fd-title,
[dir="rtl"] .fd-section-title,
[dir="rtl"] .fd-videos__title,
[dir="rtl"] .fd-prose h2,
[dir="rtl"] .fd-prose h3,
[dir="rtl"] .fd-prose h4,
[dir="rtl"] .fd-prose blockquote,
[dir="rtl"] .fd-attend__title,
[dir="rtl"] .fd-other__title { font-family: var(--jf-arabic); font-weight: 700; line-height: 1.4; }
[dir="rtl"] .fd-title { font-size: clamp(38px, 3.9vw, 58px); line-height: 1.3; }
[dir="rtl"] .fd-status,
[dir="rtl"] .fd-kicker,
[dir="rtl"] .fd-pass__fact dt,
[dir="rtl"] .fd-dateline dt { font-size: 15px; letter-spacing: 0; }
[dir="rtl"] .fd-other__flags .fd-status { font-size: 14px; letter-spacing: 0; }
[dir="rtl"] .fd-sample { font-size: 13px; letter-spacing: 0; text-transform: none; }
[dir="rtl"] .fd-back { font-size: 15px; }
[dir="rtl"] .fd-lede { line-height: 1.9; }
[dir="rtl"] .fd-pass__day { font-family: var(--jf-arabic); font-weight: 700; line-height: 1; }
[dir="rtl"] .fd-pass__month { font-size: 19px; }
[dir="rtl"] .fd-pass__weekday,
[dir="rtl"] .fd-pass__sub { font-size: 16px; }
[dir="rtl"] .fd-pass__map { font-size: 15px; text-underline-offset: 7px; }
[dir="rtl"] .fd-dateline dd { font-size: 19px; }
[dir="rtl"] .fd-prose { font-size: 19px; line-height: 1.95; }
[dir="rtl"] .fd-prose > p:first-child { line-height: 1.85; }
[dir="rtl"] .fd-video__play::after { left: auto; right: 50%; margin: -9px -5px 0 0; transform: scaleX(-1); }

/* Narrower desktops -------------------------------------------------- */
@media (max-width: 1180px) {
	.fd-pass { margin-inline: 24px; grid-template-columns: minmax(0, 1fr); }
	.fd-pass__action {
		padding: 20px clamp(24px, 2.4vw, 36px) 28px;
		border-inline-start: 0;
		border-top: 2px dashed rgba(255, 255, 255, .32);
	}
}

/* Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.fd-open__grid,
	.fd--no-photo .fd-open__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"lede"
			"photo"
			"pass";
	}
	.fd--no-photo .fd-open__grid { grid-template-areas: "head" "lede" "pass"; }
	.fd-lede { margin-top: 24px; max-width: 40em; }
	.fd--poster .fd-open__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
		column-gap: 40px;
		grid-template-areas:
			"head poster"
			"lede lede"
			"pass pass";
	}
	.fd--poster .fd-lede { margin-top: 28px; }
	.fd-open__photo { aspect-ratio: 16 / 9; }
	.fd--past .fd-open__photo { aspect-ratio: 16 / 9; }

	.fd-story__grid,
	.fd-story--poster .fd-story__grid { grid-template-columns: minmax(0, 1fr); }
	.fd-story__title { position: static; }
	.fd-story--poster .fd-poster { max-width: 340px; }

	.fd-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.fd-pass__facts,
	.fd-pass:not(:has(.fd-pass__fact:nth-child(3))) .fd-pass__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fd-pass__fact--place { grid-column: 1 / -1; border-top: 1px solid var(--fd-on-navy-line); }
	.fd-pass__fact--place.fd-pass__fact { border-inline-start: 0; }
	.fd-pass__fact--date + .fd-pass__fact--place { grid-column: 2; border-top: 0; border-inline-start: 1px solid var(--fd-on-navy-line); }
	.fd-video-list { grid-template-columns: minmax(0, 1fr); }

	.fd-attend--tickets .fd-attend__strip { grid-template-columns: minmax(0, 1fr); }
	.fd-attend--tickets .fd-attend__action {
		padding-top: 24px;
		border-inline-start: 0;
		border-top: 2px dashed rgba(255, 255, 255, .32);
	}
}

/* Phone -------------------------------------------------------------- */
@media (max-width: 640px) {
	.fd { --fd-section: 64px; --fd-edge: 10px; --fd-gap: 8px; }

	/* Status, title, date, time, place and the ticket link first; the
	   introduction follows the pass. */
	.fd-open { padding-top: 12px; }
	.fd-open__grid,
	.fd--no-photo .fd-open__grid,
	.fd--poster .fd-open__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"photo"
			"pass"
			"lede";
	}
	.fd--no-photo .fd-open__grid { grid-template-areas: "head" "pass" "lede"; }
	.fd--poster .fd-open__grid { grid-template-areas: "head" "poster" "pass" "lede"; }
	.fd--past .fd-open__grid { grid-template-areas: "head" "lede" "photo"; }
	.fd-flags { margin-top: 16px; }
	.fd-title { margin-top: 12px; font-size: clamp(32px, 9vw, 40px); line-height: 1.1; }
	[dir="rtl"] .fd-title { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.35; }
	.fd-lede { margin-top: 28px; font-size: 17px; }
	.fd--past .fd-lede { margin-top: 20px; }
	.fd-dateline { margin-top: 20px; flex-direction: column; }
	.fd-dateline__item + .fd-dateline__item { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
	.fd-dateline dd { font-size: 17px; }

	.fd-open__photo,
	.fd--past .fd-open__photo {
		margin: 24px calc(-1 * var(--jf-gutter)) 0;
		aspect-ratio: 16 / 9;
	}
	.fd--past .fd-open__photo { margin-top: 28px; aspect-ratio: 4 / 3; }
	.fd-stamp { width: 64px; font-size: 17px; top: 14px; inset-inline-end: 14px; }
	.fd-open__poster { margin-top: 24px; }
	.fd-open__poster img { max-height: 420px; margin-inline: 0; }
	.fd--poster .fd-pass,
	.fd--no-photo .fd-pass { margin-top: 24px; }

	.fd-pass { margin: -28px 0 0; box-shadow: 0 16px 32px rgba(13, 30, 65, .16); }
	.fd-pass__fact { gap: 8px; padding: 18px 18px; }
	.fd-pass__day { font-size: 44px; }
	.fd-pass__when { gap: 12px; }
	.fd-pass__month { font-size: 16px; }
	.fd-pass__weekday { font-size: 14px; }
	.fd-pass__main { font-size: 17px; }
	.fd-pass__sub { font-size: 14px; }
	.fd-pass__fact--date + .fd-pass__fact--place { grid-column: 1 / -1; border-top: 1px solid var(--fd-on-navy-line); border-inline-start: 0; }
	.fd-pass__action { padding: 18px; }
	.fd-tickets { display: flex; width: 100%; }

	.fd-section-title { gap: 12px; font-size: 26px; }
	.fd--past .fd-media .fd-section-title { font-size: 30px; }
	.fd-prose { font-size: 17px; }
	[dir="rtl"] .fd-prose { font-size: 18px; }
	.fd-prose h2 { font-size: 24px; }
	.fd-prose h3 { font-size: 21px; }

	/* Photographs as a reel that scrolls sideways, edge to edge. */
	.fd-photos--many {
		flex-direction: row;
		gap: var(--fd-gap);
		margin: 28px calc(-1 * var(--jf-gutter)) 0;
		padding: 0 var(--jf-gutter) 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--jf-gutter);
		scrollbar-width: thin;
	}
	.fd-photos--many .fd-photos__row { display: contents; }
	.fd-photos--many .fd-photo {
		flex: none;
		height: 280px;
		max-width: 82vw;
		scroll-snap-align: start;
	}
	.fd-photos--one { margin-top: 28px; }
	.fd-photos--one .fd-photos__row { max-width: none; }

	.fd-viewer__figure { padding: 64px 12px 88px; }
	.fd-viewer__prev,
	.fd-viewer__next { top: auto; bottom: 20px; margin-top: 0; }
	.fd-viewer__prev { inset-inline-start: calc(50% - 64px); }
	.fd-viewer__next { inset-inline-end: calc(50% - 64px); }

	.fd-video-list { gap: 20px; margin-top: 20px; }
	.fd-video__link { padding: 20px; }

	.fd-attend--tickets .fd-attend__text { padding: 28px 22px 24px; }
	.fd-attend--tickets .fd-attend__action { padding: 20px 22px 24px; }
	.fd-attend__title { font-size: 26px; }
	.fd-attend__meta { font-size: 16px; }
	.fd-attend:not(.fd-attend--tickets) .fd-attend__strip { grid-template-columns: minmax(0, 1fr); }
	.fd-attend:not(.fd-attend--tickets) .fd-btn-line { display: flex; width: 100%; }

	.fd-others { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; }
	.fd-links { flex-direction: column; align-items: stretch; gap: 8px; }
	.fd-btn-navy { display: flex; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fd-photo__link img,
	.fd-other__cue .jf-arrow { transition: none; }
	.fd-photo__link:hover img,
	.fd-other:hover .fd-other__cue .jf-arrow { transform: none; }
	[dir="rtl"] .fd-other:hover .fd-other__cue .jf-arrow { transform: scaleX(-1); }
}