/* themjdb home page tokens — adapted from the new design system */

:root {
	/* COLOR */
	--mjdb-bg: #ffffff;
	--mjdb-ink: #111111;
	--mjdb-ink-2: #2a2a2a;
	--mjdb-ink-3: #6b6b6b;
	--mjdb-ink-4: #9a9a9a;
	--mjdb-rule: #e6e6e6;
	--mjdb-rule-strong: #cfcfcf;
	--mjdb-surface: #fafafa;
	--mjdb-surface-2: #f3f3f3;

	--mjdb-gold: #d4a017;
	--mjdb-gold-ink: #8a6705;
	--mjdb-gold-soft: #f7ecc9;

	--mjdb-red: #b80000;
	--mjdb-red-deep: #8d0000;
	--mjdb-red-soft: #fae6e6;

	/* TYPE */
	--mjdb-font-display: "Barlow Condensed", "Oswald", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--mjdb-font-body: "gotham_lightregular", "Helvetica Neue", "Arial", sans-serif;
	--mjdb-font-body-medium: "gotham_mediumregular", "Helvetica Neue", "Arial", sans-serif;
	--mjdb-font-script: "Pinyon Script", "Allura", "Great Vibes", cursive;
	--mjdb-font-mono: "gotham_mediumregular", ui-monospace, "SFMono-Regular", monospace;
}

.home-page {
	font-family: var(--mjdb-font-body);
	font-size: 14px;
	color: var(--mjdb-ink);
}

.home-page .pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--mjdb-font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--mjdb-surface-2);
	color: var(--mjdb-ink-2);
	border: 1px solid var(--mjdb-rule);
}
.home-page .pill--gold  { background: var(--mjdb-gold-soft); color: var(--mjdb-gold-ink); border-color: transparent; }
.home-page .pill--red   { background: var(--mjdb-red);       color: #fff;                 border-color: transparent; }
.home-page .pill--ink   { background: var(--mjdb-ink);       color: #fff;                 border-color: var(--mjdb-ink); }

.home-page .meta {
	font-family: var(--mjdb-font-body);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11px;
	color: var(--mjdb-ink-3);
}

.home-page .link-more {
	font-family: var(--mjdb-font-body);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11px;
	color: var(--mjdb-ink-2);
	border-bottom: 1px solid var(--mjdb-ink);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
}
.home-page .link-more:hover { color: var(--mjdb-gold-ink); border-color: var(--mjdb-gold); }

.home-page .section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mjdb-rule);
	margin-bottom: 24px;
}

.home-page .section-head h2 {
	margin: 0;
	font-family: var(--mjdb-font-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 14px;
	color: var(--mjdb-ink);
	border: 0;
	padding: 0;
}

.home-page .section-head .count {
	font-family: var(--mjdb-font-mono);
	font-size: 11px;
	color: var(--mjdb-ink-4);
}

.home-page .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-family: var(--mjdb-font-body);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid var(--mjdb-ink);
	background: var(--mjdb-ink);
	color: #fff;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.home-page .btn:hover { background: var(--mjdb-gold); border-color: var(--mjdb-gold); color: var(--mjdb-ink); }
.home-page .btn--ghost { background: transparent; color: var(--mjdb-ink); }
.home-page .btn--ghost:hover { background: var(--mjdb-ink); color: #fff; }
.home-page .btn--gold  { background: var(--mjdb-gold); border-color: var(--mjdb-gold); color: var(--mjdb-ink); }
.home-page .btn--gold:hover  { background: var(--mjdb-ink); border-color: var(--mjdb-ink); color: #fff; }
.home-page .btn--white { background: #fff; border-color: #fff; color: var(--mjdb-ink); }
.home-page .btn--white:hover { background: var(--mjdb-gold); border-color: var(--mjdb-gold); color: var(--mjdb-ink); }