/* ======================================
   TYPOGRAPHY STYLES - BOURBON STREET
   ====================================== */

/* Base typography */
body {
	font-family: 'Crimson Text', serif;
	color: var(--white);
	font-size: 19px;
	line-height: 1.6;
	font-weight: 400;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Crimson Pro', serif;
	margin-top: 0;
	color: var(--white);
}

/* H1 - Crimson Pro Black 77px - Used for big header titles */
h1 {
	font-size: 77px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* H2 - Crimson Pro Black 58px - Used for secondary titles */
h2 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

/* H3 - Crimson Pro Bold 43px - Used for tertiary titles */
h3 {
	font-size: 43px;
	font-weight: 600;
	line-height: 1.3;
}

h4 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 15px;
	text-transform: uppercase;
}

/* Alt H3 - Crimson Text 48px - Used for tertiary titles with alt styling */
h3.alt {
	font-family: 'Crimson Text', serif;
	font-size: 48px;
	font-weight: 400;
}

/* Card titles - Crimson Text Bold/Regular 19px - Used on cards or subtitles */
.card-title {
	font-family: 'Crimson Text', serif;
	font-size: 19px;
	font-weight: 700;
}

.card-subtitle {
	font-family: 'Crimson Text', serif;
	font-size: 19px;
	font-weight: 400;
}

.sub-description {
	width: 60ch;
	max-width: 100%;
	margin: 0 auto;
}

/* Paragraphs - Crimson Text 17px Regular */
p {
	font-family: 'Crimson Text', serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
}

/* Anchor tag */
a {
	color: #E82626; 
}

a:hover {
	color: #9D1111;
}

/* ======================================
   RESPONSIVE TYPOGRAPHY
   ====================================== */

@media (max-width: 1200px) {
	h1 {
		font-size: 65px;
	}
	
	h2 {
		font-size: 50px;
	}
	
	h3 {
		font-size: 38px;
	}
	
	h3.alt {
		font-size: 42px;
	}
}

@media (max-width: 768px) {
	h1 {
		font-size: 48px;
	}
	
	h2 {
		font-size: 38px;
	}
	
	h3 {
		font-size: 32px;
	}
	
	h3.alt {
		font-size: 36px;
	}
	
	.card-title,
	.card-subtitle {
		font-size: 17px;
	}
	
	p {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 36px;
	}
	
	h2 {
		font-size: 30px;
	}
	
	h3 {
		font-size: 26px;
	}
	
	h3.alt {
		font-size: 28px;
	}
	
	.card-title,
	.card-subtitle {
		font-size: 16px;
	}
	
	p {
		font-size: 15px;
	}
}