/* Divergence design tokens - shared by every page. "Newsprint Desk" visual system: a light editorial broadsheet by default, with a warm "newsprint at night" dark mode. Token NAMES are kept identical to the previous system so existing references recolor automatically; only the values changed. Theme is switched via [data-theme="dark"] on . */ @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Archivo:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* ---- Light (default): paper, ink, one signal red ---- */ --bg: #f3f0e7; /* paper */ --bg-2: #ece7da; /* inset / recessed sections */ --surface: #faf8f1; /* cards */ --surface-2: #f0ece0; --surface-3: #e6e1d2; --border: #d3cdbd; /* hairline rule */ --border-2: #bdb6a3; --text: #1a1a17; /* ink */ --text-2: #3c3a31; --muted: #6b6759; --muted-2: #908b7c; --accent: #c1272d; /* signal red (brand) */ --accent-2: #9e1f24; --accent-bg: rgba(193,39,45,0.10); --accent-border: rgba(193,39,45,0.32); /* data-coding palette (categories, framing, scores, spectrum) */ --green: #1a7a4c; --amber: #b8770b; --red: #c1272d; --blue: #1a4b8c; --orange: #c2410c; --cyan: #0e7490; /* fonts */ --font-sans: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-display: 'Libre Franklin', 'Archivo', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* shape: newsprint is sharp */ --radius: 4px; --radius-lg: 7px; /* scrollbar thumb tint */ --scroll-thumb: rgba(26,26,23,0.28); --scroll-thumb-hover: rgba(26,26,23,0.5); } :root[data-theme="dark"] { /* ---- Dark: warm newsprint-at-night, never blue/purple-tinted ---- */ --bg: #16150f; --bg-2: #110f0a; --surface: #1d1b14; --surface-2: #24221a; --surface-3: #2c2a20; --border: #34322a; --border-2: #47443a; --text: #ece7d8; --text-2: #c7c2b3; --muted: #928d7e; --muted-2: #6e6a5d; --accent: #e06a4a; --accent-2: #c85636; --accent-bg: rgba(224,106,74,0.14); --accent-border: rgba(224,106,74,0.36); --green: #6cc08a; --amber: #e0b84a; --red: #e8675a; --blue: #6f9fd8; --orange: #f59e0b; --cyan: #4cb3c9; --scroll-thumb: rgba(236,231,216,0.22); --scroll-thumb-hover: rgba(236,231,216,0.42); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Themed scrollbars site-wide. */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; transition: background-color 0.15s ease; } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* Divergence logo — flat ink mark, no gradient. */ .dv-logo { display: inline-flex; align-items: center; gap: 10px; } .dv-logo-mark { width: 34px; height: 34px; background: var(--accent); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dv-logo-mark svg { display: block; } .dv-logo-wordmark { font-family: var(--font-display); font-size: 19px; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text); } .dv-logo-tagline { font-size: 10px; color: var(--muted); letter-spacing: 0.2px; } /* Category chips — flat tinted tags, data-coded by topic axis. */ .cat-chip { font-family: var(--font-sans); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; padding: 3px 8px; border-radius: 3px; } .cat-war { background: rgba(193,39,45,0.12); color: var(--red); } .cat-economy { background: rgba(26,122,76,0.12); color: var(--green); } .cat-politics { background: rgba(26,75,140,0.12); color: var(--blue); } .cat-ai { background: rgba(14,116,144,0.12); color: var(--cyan); } .cat-health { background: rgba(184,119,11,0.14); color: var(--amber); } .cat-other { background: rgba(107,103,89,0.14); color: var(--muted); } /* Utility */ .eyebrow { font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); } .eyebrow-accent { color: var(--accent); } /* Suppress decorative eyebrow and pill-style section headers site-wide. Exception: .takeaway-eyebrow ("The split, in one line") is a meaningful label, not decoration, so the broad [class*="-eyebrow"] match must skip it. */ .eyebrow, .eye, [class*="-eyebrow"]:not(.takeaway-eyebrow), .section-label { display: none !important; } .mono { font-family: var(--font-mono); font-feature-settings: normal; } /* Brand "highlight" word — was an italic purple-pink gradient (.grad-em), the single biggest "made by AI" tell. Now a flat ink-red emphasis in the same display face as the headline. Kept the class name so every existing recolors without touching markup. */ .grad-em { font-family: inherit; font-style: normal; font-weight: inherit; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); -webkit-text-fill-color: var(--accent); } /* Feature gating ------------------------------------------------------------------- */ .gated-block { position: relative; overflow: hidden; border-radius: var(--radius, 4px); } .gated-blur { filter: blur(4px); user-select: none; pointer-events: none; opacity: 0.6; } .gated-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(243,240,231,0.55) 0%, rgba(243,240,231,0.88) 100%); border-radius: inherit; z-index: 5; filter: none; } :root[data-theme="dark"] .gated-cta { background: linear-gradient(180deg, rgba(22,21,15,0.55) 0%, rgba(22,21,15,0.88) 100%); } .gated-cta a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--accent); color: #fff; border-radius: 4px; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,0.18); transition: opacity 0.15s, transform 0.15s; filter: none; white-space: nowrap; } .gated-cta a:active { transform: translateY(1px); } .gated-cta a:hover { opacity: 0.9; } .gated-inline-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 4px; padding: 2px 8px; white-space: nowrap; cursor: pointer; text-decoration: none; }