/* ========== Editorial / Neo-Brutalist Theme ========== */

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

/* ===== BACKGROUND TEXTURE — Newsprint grain ===== */
body {
    background-color: #F5F0E6;
    color: #7A6855;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.48 0 0 0 0 0.41 0 0 0 0 0.33 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.25;
    pointer-events: none;
    z-index: 9999;
}

/* ===== ACCENT TEXT ===== */
.accent-text {
    color: #E85D3C;
}

/* ===== EDITORIAL BORDER UTILITIES ===== */
.border-editorial {
    border: 2px solid #7A6855;
}

.border-editorial-thin {
    border: 1.5px solid #7A6855;
}

/* ===== BRUTALIST CARD ===== */
.brutal-card {
    background: #FFFFFF;
    border: 2px solid #7A6855;
    border-radius: 0px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 3px 3px 0px #7A6855;
}

.brutal-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #7A6855;
}

.brutal-card-accent {
    background: #E85D3C;
    border: 2px solid #7A6855;
    border-radius: 0px;
    box-shadow: 3px 3px 0px #7A6855;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brutal-card-accent:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #7A6855;
}

/* ===== BRUTALIST BUTTON ===== */
.brutal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: #7A6855;
    color: #F5F0E6;
    border: 2px solid #7A6855;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 2px 2px 0px #E85D3C;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}

.brutal-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #E85D3C;
}

.brutal-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #E85D3C;
}

.brutal-btn-outline {
    background: transparent;
    color: #5A4635;
    box-shadow: 2px 2px 0px #7A6855;
}

.brutal-btn-outline:hover {
    background: #7A6855;
    color: #F5F0E6;
}

.brutal-btn-accent {
    background: #E85D3C;
    color: #FFFFFF;
    box-shadow: 2px 2px 0px #7A6855;
}

.brutal-btn-accent:hover {
    box-shadow: 4px 4px 0px #7A6855;
}

/* ===== SECTION DIVIDER — Thick Rule ===== */
.section-rule {
    border-top: 2px solid #7A6855;
}

.section-rule-thin {
    border-top: 1.5px solid #7A6855;
}

/* ===== ANIMATIONS ===== */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.12s; }
.stagger > *:nth-child(4) { animation-delay: 0.16s; }
.stagger > *:nth-child(5) { animation-delay: 0.20s; }
.stagger > *:nth-child(6) { animation-delay: 0.24s; }
.stagger > *:nth-child(7) { animation-delay: 0.28s; }
.stagger > *:nth-child(8) { animation-delay: 0.32s; }

/* ===== VERTICAL TEXT (used for section labels) ===== */
.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F5F0E6; }
::-webkit-scrollbar-thumb { background: #7A6855; border: 2px solid #F5F0E6; }

/* ===== HIDDEN SCROLLBAR ===== */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ===== LINE CLAMP ===== */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== PATTERN BACKGROUNDS ===== */
.pattern-dots {
    background-image: radial-gradient(circle, #7A6855 1.5px, transparent 1.5px);
    background-size: 16px 16px;
}

.pattern-stripes {
    background: repeating-linear-gradient(
        45deg,
        #7A6855,
        #7A6855 2px,
        transparent 2px,
        transparent 10px
    );
}

/* ===== BADGE / TAG ===== */
.brutal-tag {
    display: inline-block;
    padding: 3px 10px;
    border: 2px solid #7A6855;
    background: #F5F0E6;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7A6855;
}

.brutal-tag-accent {
    background: #E85D3C;
    color: #FFFFFF;
}

.brutal-tag-dark {
    background: #7A6855;
    color: #F5F0E6;
}

/* ===== HEADING LARGE (editorial masthead) ===== */
.masthead {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.95;
}

/* ===== UTILITY: press effect ===== */
.press-effect {
    text-shadow: 1px 1px 0 #7A6855;
}