×
Editorial — Predictions & Analysis
@import url(‘https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@400;500&display=swap’);
.cronkite-newspaper {
–cn-bg: #FAF8F5;
–cn-ink: #1C1917;
–cn-ink-light: #44403C;
–cn-ink-muted: #78716C;
–cn-rule: #292524;
–cn-rule-light: #D6D3D1;
–cn-accent: #991B1B;
–cn-accent-light: #FEF2F2;
–cn-kicker: #991B1B;
–cn-score-good: #166534;
–cn-score-mid: #92400E;
–cn-score-bad: #991B1B;
–cn-font-display: ‘Playfair Display’, Georgia, ‘Times New Roman’, serif;
–cn-font-body: ‘Crimson Pro’, Georgia, serif;
–cn-font-mono: ‘DM Mono’, ‘Courier New’, monospace;
–cn-max: 1200px;
font-family: var(–cn-font-body);
color: var(–cn-ink);
background: var(–cn-bg);
max-width: var(–cn-max);
margin: 0 auto;
padding: 0 24px 40px;
line-height: 1.6;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
.cronkite-newspaper *, .cronkite-newspaper *::before, .cronkite-newspaper *::after { box-sizing: border-box; }
/* MASTHEAD */
.cn-masthead { text-align: center; padding: 32px 0 16px; }
.cn-masthead-rule { height: 2px; background: var(–cn-rule); margin: 8px 0; }
.cn-masthead-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(–cn-ink-muted); padding: 4px 0; }
.cn-title { font-family: var(–cn-font-display); font-size: 3.8rem; font-weight: 900; letter-spacing: 0.06em; margin: 4px 0; line-height: 1; }
.cn-edition, .cn-vol { font-family: var(–cn-font-body); font-weight: 300; }
.cn-date { font-weight: 600; }
.cn-accuracy { font-family: var(–cn-font-mono); font-size: 0.7rem; }
/* SUMMARY */
.cn-summary { padding: 20px 40px; font-size: 1.15rem; font-style: italic; color: var(–cn-ink-light); line-height: 1.7; text-align: center; }
.cn-summary p { margin: 0; }
/* RULES */
.cn-rule { height: 1px; background: var(–cn-rule-light); margin: 28px 0; }
.cn-rule-thick { height: 3px; background: var(–cn-rule); margin: 20px 0; }
/* KICKERS */
.cn-kicker { display: inline-block; font-family: var(–cn-font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; color: var(–cn-kicker); margin-bottom: 4px; }
.cn-kicker-small { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; color: var(–cn-kicker); margin-bottom: 2px; }
/* LEAD STORY */
.cn-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cn-lead-image { overflow: hidden; }
.cn-lead-image img { width: 100%; height: auto; display: block; filter: contrast(1.05); }
.cn-lead-content { display: flex; flex-direction: column; }
.cn-lead-headline { font-family: var(–cn-font-display); font-size: 2.2rem; font-weight: 900; line-height: 1.15; margin: 4px 0 8px; }
.cn-lead-text { font-size: 1.05rem; line-height: 1.7; color: var(–cn-ink-light); margin: 8px 0; flex: 1; }
/* No image — full width lead */
.cn-lead-no-image { grid-template-columns: 1fr; }
.cn-lead-no-image .cn-lead-headline { font-size: 2.8rem; text-align: center; }
.cn-lead-no-image .cn-lead-text { max-width: 720px; margin: 8px auto; text-align: center; }
.cn-lead-no-image .cn-kicker { text-align: center; display: block; }
.cn-lead-no-image .cn-attribution-trigger { display: block; text-align: center; }
/* SECONDARY STORIES */
.cn-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cn-secondary-grid > article { border-left: 1px solid var(–cn-rule-light); padding-left: 24px; }
.cn-secondary-grid > article:first-child { border-left: none; padding-left: 0; }
.cn-story-image { margin-bottom: 12px; overflow: hidden; }
.cn-story-image img { width: 100%; height: auto; display: block; }
.cn-story-headline { font-family: var(–cn-font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.25; margin: 4px 0 6px; }
.cn-story-text { font-size: 0.95rem; line-height: 1.65; color: var(–cn-ink-light); margin: 6px 0; }
/* REMAINING STORIES */
.cn-remaining-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.cn-remaining-grid > article { border-left: 1px solid var(–cn-rule-light); padding-left: 20px; }
.cn-remaining-grid > article:first-child,
.cn-remaining-grid > article:nth-child(3n+1) { border-left: none; padding-left: 0; }
.cn-small-headline { font-family: var(–cn-font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.25; margin: 2px 0 6px; }
.cn-small-text { font-size: 0.88rem; line-height: 1.6; color: var(–cn-ink-light); margin: 4px 0; }
/* IMPORTANCE BADGE */
.cn-importance { font-family: var(–cn-font-mono); font-size: 0.65rem; color: var(–cn-ink-muted); margin-left: 8px; font-weight: 400; }
/* DEEP ANALYSIS TOGGLE */
.cn-deep-analysis { margin: 6px 0; border: none; }
.cn-deep-analysis summary { font-size: 0.78rem; color: var(–cn-accent); cursor: pointer; letter-spacing: 0.02em; font-weight: 600; padding: 4px 0; list-style: none; }
.cn-deep-analysis summary::-webkit-details-marker { display: none; }
.cn-deep-analysis summary::before { content: ‘▸ ‘; }
.cn-deep-analysis[open] summary::before { content: ‘▾ ‘; }
.cn-deep-analysis-small summary { font-size: 0.72rem; }
.cn-drivers-content { font-size: 0.88rem; color: var(–cn-ink-light); padding: 8px 12px; background: rgba(0,0,0,0.02); border-left: 2px solid var(–cn-rule-light); margin: 6px 0; line-height: 1.55; }
.cn-reasoning-text { font-size: 0.85rem; color: var(–cn-ink-muted); font-style: italic; line-height: 1.55; padding: 6px 12px; }
/* INLINE PREDICTIONS (within story cards) */
.cn-inline-predictions { padding: 8px 0; }
.cn-pred-card { padding: 10px 12px; margin: 6px 0; background: rgba(0,0,0,0.015); border-left: 2px solid var(–cn-accent); }
.cn-pred-card-small { padding: 6px 10px; margin: 4px 0; }
.cn-pred-reasoning { font-size: 0.82rem; color: var(–cn-ink-muted); line-height: 1.5; margin: 4px 0 0; }
/* PREDICTIONS SECTION (bottom of page) */
.cn-predictions-section { padding: 20px 0; }
.cn-predictions-summary { font-size: 0.85rem; color: var(–cn-ink-muted); text-align: center; margin: 0 0 12px; }
.cn-predictions-nav { text-align: center; margin: 0 0 20px; }
.cn-predictions-nav a { margin: 0 8px; }
.cn-predictions-list { max-width: 800px; margin: 0 auto; }
/* PREDICTION DETAIL CARDS */
.cn-pred-detail { margin: 4px 0; border: 1px solid var(–cn-rule-light); }
.cn-pred-detail summary { padding: 10px 14px; cursor: pointer; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.cn-pred-detail summary::-webkit-details-marker { display: none; }
.cn-pred-detail[open] { border-color: var(–cn-accent); }
.cn-pred-badge { font-family: var(–cn-font-mono); font-size: 0.62rem; letter-spacing: 0.06em; padding: 2px 6px; background: #FEF3C7; color: #92400E; font-weight: 600; flex-shrink: 0; }
.cn-pred-conf { font-family: var(–cn-font-mono); font-size: 0.82rem; font-weight: 600; flex-shrink: 0; }
.cn-pred-story-cat { font-size: 0.68rem; color: var(–cn-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; }
.cn-pred-summary-text { font-size: 0.85rem; color: var(–cn-ink-light); }
.cn-pred-detail-body { padding: 12px 16px; border-top: 1px solid var(–cn-rule-light); }
.cn-pred-story-ref { font-size: 0.82rem; color: var(–cn-ink-muted); margin: 0 0 8px; }
.cn-pred-full-text { font-size: 0.92rem; line-height: 1.6; margin: 0 0 8px; }
.cn-pred-reasoning-text { font-size: 0.85rem; color: var(–cn-ink-light); line-height: 1.55; margin: 8px 0; }
.cn-pred-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(–cn-font-mono); font-size: 0.72rem; color: var(–cn-ink-muted); padding: 8px 0; border-top: 1px solid var(–cn-rule-light); margin-top: 8px; }
.cn-pred-redteam { background: rgba(220,38,38,0.04); border-left: 2px solid #DC2626; padding: 8px 12px; margin: 8px 0; font-size: 0.85rem; line-height: 1.5; }
.cn-pred-redteam strong { color: #DC2626; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cn-pred-outcome-box { background: rgba(16,185,129,0.06); border-left: 2px solid #10B981; padding: 8px 12px; margin: 8px 0; font-size: 0.85rem; }
.cn-pred-good { border-left: 3px solid #10B981; }
.cn-pred-mixed { border-left: 3px solid #F59E0B; }
.cn-pred-poor { border-left: 3px solid #DC2626; }
/* ATTRIBUTION TRIGGER */
.cn-attribution-trigger { display: inline-block; background: none; border: none; font-family: var(–cn-font-body); font-size: 0.78rem; color: var(–cn-ink-muted); cursor: pointer; padding: 2px 0; margin-bottom: 6px; letter-spacing: 0.02em; transition: color 0.2s; }
.cn-attribution-trigger:hover { color: var(–cn-accent); }
/* ATTRIBUTION MODAL */
.cn-attribution-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.cn-attribution-modal { background: var(–cn-bg); border: 1px solid var(–cn-rule-light); max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; padding: 28px 32px; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.cn-attribution-modal h4 { font-family: var(–cn-font-display); font-size: 1.2rem; margin: 0 0 16px; }
.cn-attribution-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.5rem; color: var(–cn-ink-muted); cursor: pointer; line-height: 1; }
.cn-attribution-close:hover { color: var(–cn-ink); }
.cn-attr-item { padding: 12px 0; border-bottom: 1px solid var(–cn-rule-light); }
.cn-attr-item:last-child { border-bottom: none; }
.cn-attr-source { font-weight: 600; font-size: 0.95rem; }
.cn-attr-author { font-size: 0.85rem; color: var(–cn-ink-muted); }
.cn-attr-date { font-family: var(–cn-font-mono); font-size: 0.75rem; color: var(–cn-ink-muted); }
.cn-attr-link { font-size: 0.82rem; color: var(–cn-accent); text-decoration: none; word-break: break-all; }
.cn-attr-link:hover { text-decoration: underline; }
/* STORY LINKS ROW */
.cn-story-links { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
/* EDITORIAL TRIGGER */
.cn-editorial-trigger { display: inline-block; background: none; border: none; font-family: var(–cn-font-body); font-size: 0.78rem; color: var(–cn-accent); cursor: pointer; padding: 2px 0; letter-spacing: 0.02em; transition: color 0.2s; font-weight: 600; }
.cn-editorial-trigger:hover { color: var(–cn-ink); }
/* EDITORIAL MODAL */
.cn-editorial-modal { max-width: 640px; }
.cn-editorial-pred-item { padding: 16px 0; border-bottom: 1px solid var(–cn-rule-light); }
.cn-editorial-pred-item:last-child { border-bottom: none; }
/* EDITORIAL BANNER */
.cn-editorial-banner { text-align: center; padding: 20px 0; }
.cn-editorial-banner-title { font-family: var(–cn-font-display); font-size: 1.1rem; font-weight: 900; letter-spacing: 0.1em; margin: 0 0 8px; }
.cn-editorial-banner p { font-size: 0.85rem; color: var(–cn-ink-muted); margin: 4px 0; }
/* PREDICTION ELEMENTS (shared modal + editorial) */
.cn-pred-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cn-pred-score { font-family: var(–cn-font-mono); font-weight: 500; font-size: 1rem; }
.cn-pred-pending-badge { font-family: var(–cn-font-mono); font-size: 0.65rem; letter-spacing: 0.06em; background: #FEF3C7; color: #92400E; padding: 2px 8px; }
.cn-pred-confidence { font-family: var(–cn-font-mono); font-size: 0.72rem; color: var(–cn-ink-muted); }
.cn-pred-timeframe { font-family: var(–cn-font-mono); font-size: 0.68rem; color: var(–cn-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cn-pred-text { font-size: 0.95rem; line-height: 1.55; margin: 6px 0; }
.cn-pred-outcome { font-size: 0.85rem; color: var(–cn-ink-light); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(–cn-rule-light); line-height: 1.55; }
.cn-pred-meta { font-family: var(–cn-font-mono); font-size: 0.72rem; color: var(–cn-ink-muted); margin: 6px 0 0; }
/* FOOTER */
.cn-footer { text-align: center; padding: 20px 0; font-size: 0.8rem; color: var(–cn-ink-muted); }
.cn-footer p { margin: 4px 0; }
.cn-disclaimer { font-size: 0.72rem; font-style: italic; }
/* RESPONSIVE */
@media (max-width: 900px) {
.cn-lead { grid-template-columns: 1fr; }
.cn-secondary-grid { grid-template-columns: 1fr; }
.cn-secondary-grid > article { border-left: none; padding-left: 0; border-top: 1px solid var(–cn-rule-light); padding-top: 20px; }
.cn-remaining-grid { grid-template-columns: 1fr 1fr; }
.cn-title { font-size: 2.6rem; }
.cn-lead-headline { font-size: 1.8rem; }
}
@media (max-width: 600px) {
.cronkite-newspaper { padding: 0 12px 24px; font-size: 15px; }
.cn-title { font-size: 2rem; }
.cn-lead-headline { font-size: 1.5rem; }
.cn-remaining-grid { grid-template-columns: 1fr; }
.cn-remaining-grid > article { border-left: none; padding-left: 0; border-top: 1px solid var(–cn-rule-light); padding-top: 16px; }
.cn-summary { padding: 16px 16px; }
.cn-masthead-meta { flex-direction: column; gap: 2px; }
}
function cronkiteShowAttribution(btn) {
var data = JSON.parse(btn.getAttribute(‘data-attribution’));
var overlay = document.getElementById(‘cn-attribution-overlay’);
var content = document.getElementById(‘cn-attribution-content’);
var html = ”;
for (var i = 0; i < data.length; i++) {
var a = data[i];
html += '
‘;
if (a.source) html += ‘
‘ + escH(a.source) + ‘
‘;
if (a.author) html += ‘
By ‘ + escH(a.author) + ‘
‘;
if (a.date) html += ‘
‘ + escH(a.date) + ‘
‘;
if (a.url) html += ‘
‘ + escH(a.url) + ‘ ‘;
html += ‘
‘;
}
if (!html) html = ‘
No detailed attribution available.
‘;
content.innerHTML = html;
overlay.style.display = ‘flex’;
}
function cronkiteShowEditorial(btn) {
var data = JSON.parse(btn.getAttribute(‘data-predictions’));
var overlay = document.getElementById(‘cn-editorial-overlay’);
var content = document.getElementById(‘cn-editorial-content’);
var html = ”;
for (var i = 0; i
= 70 ? ‘#166534’ : (p.score >= 40 ? ‘#92400E’ : ‘#991B1B’)) : ‘#78716C’;
html += ‘‘;
html += ‘‘;
html += ‘
‘ + escH(p.prediction) + ‘
‘;
html += ‘
Causal reasoning ‘ + escH(p.reasoning) + ‘
‘;
if (hasScore && p.outcome) {
html += ‘
What happened: ‘ + escH(p.outcome);
if (p.outcome_reasoning) html += ‘‘ + escH(p.outcome_reasoning) + ‘ ‘;
html += ‘
‘;
}
if (!hasScore && p.check_date) {
html += ‘
Check date: ‘ + escH(p.check_date) + ‘
‘;
}
html += ‘
No predictions for this story.
‘;
content.innerHTML = html;
overlay.style.display = ‘flex’;
}
function escH(s) {
var d = document.createElement(‘div’);
d.textContent = s || ”;
return d.innerHTML;
}
