@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

.ab-editorial {
	--ab-accent: #a19b7f;
	--ab-hover:  #b5502e;
	--ab-bg:     #fbfaf6;
	--ab-border: #e3e1d6;
	--ab-name:   #1c1a14;
	--ab-text:   #4a4a42;
	--ab-social: #6b6a5f;
	background: var(--ab-bg);
	border: 1px solid var(--ab-border);
	border-radius: 4px;
	padding: 40px;
	display: flex;
	gap: 28px;
	align-items: flex-start;
	box-sizing: border-box;
}
.ab-editorial .avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	filter: grayscale(100%);
	border: 1px solid var(--ab-border);
}
.ab-editorial .avatar-ph {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #eae8dd;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ab-border);
	box-sizing: border-box;
}
.ab-editorial .avatar-ph svg {
	width: 42%;
	height: 42%;
	fill: var(--ab-accent);
}
.ab-editorial .content { flex: 1; min-width: 0; }
.ab-editorial .eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ab-accent);
	margin-bottom: 8px;
	display: block;
}
.ab-editorial h3 {
	font-family: 'Fraunces', serif;
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
	color: var(--ab-name);
}
.ab-editorial p {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--ab-text);
	margin: 0 0 18px;
	max-width: 46ch;
}
.ab-editorial .socials {
	display: flex;
	gap: 0;
	border-top: 1px solid var(--ab-border);
	padding-top: 14px;
}
.ab-editorial .socials a {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.74rem;
	color: var(--ab-social);
	text-decoration: none;
	padding-right: 16px;
	margin-right: 16px;
	border-right: 1px solid var(--ab-border);
}
.ab-editorial .socials a:last-child {
	border-right: none;
	margin-right: 0;
	padding-right: 0;
}
.ab-editorial .socials a:hover { color: var(--ab-hover); }

@media (max-width: 600px) {
	.ab-editorial { flex-direction: column; padding: 28px; }
}