/*
 * The MJDb base design system.
 * Approved from docs/mjdb-brand-guidelines-one-page.html on 2026-05-11.
 *
 * Purpose: provide shared tokens and calm global defaults only. Page-specific
 * templates can then be brought into line one by one without another redesign.
 */

:root {
	--mjdb-ink: #111111;
	--mjdb-text: #2f2f2f;
	--mjdb-body: #535353;
	--mjdb-muted: #777777;
	--mjdb-soft: #f7f7f7;
	--mjdb-paper: #ffffff;
	--mjdb-line: #e7e7e7;
	--mjdb-line-table: #eeeeee;
	--mjdb-gold: #b08320;
	--mjdb-gold-soft: #f3ead7;
	--mjdb-red: #b80000;
	--mjdb-black-panel: #0a0a0a;

	--mjdb-font-light: 'gotham_lightregular', Arial, sans-serif;
	--mjdb-font-book: 'gotham_bookregular', Arial, sans-serif;
	--mjdb-font-medium: 'gotham_mediumregular', Arial, sans-serif;
	--mjdb-font-bold: 'gotham_boldregular', Arial, sans-serif;

	--mjdb-page-max: 1500px;
	--mjdb-radius-sm: 3px;
	--mjdb-space-xs: 4px;
	--mjdb-space-sm: 8px;
	--mjdb-space-md: 16px;
	--mjdb-space-lg: 24px;
	--mjdb-space-xl: 32px;
	--mjdb-space-xxl: 48px;
}

body {
	background: var(--mjdb-paper);
	color: var(--mjdb-body);
	font-family: var(--mjdb-font-light);
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wrapper {
	max-width: var(--mjdb-page-max);
	margin-left: auto;
	margin-right: auto;
}

body:not(.home) a {
	color: var(--mjdb-ink);
	text-decoration: none;
}

body:not(.home) .entry-content a,
body:not(.home) .page-content a,
body:not(.home) .mjdb-copy a {
	border-bottom: 1px solid rgba(176, 131, 32, 0.45);
}

body:not(.home) a:hover,
body:not(.home) a:focus {
	color: var(--mjdb-gold);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--mjdb-ink);
	font-weight: 400;
	line-height: 1.2;
}

#page-heading h1,
.entry-title,
.page-title {
	font-family: var(--mjdb-font-light);
	font-size: clamp(1.65rem, 2.2vw, 2.35rem);
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

.mjdb-section-title,
.album-section-title,
.aside-title,
.archive-heading,
.entry-content h2,
.page-content h2 {
	font-family: var(--mjdb-font-medium);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--mjdb-ink);
}

.entry-content h3,
.page-content h3,
.mjdb-card-title {
	font-family: var(--mjdb-font-medium);
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mjdb-ink);
}

.entry-content p,
.page-content p,
.mjdb-copy {
	color: var(--mjdb-body);
	font-family: var(--mjdb-font-light);
	font-size: 14px;
	line-height: 1.6;
}

.mjdb-intro,
.album-description {
	color: var(--mjdb-text);
	font-family: var(--mjdb-font-light);
	font-size: 1rem;
	line-height: 1.65;
}

.mjdb-label,
.meta-label,
.fact-label,
table th {
	color: var(--mjdb-muted);
	font-family: var(--mjdb-font-medium);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.09em;
	line-height: 1.25;
	text-transform: uppercase;
}

hr,
.mjdb-rule {
	border: 0;
	border-top: 1px solid var(--mjdb-line);
}

table {
	border-collapse: collapse;
	color: var(--mjdb-text);
	font-size: 13px;
	width: 100%;
}

table th {
	border-bottom: 1px solid var(--mjdb-line);
	padding: 11px 10px;
	text-align: left;
}

table td {
	border-bottom: 1px solid var(--mjdb-line-table);
	padding: 12px 10px;
	vertical-align: top;
}

table tr:hover td {
	background: #fafafa;
}

.mjdb-chip,
.genre-pill,
.album-chip,
.archive-filter-pill {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mjdb-line);
	background: var(--mjdb-paper);
	color: var(--mjdb-text);
	font-family: var(--mjdb-font-medium);
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	line-height: 1.2;
	padding: 5px 8px;
	text-transform: uppercase;
}

.mjdb-chip.is-accent,
.album-chip.is-accent {
	border-color: rgba(176, 131, 32, 0.35);
	background: var(--mjdb-gold-soft);
	color: var(--mjdb-gold);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.mjdb-button,
.button {
	border: 1px solid var(--mjdb-ink);
	border-radius: 0;
	background: var(--mjdb-paper);
	color: var(--mjdb-ink);
	font-family: var(--mjdb-font-medium);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.2;
	padding: 10px 14px;
	text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.mjdb-button:hover,
.button:hover {
	border-color: var(--mjdb-gold);
	color: var(--mjdb-gold);
}

.mjdb-panel,
.contribution-cta {
	background: var(--mjdb-soft);
	border: 1px solid var(--mjdb-line);
	color: var(--mjdb-text);
}

@media screen and (max-width: 700px) {
	.wrapper {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	#page-heading h1,
	.entry-title,
	.page-title {
		font-size: 1.55rem;
	}
}