:root {
    --color-brand-50: #faf7f1;
    --color-brand-100: #f2e9da;
    --color-brand-200: #e3d3b4;
    --color-brand-300: #cdb185;
    --color-brand-400: #b3905c;
    --color-brand-500: #8f6f42;
    --color-brand-600: #6f5734;
    --color-brand-700: #52402a;
    --color-brand-800: #2a221b;
    --color-brand-900: #14100c;

    --color-gold-50: #fdf9ec;
    --color-gold-100: #f8edc4;
    --color-gold-200: #f0da8c;
    --color-gold-300: #e5c15a;
    --color-gold-400: #d4a72f;
    --color-gold-500: #b8871f;
    --color-gold-600: #96691a;
    --color-gold-700: #744f18;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

.marquee-track:hover .animate-marquee {
    animation-play-state: paused;
}

.marquee-track {
    cursor: grab;
    touch-action: pan-y;
}

.marquee-track:active {
    cursor: grabbing;
}

.marquee-viewport {
    will-change: transform;
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gold-500);
}

.gold-divider {
    width: 3.5rem;
    height: 1px;
    background: var(--color-gold-400);
    margin-left: auto;
    margin-right: auto;
}

.btn-gold,
.btn-outline-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gold {
    background: var(--color-gold-500);
    color: var(--color-brand-900);
    padding: 0.75rem 2rem;
    box-shadow: 0 4px 20px -4px rgba(184, 135, 31, 0.5);
}

.btn-gold:hover {
    background: var(--color-gold-600);
}

.btn-outline-gold {
    border: 1px solid var(--color-gold-400);
    color: var(--color-gold-500);
    padding: 0.75rem 2rem;
}

.btn-outline-gold:hover {
    background: var(--color-gold-400);
    color: var(--color-brand-900);
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    -webkit-appearance: none;
}