/* === Design Tokens === */
:root {
    --bg-beige: #E8E6E1;
    --deep-brown: #2C1810;
    --soviet-red: #C72A09;
    --border-gray: #D9D9D9;
    --dark-hero: #1B0E0D;
}

/* === Reset & Base === */
*, ::before, ::after {
    box-sizing: border-box;
}

body {
    font-family: 'General Sans', sans-serif;
    background-color: var(--bg-beige);
    color: var(--deep-brown);
    margin: 0;
    padding: 0;
    cursor: crosshair;
}

/* === Typography === */
.clash-display {
    font-family: 'Clash Grotesk', sans-serif;
    letter-spacing: -0.04em;
    line-height: 0.85;
    text-transform: uppercase;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

/* === Noise Overlay === */
.noise-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.08;
    mix-blend-mode: multiply;
}

/* === Grid === */
.asymmetric-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

/* === Card Hover === */
.card-hover:hover .card-title {
    color: var(--soviet-red);
}

.card-hover:hover .card-image {
    transform: scale(1.02);
}

.card-scale {
    transition: transform 0.3s ease;
}

.card-scale:hover {
    transform: scale(1.01);
}

/* === Red Underline Animation === */
.red-underline-anim {
    position: relative;
}

.red-underline-anim::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background-color: var(--soviet-red);
    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.red-underline-anim:hover::after {
    width: 100%;
}

/* === Table Row Hover === */
.table-row-hover:hover {
    background-color: rgba(199, 42, 9, 0.05);
}

/* === Volume Card === */
.volume-card {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.volume-card:hover {
    border-color: var(--soviet-red);
    transform: translateY(-4px);
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-beige);
}

::-webkit-scrollbar-thumb {
    background: var(--deep-brown);
}

/* === Navigation Active State === */
.nav-active {
    color: var(--soviet-red) !important;
}