/* ==========================================================================
   Portrait — personal brand image
   ========================================================================== */

.portrait {
	margin: 0;
	line-height: 0;
	overflow: hidden;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--shadow-sm);
	transition:
		border-color var(--transition-base),
		box-shadow var(--transition-base);
}

.portrait__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.portrait:hover {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow:
		var(--shadow-md),
		0 0 32px var(--color-accent-glow);
}

/* Homepage card */
.portrait--card {
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
}

/* About hero */
.portrait--hero {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-xl);
}

/* Contact avatar */
.portrait--avatar {
	flex-shrink: 0;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
}

.portrait--avatar .portrait__img {
	object-position: center 18%;
}

.contact-intro__head {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}

.contact-intro__head .heading-2 {
	margin-bottom: 0;
}

@media (min-width: 48rem) {
	.portrait--card {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portrait {
		transition: none;
	}
}