/**
 * Our story — only what the About page adds to the product page's design.
 *
 * The heading component (faint word, amber eyebrow, serif title), the
 * olive block, the process row, the cream cards and the section rhythm all
 * come from zuriyat-product/pdp.css, loaded with this file. Here: the same
 * tokens on this page's body, the hero, the shelves and foods under
 * "Beyond olive", and the journey rail.
 */

body.zf-about-page {
	--zf-f: #2a491d;
	--zf-f-deep: #1c2e15;
	--zf-g: #d4af37;
	--zf-g-deep: #8a6a0f;
	--zf-amber: #ffbf00;
	--zf-cream: #f6f4ee;
	--zf-ivory: #fbf8f1;
	--zf-ink: #22301c;
	--zf-body: #3f4039;
	--zf-rule: #ece7da;
	--zf-serif: "Fraunces", "Noto Nastaliq Urdu", Georgia, "Times New Roman", serif;
	background: #ffffff;
}

/* Every section on the page's one rhythm. */
.zf-about > section {
	padding: var(--zf-sec, 76px) 0 !important;
}

/* The product page closes up a white section that follows the process row;
   here the philosophy follows it on its own ground, so it keeps its space. */
.zf-about > section.zf-about-philosophy {
	padding-top: var(--zf-sec, 76px) !important;
}

/* The research, the page's centre, with more room around it. */
.zf-about > section.zf-pdp-olive {
	padding: clamp(80px, 3rem + 5vw, 140px) 0 !important;
}

/* The header floats over the page from 1301px: the hero's own ground runs
   up behind it, and its words start below it. */
@media (min-width: 1301px) {
	body.zf-about-page .zf-about > section.zf-about-hero {
		padding-top: calc(var(--zf-sec, 76px) + 124px) !important;
	}

	body.admin-bar.zf-about-page .zf-about > section.zf-about-hero {
		padding-top: calc(var(--zf-sec, 76px) + 156px) !important;
	}
}

.zf-about .zf-about-eyebrow,
.zf-about .zf-pdp-olive .zf-pdp-eyebrow {
	font-size: 18px;
	letter-spacing: 0.18em;
	color: var(--zf-amber);
}

/* ---- 1. the belief ----------------------------------------------------- */

.zf-about-hero {
	background: var(--zf-ivory);
}

.zf-about-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.zf-about .zf-about-hero__title {
	margin: 0 0 20px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(2.4rem, 1.5rem + 2.8vw, 4rem) !important;
	font-weight: 400 !important;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--zf-ink);
	text-wrap: balance;
}

.zf-about-hero__lead {
	max-width: 54ch;
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--zf-body);
}

.zf-about .zf-about-hero__since {
	margin: 0 0 28px;
	font-family: var(--zf-serif) !important;
	font-size: 18px;
	font-style: italic;
	color: var(--zf-g-deep);
}

.zf-about-facts {
	display: grid;
	margin: 0;
	max-width: 560px;
	border-top: 1px solid var(--zf-rule);
}

.zf-about-facts__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--zf-rule);
}

.zf-about-facts dt {
	margin: 0;
	padding-top: 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zf-g-deep);
}

.zf-about-facts dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--zf-ink);
}

.zf-about-hero__media {
	position: relative;
	padding: 0 0 48px 48px;
}

.zf-about-hero__img {
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--zf-cream);
}

.zf-about-hero__img img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.zf-about-hero__img--2 {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42%;
	border: 6px solid #ffffff;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(28, 46, 21, 0.14);
}

.zf-about-hero__img--2 img {
	aspect-ratio: 1 / 1;
}

/* ---- 1b. the people behind the story (2026-09-22) ------------------------

   Family, Hakeem Muhammad Sadiq and the transition to the research: the
   site's heading component and prose, no new treatment.
   Hakeem Muhammad Sadiq is a person, not an exhibit: words alone, or a
   real photograph of him when one is given. */

.zf-about .zf-about-family,
.zf-about .zf-about-transition {
	background: #ffffff;
}

.zf-about .zf-about-sadiq {
	background: var(--zf-ivory);
}

.zf-about-prose p {
	margin: 0 0 16px;
	max-width: 64ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--zf-body);
}

.zf-about-prose p:last-child {
	margin-bottom: 0;
}

/* Two paragraphs side by side on a wide screen. */
.zf-about-prose--two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(28px, 4vw, 64px);
}

.zf-about-prose--two p {
	margin: 0 0 16px;
}

.zf-about-person__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.zf-about-person .zf-pdp-head--range {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 22px;
}

.zf-about-person .zf-about-facts {
	margin-top: 28px;
}

/* Words alone until a real photograph of him is given: one readable column. */
.zf-about-person__grid.is-words-only {
	grid-template-columns: minmax(0, 1fr);
}

/* Aligned with every other section; only the reading line is kept short. */
.zf-about-person__grid.is-words-only .zf-about-person__words {
	max-width: 820px;
}

.zf-about-archive {
	position: sticky;
	top: 140px;
	margin: 0;
}

.zf-about-archive img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 18px 40px rgba(28, 46, 21, 0.12);
}

/* ---- 2b. the bridge: a statement, centred ------------------------------ */

.zf-about .zf-about-bridge {
	background: var(--zf-ivory);
	text-align: center;
}

.zf-about .zf-about-bridge__title {
	max-width: 22ch;
	margin: 0 auto 20px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem) !important;
	font-weight: 400 !important;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--zf-ink);
	text-wrap: balance;
}

.zf-about-bridge__body {
	max-width: 62ch;
	margin: 0 auto 22px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--zf-body);
}

.zf-about .zf-about-bridge__line {
	max-width: 48ch;
	margin: 0 auto;
	font-family: var(--zf-serif) !important;
	font-size: 19px;
	font-style: italic;
	line-height: 1.5;
	color: var(--zf-g-deep);
}

/* ---- 2c. the present chapter ------------------------------------------ */

.zf-about .zf-about-present {
	background: #ffffff;
}

.zf-about-present__cards {
	margin-top: clamp(28px, 3.4vw, 44px);
}

@media (max-width: 991px) {
	.zf-about-prose--two,
	.zf-about-person__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-about-archive {
		position: static;
		max-width: 420px;
	}
}

/* ---- 2. the research: the olive block, a little more room -------------- */

.zf-about .zf-about-origin .zf-pdp-olive__body + .zf-pdp-olive__body {
	margin-top: -4px;
}

/* ---- 3, 4. the way and the philosophy --------------------------------- */

.zf-about .zf-about-way {
	background: #ffffff;
}

.zf-about .zf-about-philosophy {
	background: var(--zf-ivory);
}

.zf-about-num {
	display: block;
	margin-bottom: 10px;
	font-family: var(--zf-serif) !important;
	font-size: 15px;
	font-style: italic;
	color: var(--zf-g-deep);
}

/* ---- 5. beyond olive -------------------------------------------------- */

.zf-about-beyond__words {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 64px);
	align-items: start;
	margin-bottom: clamp(28px, 3.4vw, 48px);
}

.zf-about-beyond__body {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
	color: var(--zf-body);
}

.zf-about-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-about-chips li {
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--zf-rule);
	border-radius: 999px;
	background: var(--zf-cream);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--zf-f);
}

.zf-about-foods {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-about-food {
	margin: 0;
}

.zf-about-food a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 12px 12px 18px;
	border: 1px solid var(--zf-rule);
	border-top: 3px solid var(--zf-g);
	border-radius: 18px;
	background: #ffffff;
	text-decoration: none;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.zf-about-food a:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(28, 46, 21, 0.1);
}

.zf-about-food__img {
	display: block;
	overflow: hidden;
	margin-bottom: 8px;
	border-radius: 12px;
	background: var(--zf-cream);
}

.zf-about-food__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.zf-about-food__name {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--zf-ink);
}

.zf-about-food__price,
.zf-about-food__price .amount {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--zf-g-deep);
}

.zf-about-food__price del {
	opacity: 0.55;
	margin-right: 4px;
}

.zf-about-food__price ins {
	text-decoration: none;
}

/* ---- 6. the journey --------------------------------------------------- */

/* White, so the ivory closing band below reads as its own section. */
.zf-about .zf-about-journey {
	background: #ffffff;
}

.zf-about-rail {
	--zf-rail: 5;
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--zf-rail), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The line through the numbers. */
.zf-about-rail::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 22px;
	right: 22px;
	border-top: 2px dashed rgba(212, 175, 55, 0.55);
}

.zf-about-rail__step {
	position: relative;
	margin: 0;
}

.zf-about-rail__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--zf-g);
	box-shadow: 0 0 0 6px #ffffff;
	font-family: var(--zf-serif) !important;
	font-size: 15px;
	font-style: italic;
	color: var(--zf-g-deep);
}

.zf-about-rail__step.is-here .zf-about-rail__dot {
	background: var(--zf-f);
	border-color: var(--zf-f);
	color: #ffffff;
}

.zf-about .zf-about-rail__label {
	margin: 0 0 4px;
	font-family: var(--zf-serif) !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: var(--zf-ink);
}

.zf-about-rail__brand {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zf-g-deep);
}

.zf-about-rail__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--zf-body);
}

.zf-about-sign {
	margin-top: clamp(32px, 4vw, 56px);
	padding: 26px 28px;
	border-radius: 18px;
	background: var(--zf-cream);
	border-left: 3px solid var(--zf-g);
}

.zf-about .zf-about-sign h3 {
	margin: 0 0 6px;
	font-family: var(--zf-serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	font-style: italic;
	color: var(--zf-ink);
}

.zf-about-sign p {
	margin: 0 0 12px;
	max-width: 70ch;
	color: var(--zf-body);
}

/* ---- phones and tablets ----------------------------------------------- */

@media (max-width: 991px) {
	.zf-about-hero__grid,
	.zf-about-beyond__words {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-about-hero__media {
		max-width: 520px;
	}

	.zf-about-foods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zf-about-rail {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* The line runs down the numbers instead. */
	.zf-about-rail::before {
		top: 22px;
		bottom: 22px;
		left: 21px;
		right: auto;
		border-top: 0;
		border-left: 2px dashed rgba(212, 175, 55, 0.55);
	}

	.zf-about-rail__step {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 18px;
		padding-bottom: 26px;
	}

	.zf-about-rail__dot {
		grid-row: 1 / span 3;
		margin: 0;
	}
}

@media (max-width: 480px) {
	.zf-about-facts__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.zf-about-hero__media {
		padding: 0 0 36px 28px;
	}

	.zf-about-foods {
		gap: 12px;
	}
}

/* ---- 7. the closing band ---------------------------------------------- */

/* The footer below is forest green, like this band was, so its torn edge
   tore green into green: the soft brush mask read as a blur (Atif, 2026-
   09-21: "ajib blurry"). Here the band is ivory with ink words, and the
   footer's green tears up into it with the contrast the homepage's brush
   edges have; the brush keeps its own proportions instead of being
   stretched across the page, and the footer's hairline, a second seam
   right under the edge, goes. */
body.zf-about-page .sui-farmi .zf-closing {
	background: var(--zf-ivory);
	color: var(--zf-ink);
}

body.zf-about-page .sui-farmi .zf-closing .zf-display {
	color: var(--zf-ink);
}

body.zf-about-page .sui-farmi .zf-closing p {
	color: var(--zf-body);
}

body.zf-about-page .sui-farmi .zf-closing__edge {
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

body.zf-about-page .zf-footer {
	border-top: 0;
}

/* ---- 6b. the journey as three paths that meet (Atif, 2026-09-22) ---------

   Traditional learning, agricultural research and technology stand side by
   side, unnumbered and unjoined, so nothing reads as inherited; each draws
   down into Zuriyat Foods, the one place they meet. */

.zf-about-meet__paths {
	display: grid;
	grid-template-columns: repeat(var(--zf-paths, 3), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-about-meet__path {
	margin: 0;
	padding: 24px 22px;
	border-radius: 18px;
	background: var(--zf-cream);
	border-top: 3px solid var(--zf-g);
	text-align: center;
}

.zf-about-meet__field {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zf-g-deep);
}

.zf-about .zf-about-meet__name {
	margin: 0 0 8px;
	font-family: var(--zf-serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: var(--zf-ink);
}

.zf-about-meet__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--zf-body);
}

.zf-about-meet__lines {
	display: block;
	width: 100%;
	height: 70px;
	overflow: visible;
}

.zf-about-meet__lines path {
	fill: none;
	stroke: rgba(212, 175, 55, 0.7);
	stroke-width: 2;
	stroke-dasharray: 5 6;
	vector-effect: non-scaling-stroke;
}

.zf-about-meet__here {
	max-width: 520px;
	margin: 0 auto;
	padding: 26px 28px;
	border-radius: 20px;
	background: var(--zf-f);
	text-align: center;
	box-shadow: 0 18px 40px rgba(28, 46, 21, 0.16);
}

.zf-about-meet__here .zf-about-meet__field {
	color: var(--zf-amber);
}

.zf-about .zf-about-meet__here .zf-about-meet__name {
	color: #ffffff;
	font-size: 26px !important;
}

.zf-about-meet__here .zf-about-meet__text {
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 767px) {
	.zf-about-meet__paths {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	/* One dashed line down into Zuriyat instead of three curves. */
	.zf-about-meet__lines {
		display: none;
	}

	.zf-about-meet__here {
		position: relative;
		margin-top: 44px;
	}

	.zf-about-meet__here::before {
		content: "";
		position: absolute;
		left: 50%;
		top: -38px;
		height: 32px;
		border-left: 2px dashed rgba(212, 175, 55, 0.7);
	}
}

/* ---- 1b, merged: one unfolding story (Atif, 2026-09-22) -------------------

   The family introduction, Hakeem Muhammad Sadiq and the turn to the
   research share one ground and read top to bottom, then the green
   research chapter follows. His card is the page's cream card with a gold
   edge; the ring is the process marks' ring, holding his photograph when a
   real one is given and an open book until then. */

.zf-about .zf-about-story {
	background: #ffffff;
}

.zf-about-story__intro p {
	max-width: 70ch;
}

.zf-about-kin {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: clamp(22px, 3vw, 40px);
	align-items: start;
	max-width: 980px;
	margin-top: clamp(36px, 4vw, 56px);
	padding: clamp(24px, 3vw, 36px);
	border-radius: 20px;
	background: var(--zf-cream);
	border-left: 3px solid var(--zf-g);
}

.zf-about-kin__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--zf-f);
	box-shadow: 0 0 0 6px var(--zf-cream), 0 0 0 7px rgba(212, 175, 55, 0.6);
}

.zf-about-kin__ring svg {
	width: 46px;
	height: 46px;
}

.zf-about-kin__ring img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 50%;
}

.zf-about-kin .zf-pdp-eyebrow {
	margin-bottom: 6px;
}

.zf-about .zf-about-kin__name {
	margin: 0 0 14px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem) !important;
	font-weight: 400 !important;
	line-height: 1.15;
	color: var(--zf-ink);
}

/* The turn to the research: same ground, a rule, then straight into green. */
.zf-about-story__turn {
	margin-top: clamp(48px, 6vw, 76px);
	padding-top: clamp(36px, 4vw, 56px);
	border-top: 1px solid var(--zf-rule);
}

.zf-about-story__turn .zf-about-prose p {
	max-width: 70ch;
}

/* ---- 2, closing: the bridge as the research chapter's last word ---------- */

.zf-about-origin__bridge {
	margin-top: clamp(44px, 5vw, 64px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.zf-about .zf-about-origin__bridge-title {
	max-width: 30ch;
	margin: 0 0 10px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
}

.zf-about .zf-about-origin__bridge-line {
	max-width: 60ch;
	margin: 0;
	font-family: var(--zf-serif) !important;
	font-size: 17px;
	font-style: italic;
	color: var(--zf-amber);
}

@media (max-width: 600px) {
	.zf-about-kin {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-about-kin__ring {
		width: 96px;
		height: 96px;
	}
}

/* ---- final polish (Atif, 2026-09-22) ------------------------------------ */

/* Hakeem Muhammad Sadiq: editorial, not a feature card. No fill, no ring,
   a single hairline in gold beside the words; a genuine portrait, when
   given, sits beside them as a small photograph. */
.zf-about-kin {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
	padding: 6px 0 6px clamp(20px, 3vw, 34px);
	border-radius: 0;
	background: none;
	border-left: 1px solid rgba(212, 175, 55, 0.6);
}

.zf-about-kin.has-portrait {
	grid-template-columns: 160px minmax(0, 1fr);
}

.zf-about-kin__portrait {
	margin: 0;
}

.zf-about-kin__portrait img {
	display: block;
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
}

/* The bridge stays a closing line of the green chapter, not a subsection. */
.zf-about-origin__bridge {
	margin-top: clamp(36px, 4vw, 52px);
	padding-top: clamp(24px, 2.6vw, 32px);
}

/* Convergence: evenly scaled lines, each with its own arrowhead. */
.zf-about-meet__lines {
	height: auto;
	margin: 0 0 -2px;
}

.zf-about-meet__lines polygon {
	fill: rgba(212, 175, 55, 0.9);
	stroke: none;
}

.zf-about-meet__lines path {
	stroke-dasharray: 6 6;
}

@media (max-width: 600px) {
	.zf-about-kin.has-portrait {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-about-kin__portrait {
		max-width: 160px;
	}
}

/* On a phone the three cards stack; so none reads as leading to the next,
   each sends its own short line to one rail at the side, and only the rail
   reaches Zuriyat — a bracket of inputs, not a sequence. */
@media (max-width: 767px) {
	.zf-about-meet__paths {
		position: relative;
		padding-right: 30px;
	}

	.zf-about-meet__path {
		position: relative;
	}

	.zf-about-meet__path::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -30px;
		width: 30px;
		border-top: 2px dashed rgba(212, 175, 55, 0.7);
	}

	/* The rail: from the first card's middle down to the Zuriyat block. */
	.zf-about-meet__paths::after {
		content: "";
		position: absolute;
		top: 64px;
		bottom: -40px;
		right: 0;
		border-left: 2px dashed rgba(212, 175, 55, 0.7);
	}

	.zf-about-meet__here {
		margin-top: 48px;
	}

	.zf-about-meet__here::before {
		top: -14px;
		left: auto;
		right: -6px;
		height: 0;
		width: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 12px solid rgba(212, 175, 55, 0.9);
	}
}

/* ---- Hakeem Muhammad Sadiq: spacing and balance (Atif, 2026-09-22) ------

   Still no card, icon or placeholder: the gold hairline stays. The name
   now holds its own column and the story reads beside it, so the
   subsection has presence without decoration; a genuine portrait, when
   given, takes its natural place above his name. */
.zf-about-kin,
.zf-about-kin.has-portrait {
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
	max-width: none;
	margin-top: clamp(52px, 6vw, 84px);
	padding: 8px 0 8px clamp(22px, 3vw, 40px);
}

.zf-about-kin__who {
	position: sticky;
	top: 150px;
}

.zf-about-kin__portrait {
	max-width: 220px;
	margin: 0 0 22px;
}

.zf-about-kin .zf-about-kin__name {
	margin: 0;
}

.zf-about-kin__story {
	padding-top: 4px;
}

.zf-about-kin__story p {
	max-width: 62ch;
}

@media (max-width: 767px) {
	.zf-about-kin,
	.zf-about-kin.has-portrait {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.zf-about-kin__who {
		position: static;
	}

	.zf-about-kin__portrait {
		max-width: 160px;
	}
}