/**
 * Phixo · Editor About page (board 04).
 *
 * Page-specific layout only. All shared idioms (.band, .container,
 * .eyebrow, .lede, .section-title, .num, .actions, .btn, .text-link,
 * .band--ink, .band--stone-warm) come from phixo.css. Colours, type,
 * spacing use only var(--…) tokens — never hardcoded hex.
 *
 * @package PhixoChild
 */

/* ---- 1 · Hero split ------------------------------------------------ */

.phixo-eabout__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.phixo-eabout__hero-text {
	max-width: var(--measure);
}

.phixo-eabout__h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	color: var(--ink);
	margin: 0.4em 0 0.5em;
}

.phixo-eabout__lede {
	color: var(--ink-soft);
	margin: 0;
}

.phixo-eabout__portrait {
	position: relative;
	margin: 0;
}

.phixo-eabout__portrait .img-slot,
.phixo-eabout__portrait .phixo-img {
	width: 100%;
	display: block;
}

.phixo-eabout__portrait-tag {
	font-family: var(--sans);
	font-size: var(--fs-caption);
	color: var(--mute);
	letter-spacing: 0.02em;
	margin-top: 0.75rem;
}

/* ---- 2 · How I work (2×2 numbered steps) --------------------------- */

.phixo-eabout__how-head {
	max-width: var(--measure);
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.phixo-eabout__how-head .section-title {
	margin-top: 0.3em;
}

.phixo-eabout__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3.5rem);
}

.phixo-eabout__step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.phixo-eabout__step-n {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--fs-h3);
	line-height: 1;
	color: var(--brass);
	flex-shrink: 0;
}

.phixo-eabout__step-body {
	max-width: var(--measure);
}

.phixo-eabout__step-h {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
	color: var(--ink);
	margin: 0 0 0.5rem;
}

.phixo-eabout__step-body p {
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
	margin: 0;
}

/* ---- 3 · Selected clients ------------------------------------------ */

.phixo-eabout__clients {
	text-align: center;
}

.phixo-eabout__clients-row {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.phixo-eabout__client {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--fs-body-lg);
	color: var(--mute);
	letter-spacing: 0.01em;
}

/* ---- 4 · Work-with-me CTA (dark band) ------------------------------ */

.phixo-eabout__cta-inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.phixo-eabout__cta-h {
	margin: 0.4em 0 0.6em;
}

.phixo-eabout__cta-body {
	font-family: var(--sans);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--stone);
	max-width: var(--measure);
	margin: 0 auto;
}

.phixo-eabout__cta-actions {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
	justify-content: center;
	align-items: center;
}

/* On the dark band the mailto text-link needs a light-on-dark treatment.
   Rose is reserved for the filled primary button here (white-on-rose is
   permitted inside a --ink band); the link stays a linen text-link. */
.phixo-eabout__cta-email {
	color: var(--bg);
}

.phixo-eabout__cta-email:hover,
.phixo-eabout__cta-email:focus-visible {
	color: var(--rose);
}

/* ---- Responsive ---------------------------------------------------- */

@media (max-width: 720px) {
	.phixo-eabout__hero {
		grid-template-columns: 1fr;
	}

	.phixo-eabout__steps {
		grid-template-columns: 1fr;
	}
}