/*
 * Artists and folk birthdays. The theme's colour variables throughout, so
 * this follows the theme, dark mode and all; the fallbacks are its light
 * palette.
 */

/* An artist's page */

.fc-artist-page__top {
	display: grid;
	gap: 20px;
	margin: 8px 0 var(--fc-gap, 16px);
}

.fc-artist-page__photo {
	justify-self: center;
	max-width: 16rem;
	margin: 0;
}

.fc-artist-page__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fc-radius, 14px);
}

.fc-artist-page__photo figcaption {
	margin-top: 4px;
	color: var(--fc-muted, #6b5f52);
	font-size: 0.75rem;
}

.fc-artist-page__main h1 {
	margin-top: 0;
}

.fc-artist-page__birthday {
	display: inline-block;
	margin: 0 0 10px;
	padding: 6px 12px;
	border-left: 4px solid var(--fc-accent, #e8a936);
	border-radius: var(--fc-radius, 14px);
	background: var(--fc-accent-tint, #fbefd2);
	color: var(--fc-ink, #2a221b);
	font-weight: 700;
}

.fc-artist-page__known {
	margin: -8px 0 12px;
	color: var(--fc-muted, #6b5f52);
	font-family: var(--fc-font-display, Georgia, serif);
	font-size: 1.15rem;
	line-height: 1.35;
}

.fc-artist-page__facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 14px;
	margin: 0;
}

.fc-artist-page__facts dt {
	color: var(--fc-muted, #6b5f52);
}

.fc-artist-page__facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.fc-artist-page__tags {
	margin-top: 12px;
}

.fc-artist-products {
	margin-top: calc(2 * var(--fc-gap, 16px));
}

/* The Image Attribution plugin's wrapper, the photo's credit over it. */
.fc-artist-page__photo .iab-wrap {
	display: block;
	border-radius: var(--fc-radius, 14px);
	overflow: hidden;
}

/*
 * Where there is room, floated right beside the name and facts, so the bio
 * wraps up beside a tall photo rather than starting below it. The map and
 * what follows start clear of it.
 */
@media (min-width: 640px) {
	.fc-artist-page__top--photo {
		display: block;
	}

	.fc-artist-page__photo {
		float: right;
		width: 14rem;
		/* The foot margin is the gap above the map when the photo runs past the bio. */
		margin: 0 0 40px 28px;
	}

	.fc-artist-page__photo img {
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: 50% 25%;
	}

	.fc-artist-page .fc-map,
	.fc-artist-page__reading {
		clear: both;
	}
}

/* Room between the bio and the map under it. */
.fc-artist-page .fc-map {
	margin-top: 40px;
}

@media (min-width: 960px) {
	.fc-artist-page__photo {
		width: 16rem;
	}
}

/* Folk birthdays: everybody by birthday */

.fc-artists-month {
	margin: 0 0 calc(1.5 * var(--fc-gap, 16px));
}

.fc-artists {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-artists__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 56px;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--fc-line, #e3d8c2);
}

/*
 * Their photo, or the site's mark on the amber tint (the theme's
 * .fc-row__photo--mark, as on a custom's row), a small square at the end of
 * a birthday's row and the start of an A to Z entry. Doubled up to outrank
 * the theme's own size for the mark.
 */
.fc-artists__photo.fc-artists__photo {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
}

.fc-artists__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.fc-artists__photo .iab-wrap {
	display: block;
	height: 100%;
}

/* The mark centred in its square, as the theme has it. */
.fc-artists__photo.fc-artists__photo.fc-row__photo--mark {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* No credit over a thumbnail: the artist's page credits the photo in full. */
.fc-artists__photo .iab-attribution {
	display: none;
}

/* Folk artists, A to Z: the letters to jump to, then a grid read across. */
.fc-artists-letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--fc-gap, 16px);
}

.fc-artists-letters a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	padding: 4px 8px;
	border: 1px solid var(--fc-line, #e3d8c2);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.fc-artists-letter {
	margin: 0 0 calc(1.5 * var(--fc-gap, 16px));
	scroll-margin-top: 90px;
}

.fc-artists-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 4px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-artists-grid__item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--fc-line, #e3d8c2);
}

.fc-artists-grid__item .fc-artists__who {
	min-width: 0;
}

.fc-artists__day {
	color: var(--fc-muted, #6b5f52);
	font-variant-numeric: tabular-nums;
}

.fc-artists__name {
	font-weight: 700;
}

.fc-artists__years {
	margin-left: 6px;
	color: var(--fc-muted, #6b5f52);
	font-size: 0.9rem;
}

.fc-artists__known {
	display: block;
	color: var(--fc-muted, #6b5f52);
	font-size: 0.9rem;
}

.fc-artists-month--today .fc-artists__item {
	padding: 10px 12px;
	border: 0;
	border-left: 4px solid var(--fc-accent, #e8a936);
	border-radius: var(--fc-radius, 14px);
	background: var(--fc-accent-tint, #fbefd2);
	margin-bottom: 8px;
}

.fc-artist-page__reading {
	margin-top: var(--fc-gap, 16px);
	color: var(--fc-muted, #6b5f52);
	font-size: 0.9rem;
}