/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff8f7; }
::-webkit-scrollbar-thumb { background: #c0181e; border-radius: 3px; }

/* Base */
body { font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }

/* Glassmorphism nav */
.glass-nav { background: rgba(255,248,247,0.80); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Featured gradient card */
.featured-card { background: linear-gradient(135deg, #c0181e 0%, #8b0000 100%); }

/* Article card hover */
.article-card { transition: all 0.25s ease; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(192,24,30,0.10); }

/* Filter pills */
.filter-btn { transition: all 0.2s ease; }
.filter-btn.active { background-color: #c0181e; color: #fff; border-color: #c0181e; }

/* Prose — body article */
.prose { line-height: 1.85; color: #201a1a; }
.prose h2 { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 0.6rem; color: #c0181e; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.4rem 0 0.4rem; }
.prose p  { margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose a  { color: #c0181e; text-decoration: underline; }
.prose img { max-width: 100%; border-radius: 12px; margin: 1.2rem 0; }
.prose blockquote {
    border-left: 4px solid #c0181e; padding-left: 1rem;
    color: #775653; font-style: italic; margin: 1.2rem 0;
}
.prose hr { border-color: #d9bfbe; margin: 2rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prose th, .prose td { border: 1px solid #d9bfbe; padding: 8px 12px; text-align: left; }
.prose th { background: #fdecea; font-weight: 600; }

/* Hide scrollbar for horizontal nav tabs */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Fade-up animation */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.5s ease forwards; }
.fade-up-1 { animation-delay:0.05s; opacity:0; }
.fade-up-2 { animation-delay:0.15s; opacity:0; }
.fade-up-3 { animation-delay:0.25s; opacity:0; }