/* =========================================
   GLOBAL RESETS & TYPOGRAPHY
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
    cursor: none; 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, var(--bg-dark) 60%);
}

h1, h2, h3, h4, .brand-logo {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
}

.editorial-text {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 1px;
}

button, input {
    font-family: 'Space Grotesk', sans-serif;
    background: none; 
    border: none; 
    outline: none; 
    color: inherit;
}

/* =========================================
   VISUAL ELEMENTS (NOISE & CURSOR)
   ========================================= */
.bg-noise {
    position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.05;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

.custom-cursor {
    position: fixed; top: 0; left: 0; width: 16px; height: 16px;
    background-color: var(--accent-pop);
    border-radius: 50%; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
    mix-blend-mode: difference;
    opacity: 0; 
}

.custom-cursor.hovering {
    width: 60px; height: 60px;
    background-color: #fff;
}

@media (hover: none) and (pointer: coarse) {
    *, *::before, *::after { cursor: auto !important; }
    .custom-cursor { display: none !important; }
}