/* =========================================
   1. VARIABLES & PALETTE
   ========================================= */
:root {
    --bg-dark: #0A0A0A;       /* Soft Black */
    --bg-black: #000000;      /* True Black */
    --neutral-slate: #51565D; /* 50% Gray */
    --neutral-light: #D9D9D9; /* 20% Gray */
    --accent-purple: #2E132E; /* Deep Velvet */
    --accent-burgundy: #5D2332; /* Rose Red */
    --text-silver: #C0C0C0;   /* Silver Text */
    --text-white: #F0F0F0;
}

/* =========================================
   2. GLOBAL TYPOGRAPHY
   ========================================= */
body {
    background-color: var(--bg-dark);
    font-family: 'Lato', sans-serif;
    color: var(--text-silver);
}

h1, h2, h3, .h1, .h2, .h3, .display-1 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1px;
}

/* =========================================
   3. HERO SECTION
   ========================================= */
.hero-section {
    height: 90vh; /* 90% of screen height */
    /* Note: '..' moves up one folder out of css/ to find the image */
    background-image: url('../art/hero-banner.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Darkens the image */
    z-index: 1;
}

.hero-content {
    z-index: 2;
}

.main-title {
    color: var(--text-silver);
    text-shadow: 2px 2px 15px rgba(0,0,0,1);
}

.tagline {
    color: var(--text-white);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 1.1rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

/* Custom Button Style */
.btn-custom {
    border: 1px solid var(--text-silver);
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 15px 40px;
    border-radius: 0; /* Sharp corners */
    transition: all 0.4s ease;
    background: rgba(0,0,0,0.5); /* Semi-transparent background */
}

.btn-custom:hover {
    background-color: var(--accent-burgundy);
    border-color: var(--accent-burgundy);
    color: #fff;
    box-shadow: 0 0 15px rgba(93, 35, 50, 0.6); /* Glow effect */
}

/* =========================================
   4. VICTORIAN DIVIDER (Fixed)
   ========================================= */
.ornamental-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 600px;
    margin: 0 auto; /* Center it */
    padding: 2rem 0;
}

.ornamental-divider .line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--text-silver), transparent);
}

.ornamental-divider .diamond {
    width: 12px;
    height: 12px;
    background-color: var(--accent-burgundy);
    margin: 0 15px;
    transform: rotate(45deg);
    box-shadow: 0 0 8px var(--accent-burgundy);
}

/* =========================================
   5. MUSEUM PRODUCT CARDS
   ========================================= */
.section-slate {
    background-color: var(--neutral-slate);
    /* Add a subtle top shadow inside the section */
    box-shadow: inset 0 10px 20px -10px rgba(0,0,0,0.8);
}

.museum-card {
    background-color: var(--bg-dark);
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* The Hover Effect - Lifts up */
.museum-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    border-color: var(--accent-burgundy);
}

.card-img-placeholder {
    height: 300px;
    background-color: #222; /* Dark placeholder */
    width: 100%;
}

.card-title {
    color: var(--text-silver);
}

.price-text {
    color: var(--accent-burgundy);
    font-weight: 700;
    font-size: 1.2rem;
    font-family: 'Lato', sans-serif;
}

/* =========================================
   6. THE ATELIER & FOOTER
   ========================================= */
.section-purple {
    background-color: var(--accent-purple);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.about-text {
    line-height: 1.8;
    color: #dcdcdc; /* Slightly off-white for readability */
}

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

.hover-burgundy:hover {
    color: var(--accent-burgundy) !important;
    transition: color 0.3s;
}