:root {
    --sg-red: #c8102e;
    --sg-white: #ffffff;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
}

body {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
}

.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.text-sg-red {
    color: var(--sg-red);
}

.bg-sg-red {
    background-color: var(--sg-red);
}

.nav-link {
    position: relative;
    padding: 8px 4px;
    font-weight: 500;
    color: #4b5563; /* text-gray-600 */
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--sg-red);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #111827; /* text-gray-900 */
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--sg-red);
    font-weight: 700;
}

.nav-link.active::after {
    width: 100%;
}

.chapter-card {
    @apply block rounded-lg overflow-hidden shadow-lg relative transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl;
}

.chapter-image {
    @apply w-full h-64 object-cover;
}

.chapter-overlay {
    @apply absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center p-4;
}

.chapter-title {
    @apply text-white text-2xl font-bold font-serif text-center;
}

.gallery-item {
    @apply bg-gray-100 rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-xl;
}

.gallery-item img {
    @apply w-full h-48 object-cover;
}

.gallery-item-caption {
    @apply p-4 text-sm text-gray-700;
}