/* Hub de Eras — isolated. Loaded only on /eras/. */

body.era-hub-page {
	background: #091523;
	color: #f4f7fb;
	overflow-x: clip;
}

.era-hub {
	overflow-x: clip;
	padding: 0 0 4.5rem;
}

.era-hub__intro {
	width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max));
	margin: 0 auto;
	padding: 6.4rem 0 2.4rem;
}

.era-hub__kicker {
	margin: 0 0 0.45rem;
	color: rgb(244 247 251 / 55%);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.era-hub__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.92;
}

.era-hub-collection {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.4rem;
	width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max));
	margin: 0 auto;
	min-width: 0;
}

.era-hub-piece {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-width: 0;
	max-width: 100%;
	color: inherit;
}

.era-hub-piece:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 6px;
}

.era-hub-piece__object {
	position: relative;
	display: block;
	min-width: 0;
	max-width: 100%;
}

.era-hub-piece__object img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.era-hub-piece__meta {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.era-hub-piece__index {
	color: rgb(244 247 251 / 48%);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.era-hub-piece__name {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.era-hub-piece__year {
	color: rgb(244 247 251 / 62%);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   01 — 21st century heartbreak · HUD / gamer
   ------------------------------------------------------------------ */

.era-hub-piece--21ch {
	width: min(22.5rem, 86%);
	align-self: flex-start;
}

.era-hub-piece--21ch .era-hub-piece__object {
	padding: 1.15rem 0.95rem 1.35rem;
	background: #050508;
	box-shadow:
		0 0 0 1px rgb(232 160 212 / 35%),
		0 0 2.4rem rgb(196 160 245 / 18%);
}

.era-hub-piece--21ch img {
	display: block;
	aspect-ratio: 1;
	object-fit: contain;
	background: #000;
}

.era-hub-hud {
	pointer-events: none;
	position: absolute;
	inset: 0.35rem;
	z-index: 2;
	border: 1px solid rgb(232 160 212 / 45%);
}

.era-hub-hud__label {
	position: absolute;
	top: 0.35rem;
	left: 0.5rem;
	color: #e8a0d4;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.era-hub-hud__corners::before,
.era-hub-hud__corners::after {
	position: absolute;
	width: 0.7rem;
	height: 0.7rem;
	border: 2px solid #c4a0f5;
	content: "";
}

.era-hub-hud__corners::before {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.era-hub-hud__corners::after {
	right: -1px;
	bottom: -1px;
	border-top: 0;
	border-left: 0;
}

.era-hub-piece--21ch .era-hub-piece__object::after {
	position: absolute;
	inset: 1.15rem 0.95rem 1.35rem;
	background: repeating-linear-gradient(
		180deg,
		rgb(232 160 212 / 0) 0 2px,
		rgb(232 160 212 / 7%) 2px 3px
	);
	content: "";
	pointer-events: none;
}

.era-hub-piece--21ch .era-hub-piece__name {
	font-weight: 800;
	letter-spacing: -0.05em;
	text-transform: lowercase;
}

.era-hub-piece--21ch .era-hub-piece__year {
	color: #c4a0f5;
}

/* ------------------------------------------------------------------
   02 — second thoughts · fita vermelha
   ------------------------------------------------------------------ */

.era-hub-piece--st {
	width: min(24rem, 88%);
	align-self: flex-end;
	margin-top: 0.4rem;
}

.era-hub-piece--st .era-hub-piece__object {
	transform: rotate(-3.2deg);
	background: #0e2a40;
	box-shadow: 0 1.1rem 2.2rem rgb(0 0 0 / 35%);
}

.era-hub-piece--st img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
}

.era-hub-tape {
	position: absolute;
	z-index: 2;
	height: 1.2rem;
	background:
		repeating-linear-gradient(
			-32deg,
			#c41222 0 0.18rem,
			#e31b2c 0.18rem 0.42rem
		);
	box-shadow: 0 0.12rem 0.25rem rgb(14 42 64 / 35%);
	pointer-events: none;
}

.era-hub-tape--a {
	top: -0.45rem;
	left: 18%;
	width: 42%;
	transform: rotate(-8deg);
}

.era-hub-tape--b {
	top: 22%;
	left: -0.7rem;
	width: 2.4rem;
	height: 28%;
	transform: rotate(4deg);
}

.era-hub-tape--c {
	right: -0.55rem;
	bottom: 18%;
	width: 2.1rem;
	height: 32%;
	transform: rotate(-11deg);
}

.era-hub-piece--st .era-hub-piece__name {
	font-family: var(--font-script);
	font-size: 1.35rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: lowercase;
}

.era-hub-piece--st .era-hub-piece__year {
	color: #e31b2c;
	font-weight: 700;
}

/* ------------------------------------------------------------------
   03 — the tears we fight · revista
   ------------------------------------------------------------------ */

.era-hub-piece--ttwf {
	width: min(28rem, 92%);
	align-self: flex-start;
	margin-top: 0.6rem;
}

.era-hub-piece--ttwf .era-hub-piece__object {
	background: #f3eee6;
	padding: 1.35rem 1rem 1.15rem;
	box-shadow:
		0 0.15rem 0 rgb(20 16 12 / 12%),
		0 1.4rem 2.6rem rgb(0 0 0 / 28%);
	transform: rotate(1.4deg);
}

.era-hub-mag__mast {
	display: flex;
	justify-content: space-between;
	margin: 0 0 0.55rem;
	color: #1c1814;
	font-family: var(--font-editorial);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.era-hub-piece--ttwf img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
}

.era-hub-piece--ttwf .era-hub-piece__index,
.era-hub-piece--ttwf .era-hub-piece__year {
	color: rgb(243 238 230 / 70%);
}

.era-hub-piece--ttwf .era-hub-piece__name {
	font-family: var(--font-editorial);
	font-size: 1.55rem;
	font-weight: 600;
	font-style: italic;
	letter-spacing: -0.03em;
	text-transform: lowercase;
}

/* ------------------------------------------------------------------
   04 — the afterparty · festa / flash
   ------------------------------------------------------------------ */

.era-hub-piece--afterparty {
	width: min(20.5rem, 78%);
	align-self: flex-end;
	margin-right: 4%;
}

.era-hub-piece--afterparty .era-hub-piece__object {
	transform: rotate(2.6deg);
	background:
		radial-gradient(circle at 20% 80%, rgb(61 158 168 / 28%) 0%, transparent 55%),
		#071018;
	box-shadow:
		0 0 0 0.35rem #071018,
		0 1.2rem 2.4rem rgb(107 30 50 / 28%);
}

.era-hub-piece--afterparty img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
}

.era-hub-piece--afterparty .era-hub-piece__name {
	font-size: 1.2rem;
	letter-spacing: -0.04em;
	text-transform: lowercase;
}

.era-hub-piece--afterparty .era-hub-piece__year {
	color: #d98aa0;
}

/* ------------------------------------------------------------------
   05 — Internet hometown hero · quarto
   ------------------------------------------------------------------ */

.era-hub-piece--ihh {
	width: min(36rem, 100%);
	align-self: stretch;
	margin-top: 0.35rem;
}

.era-hub-piece--ihh .era-hub-piece__object {
	overflow: hidden;
	background: #100b05;
	box-shadow: 0 1.4rem 2.8rem rgb(0 0 0 / 45%);
}

.era-hub-piece--ihh img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 72% 42%;
}

.era-hub-piece--ihh .era-hub-piece__index {
	color: #a9dfff;
}

.era-hub-piece--ihh .era-hub-piece__name {
	max-width: 12ch;
	font-size: 1.28rem;
	letter-spacing: -0.04em;
	line-height: 0.95;
}

.era-hub-piece--ihh .era-hub-piece__year {
	color: #9aa36a;
}

/* ------------------------------------------------------------------
   5.5 — TRIO · vinil
   ------------------------------------------------------------------ */

.era-hub-piece--trio {
	width: min(23rem, 84%);
	align-self: flex-end;
}

.era-hub-piece--trio .era-hub-piece__object {
	padding: 0;
	background: #05070a;
	transform: rotate(5.5deg);
	box-shadow: 0 1.2rem 2.2rem rgb(0 0 0 / 40%);
}

.era-hub-piece--trio img {
	display: block;
	width: 100%;
	height: auto;
}

.era-hub-piece--trio .era-hub-piece__index,
.era-hub-piece--trio .era-hub-piece__year {
	color: #8a9aa8;
}

.era-hub-piece--trio .era-hub-piece__name {
	color: #f4f6f8;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.era-hub-piece--trio .era-hub-piece__meta {
	padding: 0.15rem 0.2rem 0;
}

/* ------------------------------------------------------------------
   06 — When the lights turn on · CRT / Stillville
   ------------------------------------------------------------------ */

.era-hub-piece--wtlto {
	width: min(40rem, 100%);
	align-self: center;
	margin-top: 0.8rem;
}

.era-hub-piece--wtlto .era-hub-piece__object {
	padding: 0.7rem 0.7rem 0.55rem;
	background: #12100c;
	box-shadow:
		0 0 0 1px rgb(201 176 137 / 22%),
		0 1.5rem 2.8rem rgb(0 0 0 / 40%);
}

.era-hub-piece--wtlto img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #f7f4ee;
}

.era-hub-piece--wtlto .era-hub-piece__index {
	color: #e2b36a;
}

.era-hub-piece--wtlto .era-hub-piece__name {
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.era-hub-piece--wtlto .era-hub-piece__year {
	color: #c9b089;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (min-width: 48rem) {
	.era-hub__intro {
		padding-top: 7.2rem;
	}

	.era-hub-collection {
		gap: 1.8rem 0;
	}

	.era-hub-piece--21ch {
		width: min(24rem, 58%);
	}

	.era-hub-piece--st {
		width: min(26rem, 56%);
		margin-top: -1.2rem;
	}

	.era-hub-piece--ttwf {
		width: min(32rem, 64%);
		margin-top: 1.4rem;
	}

	.era-hub-piece--afterparty {
		width: min(22rem, 46%);
		margin-top: -2.8rem;
		margin-right: 2%;
	}

	.era-hub-piece--ihh {
		width: min(40rem, 78%);
		margin-top: 1.6rem;
	}

	.era-hub-piece--trio {
		width: min(26rem, 52%);
		margin-top: -1.4rem;
	}

	.era-hub-piece--wtlto {
		width: min(44rem, 86%);
		margin-top: 2.2rem;
	}
}

@media (min-width: 64rem) {
	.era-hub {
		padding-bottom: 5.5rem;
	}

	.era-hub-collection {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: start;
		gap: 0;
		padding-bottom: 1rem;
	}

	.era-hub-piece--21ch {
		grid-column: 1 / 6;
		grid-row: 1;
		width: 92%;
		margin: 0.4rem 0 0;
	}

	.era-hub-piece--st {
		grid-column: 7 / 13;
		grid-row: 1;
		width: 88%;
		margin: 4.8rem 0 0 auto;
	}

	.era-hub-piece--ttwf {
		grid-column: 1 / 8;
		grid-row: 2;
		width: 94%;
		margin: 3.2rem 0 0;
	}

	.era-hub-piece--afterparty {
		grid-column: 8 / 13;
		grid-row: 2;
		width: 90%;
		margin: 7.4rem 2% 0 auto;
	}

	.era-hub-piece--ihh {
		grid-column: 1 / 9;
		grid-row: 3;
		width: 96%;
		margin: 3.6rem 0 0;
	}

	.era-hub-piece--trio {
		grid-column: 8 / 13;
		grid-row: 3;
		width: 94%;
		margin: 8.5rem 0 0 auto;
	}

	.era-hub-piece--wtlto {
		grid-column: 3 / 12;
		grid-row: 4;
		width: 100%;
		margin: 4.2rem 0 0;
		justify-self: center;
	}

	.era-hub-piece--21ch .era-hub-piece__name {
		font-size: 1.12rem;
	}

	.era-hub-piece--ttwf .era-hub-piece__name {
		font-size: 1.85rem;
	}

	.era-hub-piece--ihh .era-hub-piece__name {
		font-size: 1.55rem;
	}

	.era-hub-piece--wtlto .era-hub-piece__name {
		font-size: 1.85rem;
	}
}

@media (max-width: 47.99rem) {
	.era-hub__intro {
		padding: 5.4rem 0 1.8rem;
	}

	.era-hub-collection {
		gap: 2.1rem;
	}

	.era-hub-piece--st,
	.era-hub-piece--afterparty,
	.era-hub-piece--trio {
		transform: none;
	}

	.era-hub-piece--st .era-hub-piece__object,
	.era-hub-piece--ttwf .era-hub-piece__object,
	.era-hub-piece--afterparty .era-hub-piece__object,
	.era-hub-piece--trio .era-hub-piece__object {
		transform: rotate(0deg);
	}

	.era-hub-piece--st {
		margin-right: 0;
	}

	.era-hub-piece--afterparty {
		margin-right: 0;
	}

	.era-hub-tape--b,
	.era-hub-tape--c {
		width: 1.7rem;
	}

	.era-hub-piece--ihh img {
		aspect-ratio: 4 / 3;
		object-position: 68% 40%;
	}
}