@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --color-sand: #FDFBF7;
    --color-sand-dark: #F7F2E9;
    --color-terracotta: #C05C3D;
    --color-terracotta-dark: #A04A2F;
    --color-stone: #AB9F91;
    --color-slate: #2D2D2D;
    --color-slate-light: #4A4A4A;
}

body {
    background-color: var(--color-sand);
    color: var(--color-slate);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
    font-family: 'Playfair Display', serif;
}

/* Custom Utilities */
.bg-sand { background-color: var(--color-sand); }
.bg-sand-dark { background-color: var(--color-sand-dark); }
.text-terracotta { color: var(--color-terracotta); }
.bg-terracotta { background-color: var(--color-terracotta); }
.border-terracotta { border-color: var(--color-terracotta); }

/* Glassmorphism */
.glass {
    background: rgba(253, 251, 247, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(171, 159, 145, 0.2);
}

/* Image Grid */
.masonry-grid {
    column-count: 1;
    column-gap: 1.5rem;
}

@media (min-width: 640px) { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
@media (min-width: 1280px) { .masonry-grid { column-count: 4; } }

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* Transitions */
.transition-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1);
}

/* Category Pill Styling */
.category-pill {
    transition: all 0.2s ease;
}

.category-pill.active {
    background-color: var(--color-terracotta);
    color: white;
    box-shadow: 0 4px 12px rgba(192, 92, 61, 0.3);
}

/* Lightbox Animation */
.lightbox-backdrop {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Results Chart */
.bar-track {
    background: var(--color-sand-dark);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    background: var(--color-terracotta);
    height: 100%;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

[x-cloak] { display: none !important; }