/* =========================================================================
   3 · TYPOGRAPHY — Fraunces (display/headings) + Inter (body/UI)
   Reference: V4-BUILD-SPEC §3.2
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jj-font-serif);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--jj-text);
	margin: 0 0 var(--sp-4);
	text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); line-height: 1.1; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

/* Display headline — hero, About hero, Donate hero */
.jj-display {
	font-family: var(--jj-font-serif);
	font-size: var(--fs-display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0;
}
.jj-display--tight  { max-width: 22ch; }
.jj-display--narrow { max-width: 16ch; }

/* Utility heading classes (use when semantic h1–h6 isn't appropriate) */
.jj-h2 { font-family: var(--jj-font-serif); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2; margin: 0 0 var(--sp-4); }
.jj-h3 { font-family: var(--jj-font-serif); font-size: var(--fs-xl);  font-weight: 600; line-height: 1.25; margin: 0 0 var(--sp-3); }
.jj-h4 { font-family: var(--jj-font-serif); font-size: var(--fs-lg);  font-weight: 600; line-height: 1.3; margin: 0 0 var(--sp-3); }

/* Body paragraph */
p {
	margin: 0 0 var(--sp-4);
	text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }
em, i     { font-style: italic; }

small {
	font-size: var(--fs-sm);
	color: var(--jj-muted);
}

/* Eyebrow labels — small caps over section titles */
.jj-eyebrow {
	font-family: var(--jj-font-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jj-accent-terracotta);
	margin: 0 0 var(--sp-3);
}
.jj-eyebrow--gold   { color: var(--jj-accent-gold); }
.jj-eyebrow--white  { color: rgba(255, 255, 255, 0.85); }
.jj-eyebrow--center { text-align: center; }

/* Muted color helper — for captions, dates, meta */
.jj-muted    { color: var(--jj-muted); }
.jj-tabular  { font-variant-numeric: tabular-nums; }

/* Lead paragraph — sub-headline / intro text */
.jj-lead {
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--jj-text-soft);
	max-width: 60ch;
}

/* Blockquote */
blockquote {
	font-family: var(--jj-font-serif);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.4;
	color: var(--jj-text);
	margin: 0;
	padding-left: var(--sp-4);
	border-left: 3px solid var(--jj-accent-gold);
}
blockquote cite {
	display: block;
	margin-top: var(--sp-3);
	font-family: var(--jj-font-sans);
	font-size: var(--fs-sm);
	font-style: normal;
	font-weight: 500;
	color: var(--jj-muted);
}

/* Lists in editorial content */
.jj-prose ul,
.jj-prose ol {
	margin: 0 0 var(--sp-4) var(--sp-6);
	padding: 0;
}
.jj-prose li { margin-bottom: var(--sp-2); }

.jj-prose h2,
.jj-prose h3 {
	margin-top: var(--sp-10);
}
.jj-prose h2:first-child,
.jj-prose h3:first-child { margin-top: 0; }

.jj-prose img {
	margin: var(--sp-8) 0;
	border-radius: var(--radius-md);
}