:root {
    --bg-cream: #FFF8F0;
    --text-dark: #2C2C2C;
    --accent-terracotta: #E07A5F;
    --accent-teal: #3D405B;
    --accent-marigold: #F4F14E;
}
body { font-family: 'Poppins', sans-serif; background-color: var(--bg-cream); color: var(--text-dark); }
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }
.text-terracotta { color: var(--accent-terracotta); }
.bg-terracotta { background-color: var(--accent-terracotta); }
.border-terracotta { border-color: var(--accent-terracotta); }
.hover\:bg-terracotta-dark:hover { background-color: #D46A4D; }
.text-teal { color: var(--accent-teal); }
.bg-teal { background-color: var(--accent-teal); }
.bg-cream { background-color: var(--bg-cream); }
.bg-marigold { background-color: var(--accent-marigold); }
.hero-bg { background-image: url('https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center; }
.reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.modal-container { transition: opacity 0.3s ease; }
.modal-content { transition: transform 0.3s ease, opacity 0.3s ease; }
.class-card, .artwork-card, .student-gallery-item { text-align: left; background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; width: 100%; position: relative; } /* Added .student-gallery-item here */

.class-card-content { 
    transition: box-shadow 0.3s ease;
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}
.class-card:hover .class-card-content, .class-card:focus-visible .class-card-content { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.header-scrolled { background-color: var(--bg-cream); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.header-scrolled .mix-blend-difference { color: var(--text-dark); mix-blend-mode: normal; }

/* Styles for consistent arrow placement in class cards */
.class-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.class-title-text {
    flex-grow: 1;
    margin-right: 1rem;
}
.arrow-icon {
    flex-shrink: 0;
}

/* Artwork and Student Gallery Image Hover Effects */
.artwork-card img, .student-gallery-item img { /* Added .student-gallery-item img */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.artwork-card:hover img, .student-gallery-item:hover img { /* Added .student-gallery-item:hover img */
    transform: scale(1.05); /* Slightly zoom image */
    opacity: 0.8; /* Slightly dim the image when title/overlay is visible */
}