/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Outfit:wght@100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes noise {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
}

/* === EFFECTS === */
.noise-bg::before {
    content: "";
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 9998;
    animation: noise 8s steps(10) infinite;
}

.brutalist-border {
    border: 3px solid #0a0a0a;
}

.brutalist-shadow {
    box-shadow: 8px 8px 0px 0px #0a0a0a;
}

.brutalist-shadow-hover:hover {
    box-shadow: 12px 12px 0px 0px #ff3e3e;
    transform: translate(-4px, -4px);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* module: gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0;
}

.gallery-item {
    aspect-ratio: 1/1;
    overflow: hidden;
    border: 1px solid #eee;
}

.gallery-item img {
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05) grayscale(1);
}

/* module: blog */
.prose h2 {
    font-family: 'Fraunces', serif;
    font-size: 2.5rem;
    font-weight: 900;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.prose p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}