/* 4th of July Theme — Red, white & blue patriotic */

:root {
    --font-headline: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Serif 4', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --color-ink: #002868;
    --color-paper: #f8f9fa;
    --color-rule: #002868;
    --color-rule-light: #dce3f0;
    --color-accent: #b22234;
    --color-muted: #5a6d8a;
}

body {
    background: #f8f9fa;
    color: var(--color-ink);
}

a { color: #002868; }
a:hover { color: #b22234; }

/* Masthead — patriotic banner */
.masthead {
    background: #0a1628;
    border-bottom: 4px solid #b22234;
    position: relative;
}
.masthead-title a { color: #fff !important; }
.masthead-subtitle { color: rgba(255,255,255,0.7); font-weight: 600; }
.masthead-date { color: rgba(255,255,255,0.6); }
.masthead::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 4px;
    background: #002868;
}
.masthead-rule { border-color: #002868; }

/* Nav — navy blue */
.category-nav { background: #002868; }
.category-nav .cat-link.active { background: rgba(255,255,255,0.2); }

/* Lead */
.lead-article { border-color: var(--color-rule-light); }
.lead-article .lead-headline { color: #002868; }
.lead-article .lead-headline a { color: #002868; }
.lead-article .lead-headline a:hover { color: #b22234; }

/* Sidebar */
.sidebar-story { border-color: var(--color-rule-light); }
.sidebar-story .sidebar-headline a { color: #002868; }
.sidebar-story .sidebar-headline a:hover { color: #b22234; }

/* Grid */
.grid-article { border-color: var(--color-rule-light); }
.grid-headline a { color: #002868; }
.grid-headline a:hover { color: #b22234; }
.grid-category { color: #b22234; font-weight: 700; }
.section-label { color: #b22234; }
.section-rule { border-color: #002868; }

/* Article page */
.article-page-headline { color: #002868; }
.article-content h2, .article-content h3 { color: #002868; }
.article-content blockquote { border-color: #b22234; }

/* Pagination */
.pagination .active .page-link { background: #002868; border-color: #002868; }
.pagination .page-link:hover { background: #dce3f0; }

/* Footer */
.newspaper-footer { background: #002868; }

/* Stars decoration on masthead */
.masthead-title a::before {
    content: '\2605 ';
    color: #b22234;
    font-size: 0.6em;
}
.masthead-title a::after {
    content: ' \2605';
    color: #b22234;
    font-size: 0.6em;
}

/* --- Fireworks --- */
.masthead { overflow: hidden; }

.fireworks-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.firework-burst {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: firework-rise linear forwards, firework-burst ease-out forwards;
}

.firework-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px currentColor;
    animation: spark-fade ease-out forwards;
}

@keyframes firework-rise {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-60px); opacity: 0; }
}

@keyframes spark-fade {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}