/**
 * WAR Theme - Hero
 */

.war-hero {
	position: relative;
	padding-block: var(--war-s10) 0;
}

.war-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 387px) minmax(0, 1fr);
	gap: var(--war-s10);
	align-items: start;
}

.war-hero__copy {
	position: relative;
	z-index: 2;
	padding-block-start: var(--war-s2);
}

.war-hero__eyebrow {
	font-size: var(--war-fs-label);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--war-yellow);
	margin-block-end: var(--war-s5);
}

.war-hero__title {
	font-size: var(--war-fs-hero);
	line-height: var(--war-lh-hero);
	letter-spacing: var(--war-ls-hero);
	font-weight: 800;
	margin-block-end: var(--war-s6);
}

/* "retro" is per-letter colour, not a gradient - the mockup shows
   five discrete hues with hard edges between glyphs. */
.war-hero__rainbow {
	white-space: nowrap;
}

.war-hero__rainbow span:nth-child(5n + 1) { color: var(--war-rb-1); }
.war-hero__rainbow span:nth-child(5n + 2) { color: var(--war-rb-2); }
.war-hero__rainbow span:nth-child(5n + 3) { color: var(--war-rb-3); }
.war-hero__rainbow span:nth-child(5n + 4) { color: var(--war-rb-4); }
.war-hero__rainbow span:nth-child(5n + 5) { color: var(--war-rb-5); }

.war-hero__intro {
	max-width: 330px;
	font-size: var(--war-fs-body);
	line-height: 1.32; /* 21px pitch, measured */
	color: var(--war-text-dim);
	margin-block-end: var(--war-s8);
}

.war-hero__intro strong {
	color: var(--war-yellow);
	font-weight: 600;
}

.war-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--war-s3);
	margin-block-end: var(--war-s10);
}

/* ---- Collection value ------------------------------------------------- */

.war-hero__value {
	padding-block-start: var(--war-s6);
	border-block-start: 1px solid var(--war-line);
}

.war-hero__valuelabel {
	margin-block-end: var(--war-s3);
}

.war-hero__valuerow {
	display: flex;
	align-items: baseline;
	gap: var(--war-s4);
}

.war-hero__valuenum {
	font-size: var(--war-fs-value);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.war-hero__valuedelta {
	display: grid;
	line-height: 1.25;
}

.war-hero__valuedelta small {
	font-size: var(--war-fs-meta);
	color: var(--war-text-mute);
}

/* ---- Stat row ----------------------------------------------------------- */

.war-hero__stats {
	display: flex;
	align-items: center;
	gap: var(--war-s6);
	margin-block-start: var(--war-s8);
}

.war-hero__stat {
	display: flex;
	align-items: center;
	gap: var(--war-s3);
}

.war-hero__stat + .war-hero__stat {
	padding-inline-start: var(--war-s6);
	border-inline-start: 1px solid var(--war-line);
}

.war-hero__staticon {
	width: 20px;
	height: 20px;
	color: var(--war-text-dim);
	flex: 0 0 auto;
}

.war-hero__statnum {
	display: block;
	font-size: var(--war-fs-statnum);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* ---- Media ---------------------------------------------------------------- */

.war-hero__media {
	position: relative;
	min-height: 430px;
	margin-inline-end: calc(var(--war-s20) * -1);
	margin-block-start: calc(var(--war-s5) * -1);
}

.war-hero__img {
	width: 100%;
	height: 100%;
	min-height: 430px;
	object-fit: cover;
	object-position: center left;
	/* Feather into true black on the left and bottom so the photo
	   dissolves rather than sitting in a box. */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 26%),
		linear-gradient(to top, transparent 0%, #000 22%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 26%),
		linear-gradient(to top, transparent 0%, #000 22%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.war-hero__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--war-line);
	border-radius: var(--war-r-lg);
	color: var(--war-text-faint);
	font-size: var(--war-fs-label);
	text-align: center;
	padding: var(--war-s8);
	margin-inline-end: 0;
}

/* ---- Scroll cue ------------------------------------------------------------ */

.war-hero__scroll {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--war-s2);
	margin-block-start: var(--war-s6);
	color: var(--war-text-mute);
}

.war-hero__scroll svg {
	width: 14px;
	height: 14px;
}