:root {
	--jec-ink: #1a1d23;
	--jec-ink-muted: #4b5563;
	--jec-paper: #f6f2ea;
	--jec-paper-strong: #efe7da;
	--jec-accent: #d1493f;
	--jec-accent-dark: #b53931;
	--jec-tea: #2f6d5a;
	--jec-shadow: 0 18px 40px rgba(22, 25, 35, 0.12);
}

body {
	background: #ffffff;
}

.jec-main {
	color: var(--jec-ink);
	line-height: 1.7;
	padding: 2.5rem 1rem 4rem;
}

.jec-title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	letter-spacing: 0.02em;
	margin-bottom: 1rem;
}

.jec-main h1:not(.jec-title),
.jec-main h2:not(.jec-title),
.jec-main h3:not(.jec-title),
.jec-main h4:not(.jec-title),
.jec-main h5:not(.jec-title),
.jec-main h6:not(.jec-title) {
	background-color: #e3f0ff;
	border-radius: 8px;
	padding: 0.35rem 0.6rem;
}

.jec-hero {
	border-radius: 24px;
	box-shadow: var(--jec-shadow);
	border: 1px solid rgba(26, 29, 35, 0.08);
}

.starter-template > p {
	color: var(--jec-ink-muted);
}

.alert-primary {
	background: linear-gradient(120deg, rgba(209, 73, 63, 0.15), rgba(47, 109, 90, 0.12));
	border: 1px solid rgba(26, 29, 35, 0.12);
	color: var(--jec-ink);
	letter-spacing: 0.03em;
}

.jec-main a {
	color: var(--jec-accent);
	text-decoration: none;
}

.jec-main a:hover,
.jec-main a:focus {
	color: var(--jec-accent-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.accordion-item {
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(22, 25, 35, 0.08);
	border: 0;
	overflow: hidden;
}

.accordion-button {
	background-color: #cfe6ff;
	color: var(--jec-ink);
	font-weight: 600;
	border: 0;
	box-shadow: none;
	outline: 0;
}

.accordion-button:not(.collapsed) {
	background-color: #9fc7ff;
	color: var(--jec-ink);
	box-shadow: none;
	border-color: #8bb8ef;
}

.accordion-button:focus {
	box-shadow: none;
	outline: 0;
}

.accordion-button:focus-visible {
	outline: 0;
	box-shadow: none;
}

.accordion-header {
	border: 0;
}

.accordion-collapse,
.accordion-body {
	border-color: #c6ddf5;
}

.accordion-body {
	background-color: #fff;
}

.img-thumbnail {
	border-radius: 16px;
	border: 1px solid rgba(26, 29, 35, 0.12);
	box-shadow: 0 12px 26px rgba(22, 25, 35, 0.12);
}

.jec-grid .col-3,
.jec-thumbs .col-3 {
	margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
	.jec-grid .col-3,
	.jec-thumbs .col-3 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}