:root {
	--blockquote-bg: #f3e8ff;
	--blockquote-text: #3c366b;
	--blockquote-border: #805ad5;
	--blockquote-link: #9f7aea;
	--blockquote-hover: #5a67d8;
	--anecdote-bg: #faf5ff;
	--anecdote-text: #4a5568;
	--anecdote-border: #d69e2e;
	--anecdote-link: #b7791f;
	--figcaption-bg: #f3e8ff;
	--highlight-bg: #fff5f7;
	--highlight-text: #2d3748;
	--highlight-border: #d53f8c;
}

/* Blockquote styling */
blockquote {
	background-color: var(--blockquote-bg) !important;
	color: var(--blockquote-text) !important;
	border-left: 4px solid var(--blockquote-border);
	font-style: italic;
	padding: 1.25em 1.75em;
	margin: 1.5em 0;
	line-height: 1.6;
	border-radius: 6px;
	font-family: Georgia, serif;
	font-size: 1.05em;
	position: relative;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

blockquote a {
	color: var(--blockquote-link);
	text-decoration: underline;
}

blockquote a:hover {
	color: var(--blockquote-hover);
}

blockquote cite {
	display: block;
	font-style: normal;
	color: #d1d1d1;
	font-size: 0.875rem;
	margin-top: 0.75em;
}

blockquote cite:before {
	content: "— ";
}

/* Anecdote box styling */
.anecdote {
	background-color: var(--anecdote-bg) !important;
	color: var(--anecdote-text) !important;
	border-left: 4px solid var(--anecdote-border);
	font-style: normal;
	font-size: 1.05em;
	padding: 1.25em 1.75em;
	margin: 1.5em 0;
	line-height: 1.6;
	border-radius: 6px;
	font-family: "Helvetica Neue", sans-serif;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.anecdote p {
	color: inherit !important;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.anecdote a {
	color: var(--anecdote-link);
	font-weight: 500;
}

/* Figure styling */
figure {
	margin: 2em 0;
	text-align: center;
	overflow-x: auto;
}

figure img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

figcaption {
	margin-top: 0.75em;
	font-size: 0.95em;
	color: #d1d1d1;
	text-align: center;
	font-style: italic;
	font-family: Georgia, serif;
	background-color: var(--figcaption-bg);
	padding: 0.5em 0.75em;
	border-radius: 6px;
	display: inline-block;
	max-width: 90%;
}

/* Lists */
ol,
ul {
	padding-left: 1.5em;
	margin: 1.5em 0;
	line-height: 1.6;
}

ol li,
ul li {
	margin-bottom: 0.75em;
}

ol {
	counter-reset: list-counter;
	list-style: none;
	padding-left: 1.5em;
}

ol li {
	counter-increment: list-counter;
	position: relative;
	margin-bottom: 0.75em;
}

ol li::before {
	content: counter(list-counter) ". ";
	position: absolute;
	left: -1.5em;
	color: var(--blockquote-border);
	font-weight: bold;
}

/* Image */
.inline-image {
	max-width: 65%;
	height: auto;
	display: block;
	margin: 1.5em auto;
	border-radius: 4px;
}

/* Highlight block */
.highlight-block {
	background-color: var(--highlight-bg) !important;
	color: var(--highlight-text) !important;
	border: 1px solid var(--highlight-border);
	padding: 1.25em 1.75em;
	margin: 1.5em 0;
	font-style: normal;
	font-size: 1.05em;
	border-radius: 6px;
	font-family: "Courier New", monospace;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	text-align: center;
}

.highlight-block,
.highlight-block * {
	color: var(--highlight-text) !important;
}

.hero-section {
	text-align: center;
	margin-bottom: 2em;
}

.hero-title {
	font-size: 2.25rem;
	margin-bottom: 1em;
	color: var(--blockquote-border);
	/* Or define a separate --hero-title-color */
}

.hero-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

main {
	padding: 0 1rem;
}

.site-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.site-left {
	flex: 0 0 160px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-logo {
	max-width: 140px;
	height: auto;
}

.site-right {
	flex: 1;
	min-width: 200px;
	text-align: left;
}

.site-title {
	margin-bottom: 0.25em;
	font-size: 2.25rem;
	text-align: left;
}

.site-tagline {
	margin-bottom: 1em;
	font-style: italic;
	color: #666;
	text-align: left;
}

.site-intro {
	max-width: 700px;
	margin: 0 0 2rem 0;
	text-align: left;
}