/*═══════════════════════════════════════════════════════════════════════════════
  Weekly Intelligence Briefing — Design System
  Matches deeCipher News newsprint aesthetic
═══════════════════════════════════════════════════════════════════════════════*/

:root {
    --br-bg: #faf8f5;
    --br-surface: #ffffff;
    --br-surface-dark: #f0ebe3;
    --br-ink: #1a1a1a;
    --br-ink-light: #4a4a4a;
    --br-ink-muted: #6b6560;
    --br-accent: #8b0000;
    --br-accent-hover: #a52a2a;
    --br-gold: #8b6914;
    --br-rule: #c0b8a8;
    --br-rule-dark: #9a9080;

    --br-left: #3b82f6;
    --br-center: #8b8b8b;
    --br-right: #ef4444;

    --br-tech: #3b82f6;
    --br-politics: #ef4444;
    --br-business: #22c55e;
    --br-science: #8b5cf6;
    --br-world: #f97316;
    --br-entertainment: #ec4899;
    --br-sports: #14b8a6;
    --br-health: #10b981;
    --br-cipherpunk: #a855f7;

    --br-font-display: 'Playfair Display', Georgia, serif;
    --br-font-body: 'Source Serif 4', Georgia, serif;
    --br-font-sans: 'Inter', -apple-system, sans-serif;
    --br-max-width: 1200px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--br-font-body);
    background: var(--br-bg);
    color: var(--br-ink);
    line-height: 1.7;
    min-height: 100vh;
}

a { color: var(--br-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Masthead now provided by shared nav.js + newsprint.css */

/* ═══════════════════════════════════════════════════════════════
   INTELLIGENCE SUMMARY BAR
═══════════════════════════════════════════════════════════════ */
.br-intel-bar {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #c8b89a;
    border-bottom: 1px solid rgba(200, 184, 154, 0.2);
}

.br-intel-inner {
    max-width: var(--br-max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}

.br-intel-num {
    display: block;
    font-family: var(--br-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: #e8d5b5;
}

.br-intel-label {
    font-family: var(--br-font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════════════════════ */
.br-main {
    max-width: var(--br-max-width);
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.br-section {
    margin-bottom: 2.5rem;
}

.br-section-title {
    font-family: var(--br-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    border-bottom: 2px solid var(--br-ink);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.br-section-desc {
    font-family: var(--br-font-sans);
    font-size: 0.82rem;
    color: var(--br-ink-muted);
    margin-bottom: 1.25rem;
}

.br-loading {
    text-align: center;
    padding: 2.5rem;
    color: var(--br-ink-muted);
    font-style: italic;
    font-family: var(--br-font-sans);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   LEAD STORY
═══════════════════════════════════════════════════════════════ */
.br-lead {
    margin: 2rem 0 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--br-rule);
}

.br-lead-label {
    font-family: var(--br-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--br-accent);
    margin-bottom: 1rem;
}

.br-lead-article {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.br-lead-category {
    font-family: var(--br-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.br-lead-category .cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.br-lead-headline {
    font-family: var(--br-font-display);
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.br-lead-headline a { color: var(--br-ink); }
.br-lead-headline a:hover { color: var(--br-accent); text-decoration: none; }

.br-lead-meta {
    font-family: var(--br-font-sans);
    font-size: 0.78rem;
    color: var(--br-ink-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.br-bias-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--br-font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    border: 1px solid;
}

.br-bias-tag.left { color: var(--br-left); border-color: var(--br-left); background: rgba(59,130,246,0.06); }
.br-bias-tag.center { color: var(--br-center); border-color: var(--br-center); background: rgba(139,139,139,0.06); }
.br-bias-tag.right { color: var(--br-right); border-color: var(--br-right); background: rgba(239,68,68,0.06); }
.br-bias-tag.center-left { color: #6b8ecf; border-color: #6b8ecf; background: rgba(107,142,207,0.06); }
.br-bias-tag.center-right { color: #cf6b6b; border-color: #cf6b6b; background: rgba(207,107,107,0.06); }

.br-lead-summary {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--br-ink-light);
    margin-bottom: 1rem;
}

.br-lead-insight {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #c8b89a;
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.65;
    border-left: 3px solid #8b6914;
}

.br-lead-insight::before {
    content: 'deeCipher Decoded';
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    color: #d4a853;
}

/* ═══════════════════════════════════════════════════════════════
   NARRATIVE PULSE (compare_narratives)
═══════════════════════════════════════════════════════════════ */
.br-narrative-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.br-narrative-topic {
    border: 1px solid var(--br-rule);
    border-radius: 6px;
    overflow: hidden;
    background: var(--br-surface);
}

.br-narrative-topic-header {
    padding: 0.75rem 1rem;
    background: var(--br-surface-dark);
    border-bottom: 1px solid var(--br-rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.br-narrative-topic-name {
    font-family: var(--br-font-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.br-narrative-topic-count {
    font-family: var(--br-font-sans);
    font-size: 0.72rem;
    color: var(--br-ink-muted);
}

.br-narrative-perspectives {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
}

.br-narrative-perspective {
    padding: 1rem;
    border-right: 1px solid var(--br-rule);
}

.br-narrative-perspective:last-child { border-right: none; }

.br-perspective-label {
    font-family: var(--br-font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid;
}

.br-perspective-label.left { color: var(--br-left); border-color: var(--br-left); }
.br-perspective-label.center { color: var(--br-center); border-color: var(--br-center); }
.br-perspective-label.right { color: var(--br-right); border-color: var(--br-right); }

.br-perspective-item {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.br-perspective-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.br-perspective-item-title {
    font-family: var(--br-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.br-perspective-item-title a { color: var(--br-ink); }
.br-perspective-item-title a:hover { color: var(--br-accent); }

.br-perspective-item-meta {
    font-family: var(--br-font-sans);
    font-size: 0.7rem;
    color: var(--br-ink-muted);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.br-similarity-badge {
    font-family: var(--br-font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: rgba(139,105,20,0.1);
    color: var(--br-gold);
}

.br-perspective-empty {
    font-family: var(--br-font-sans);
    font-size: 0.82rem;
    color: var(--br-ink-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   SPECTRUM DISTRIBUTION
═══════════════════════════════════════════════════════════════ */
.br-spectrum {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 600px;
}

.br-spectrum-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: 0.75rem;
}

.br-spectrum-label {
    font-family: var(--br-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: right;
}

.br-spectrum-bar-wrap {
    height: 22px;
    background: var(--br-surface-dark);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.br-spectrum-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.br-spectrum-bar.left { background: var(--br-left); }
.br-spectrum-bar.center-left { background: #6b8ecf; }
.br-spectrum-bar.center { background: var(--br-center); }
.br-spectrum-bar.center-right { background: #cf6b6b; }
.br-spectrum-bar.right { background: var(--br-right); }

.br-spectrum-count {
    font-family: var(--br-font-sans);
    font-size: 0.75rem;
    color: var(--br-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   DECODED INSIGHTS (article cards)
═══════════════════════════════════════════════════════════════ */
.br-insights-group {
    margin-bottom: 2rem;
}

.br-insights-group-title {
    font-family: var(--br-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--br-ink-muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--br-rule);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.br-insights-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.br-insight-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--br-rule);
}

.br-insight-card:last-child { border-bottom: none; padding-bottom: 0; }

.br-insight-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.br-insight-card-body { flex: 1; }

.br-insight-card-title {
    font-family: var(--br-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.br-insight-card-title a { color: var(--br-ink); }
.br-insight-card-title a:hover { color: var(--br-accent); text-decoration: none; }

.br-insight-card-meta {
    font-family: var(--br-font-sans);
    font-size: 0.75rem;
    color: var(--br-ink-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.br-insight-card-summary {
    font-size: 0.92rem;
    color: var(--br-ink-light);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.br-insight-card-decoded {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #c8b89a;
    padding: 0.85rem 1rem;
    border-radius: 5px;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.6;
    border-left: 3px solid #8b6914;
}

.br-insight-card-decoded::before {
    content: '';
    font-style: normal;
}

.br-sentiment-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.br-sentiment-dot.positive { background: #22c55e; }
.br-sentiment-dot.negative { background: #ef4444; }
.br-sentiment-dot.neutral { background: #8b8b8b; }
.br-sentiment-dot.mixed { background: #f97316; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.br-footer {
    border-top: 3px double var(--br-ink);
    max-width: var(--br-max-width);
    margin: 0 auto;
}

.br-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
}

.br-footer-brand h4 {
    font-family: var(--br-font-display);
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.br-footer-brand p {
    font-family: var(--br-font-sans);
    font-size: 0.78rem;
    color: var(--br-ink-muted);
}

.br-footer-share {
    display: flex;
    gap: 0.5rem;
}

.br-share-btn {
    font-family: var(--br-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--br-rule);
    border-radius: 4px;
    color: var(--br-ink);
    transition: all 0.2s;
}

.br-share-btn:hover {
    background: var(--br-ink);
    color: var(--br-bg);
    text-decoration: none;
}

.br-footer-bottom {
    text-align: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--br-rule);
    font-family: var(--br-font-sans);
    font-size: 0.75rem;
    color: var(--br-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .br-masthead-inner { padding: 1rem; }
    .br-masthead-top { flex-direction: column; gap: 0.25rem; }
    .br-nav { gap: 0.75rem; flex-wrap: wrap; }
    .br-intel-inner { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .br-main { padding: 0 1rem 2rem; }
    .br-narrative-perspectives { grid-template-columns: 1fr; }
    .br-narrative-perspective { border-right: none; border-bottom: 1px solid var(--br-rule); }
    .br-narrative-perspective:last-child { border-bottom: none; }
    .br-spectrum-row { grid-template-columns: 80px 1fr 35px; }
    .br-footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
}