:root {
    --bg-color: #f4f6f8;
    --card-bg: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --positive: #10b981;
    --negative: #ef4444;
    --neutral: #6b7280;
    --primary: #1e3a8a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-primary); line-height: 1.6; }
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; }

header { background-color: var(--primary); color: white; padding: 2rem 0; text-align: center; margin-bottom: 2rem; }
header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.date-header { font-size: 1.2rem; opacity: 0.9; }

.overview { background: var(--card-bg); padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 2rem; border-left: 5px solid var(--primary); }
.overview h2 { margin-bottom: 0.5rem; }

.stories { display: flex; flex-direction: column; gap: 2rem; }
.card { background: var(--card-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.card-image { position: relative; height: 250px; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.credit { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; }
.rank-badge { position: absolute; top: 12px; left: 12px; background: var(--primary); color: white; font-weight: bold; padding: 0.5rem 1rem; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.card-content { padding: 1.5rem; }
.meta { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.impact-badge, .sector-tag { font-size: 0.85rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 4px; }
.sector-tag { background: #e5e7eb; color: var(--text-primary); }
.positive { background-color: #d1fae5; color: #065f46; }
.negative { background-color: #fee2e2; color: #991b1b; }
.neutral { background-color: #f3f4f6; color: #374151; }

.card-content h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.summary { color: var(--text-secondary); margin-bottom: 1rem; }
.impact { font-size: 0.95rem; margin-bottom: 1.5rem; background: #f8fafc; padding: 0.75rem; border-radius: 4px; }

.read-more { display: inline-block; background: var(--primary); color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; font-weight: 500; transition: opacity 0.2s; }
.read-more:hover { opacity: 0.9; }

footer { text-align: center; padding: 2rem 0; color: var(--text-secondary); font-size: 0.85rem; margin-top: 3rem; border-top: 1px solid #e5e7eb; }

@media (max-width: 600px) { .card-image { height: 200px; } }