.hall-main
{
	width: min(1400px, calc(100% - 80px));
	margin: 0 auto;
	padding: 0 0 100px;
}

.hall-header
{
	max-width: var(--hall-header-width);
}

.hall-eyebrow
{
	margin: 0 0 10px;
	color: var(--accent);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hall-header h1
{
	margin: 0 0 18px;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.hall-intro
{
	max-width: var(--hall-intro-width);
	margin: 0 auto;
	font-size: 1.15rem;
	line-height: 1.6;
}

.hall-list
{
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hall-fact
{
	color: var(--panel-text);
	display: grid;
	grid-template-columns: 105px 1fr 125px;
	align-items: stretch;
	min-height: 145px;
	overflow: hidden;
	background: var(--panel-bg);
	border: 1px solid var(--shadow-09);
	border-radius: 8px;
	box-shadow: 0 8px 25px var(--shadow-05);
}

.hall-rank
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--white);
	background: var(--surface-dark);
}

.rank-number
{
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.rank-number::before
{
	content: '#';
	color: var(--accent);
	font-size: .55em;
	vertical-align: top;
}

.rank-crown
{
	color: var(--accent);
	font-size: 1.25rem;
	line-height: 1;
}

.hall-content
{
	padding: 28px 35px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hall-content blockquote
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(1.25rem, 1.8vw, 1.65rem);
	font-weight: 700;
	line-height: 1.3;
}

.hall-meta
{
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: .9rem;
}

.hall-attribution
{
	opacity: var(--opacity-muted);
}

.hall-attribution strong
{
	color: var(--text);
}

.hall-link
{
	color: var(--primary);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.hall-link:hover,
.hall-link:focus-visible
{
	text-decoration: underline;
}


/* ==================================================
   PHOTOGRAPHIC EVIDENCE
================================================== */

.hall-evidence
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.hall-evidence img
{
	width: 36px;
	height: 36px;
	display: block;
	object-fit: cover;
	background: var(--surface-dark-alt);
	border: 1px solid var(--accent-overlay-45);
	border-radius: 4px;
	box-shadow: 0 3px 9px var(--warm-shadow-10);
	transition:
		transform .2s ease,
		box-shadow .2s ease;
}

.hall-evidence:hover img,
.hall-evidence:focus-visible img
{
	transform: scale(1.12);
	box-shadow: 0 5px 14px var(--warm-shadow-17);
}

.hall-evidence span
{
	color: var(--accent);
	font-size: .72rem;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* ==================================================
   HEART BUTTON
================================================== */

.hall-hearts
{
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--primary);
	background: var(--transparent);
	border: 0;
	border-left: 1px solid var(--shadow-08);
	cursor: pointer;
	transition:
		background-color .2s ease,
		color .2s ease;
}

.hall-hearts:hover,
.hall-hearts:focus-visible,
.hall-hearts[aria-pressed='true']
{
	color: var(--light);
	background: var(--primary);
}

.hall-hearts:disabled
{
	opacity: var(--opacity-disabled);
	cursor: wait;
}

.hall-heart-icon
{
	font-size: 1.5rem;
	transition: transform .2s ease;
}

.hall-hearts:hover .hall-heart-icon,
.hall-hearts:focus-visible .hall-heart-icon,
.hall-hearts[aria-pressed='true'] .hall-heart-icon
{
	transform: scale(1.16);
}

.hall-hearts strong
{
	font-size: 1.8rem;
	font-weight: 700;
}

/* ==================================================
   TOP THREE
================================================== */

.hall-fact:nth-child(1)
{
	min-height: 190px;
	border: 2px solid var(--accent);
	box-shadow: 0 15px 40px var(--shadow-11);
}

.hall-fact:nth-child(1) .hall-rank
{
	color: var(--text);
	background: var(--accent);
}

.hall-fact:nth-child(1) .rank-number
{
	font-size: 3.4rem;
}

.hall-fact:nth-child(1) .rank-number::before
{
	color: var(--text);
}

.hall-fact:nth-child(1) .rank-crown
{
	color: var(--text);
	font-size: 1.7rem;
}

.hall-fact:nth-child(1) .hall-content blockquote
{
	font-size: clamp(1.6rem, 2.3vw, 2.15rem);
}

.hall-fact:nth-child(1) .hall-hearts strong
{
	font-size: 2.25rem;
}

.hall-fact:nth-child(2),
.hall-fact:nth-child(3)
{
	border: 1px solid var(--accent-overlay-65);
}

.hall-fact:nth-child(2) .hall-rank,
.hall-fact:nth-child(3) .hall-rank
{
	background: var(--surface-neutral-dark-alt);
}

/* ==================================================
   EMPTY STATE
================================================== */

.hall-empty
{
	padding: 70px 30px;
	text-align: center;
	border: 1px solid var(--shadow-10);
	border-radius: 8px;
}

.hall-empty h2
{
	margin: 0 0 10px;
	font-size: 2rem;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px)
{
	.hall-main
	{
		width: min(100% - 40px, 1400px);
	}

	.hall-fact
	{
		grid-template-columns: 85px 1fr 100px;
	}

	.hall-content
	{
		padding: 25px;
	}

	.hall-hearts
	{
		padding: 15px;
	}
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px)
{
	.hall-main
	{
		width: calc(100% - 30px);
		padding: 0 0 65px;
	}

	.hall-header
	{
		margin-bottom: 35px;
	}

	.hall-header h1
	{
		font-size: 2.5rem;
	}

	.hall-intro
	{
		font-size: 1rem;
	}

	.hall-fact,
	.hall-fact:nth-child(1)
	{
		grid-template-columns: 70px 1fr;
		min-height: 0;
	}

	.hall-rank
	{
		grid-row: 1 / 3;
	}

	.rank-number
	{
		font-size: 2rem;
	}

	.hall-fact:nth-child(1) .rank-number
	{
		font-size: 2.5rem;
	}

	.hall-content
	{
		padding: 22px 20px 12px;
	}

	.hall-content blockquote,
	.hall-fact:nth-child(1) .hall-content blockquote
	{
		font-size: 1.25rem;
	}

	.hall-meta
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		margin-top: 14px;
	}


	.hall-evidence
	{
		margin-top: 2px;
	}

	.hall-evidence img
	{
		width: 42px;
		height: 42px;
	}

	.hall-hearts
	{
		grid-column: 2;
		justify-content: flex-start;
		padding: 10px 20px 20px;
		border-left: 0;
	}

	.hall-hearts strong,
	.hall-fact:nth-child(1) .hall-hearts strong
	{
		font-size: 1.5rem;
	}
}

/* ==================================================
   HEARTED BY TOOLTIP
================================================== */

.heart-count-target
{
	position: relative;
}

.heart-tooltip
{
	position: fixed;
	z-index: 1000;
	min-width: 180px;
	max-width: min(280px, calc(100vw - 24px));
	padding: 11px 14px;
	color: var(--light);
	background: var(--surface-dark);
	border: 1px solid var(--accent-overlay-50);
	border-radius: 6px;
	box-shadow: 0 12px 30px var(--shadow-28);
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	pointer-events: none;
}

.heart-tooltip[hidden]
{
	display: none;
}

.heart-tooltip::after
{
	content: '';
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	border: 7px solid var(--transparent);
	transform: translateX(-50%);
}

.heart-tooltip[data-placement='top']::after
{
	top: 100%;
	border-top-color: var(--surface-dark);
}

.heart-tooltip[data-placement='bottom']::after
{
	bottom: 100%;
	border-bottom-color: var(--surface-dark);
}

.heart-tooltip-row,
.heart-tooltip-empty
{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.heart-tooltip-row + .heart-tooltip-row
{
	margin-top: 4px;
}

.heart-tooltip-anonymous
{
	color: var(--accent-soft);
}

.heart-tooltip-empty
{
	color: var(--light-overlay-68);
	font-style: italic;
}