:root {
  --bg-body: #ffffff;
  --text-primary: #000000;
  --accent: #ff0000;
  --border: 3px solid #000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Courier New', Courier, monospace; background: var(--bg-body); color: var(--text-primary); }
a { color: #000; text-decoration: underline; }
a:hover { background: var(--text-primary); color: var(--bg-body); text-decoration: none; }

header { border-bottom: var(--border); padding: 1.5rem; }
.header-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 2rem; font-weight: 900; text-transform: uppercase; background: #000; color: #fff; padding: 0.5rem 1rem; text-decoration: none; }
nav ul { display: flex; gap: 2rem; list-style: none; }
nav a { font-weight: bold; text-transform: uppercase; font-size: 1.2rem; text-decoration: none; }

main { max-width: 1400px; margin: 0 auto; padding: 2rem; border-left: var(--border); border-right: var(--border); min-height: 100vh; }
.hero { border: var(--border); padding: 3rem; margin-bottom: 3rem; background: #eee; }
.hero h1 { font-size: 4rem; text-transform: uppercase; line-height: 0.9; margin-bottom: 1rem; }

.articles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--border); }
.article-card { border: var(--border); margin: -1.5px; padding: 2rem; background: white; display: flex; flex-direction: column; }
.article-card:hover { background: var(--accent); color: white; }
.article-card:hover a, .article-card:hover h3 a { color: white; }
.article-card img { width: 100%; height: 250px; object-fit: cover; border: var(--border); margin-bottom: 1rem; filter: grayscale(100%); }
.article-card:hover img { filter: none; }
.article-card h3 { font-size: 1.5rem; margin-bottom: 1rem; text-transform: uppercase; }
.read-more { font-weight: 900; text-transform: uppercase; border: var(--border); padding: 0.5rem 1rem; display: inline-block; background: #fff; color: #000; margin-top: auto; }

footer { border-top: var(--border); padding: 2rem; text-align: center; background: #000; color: #fff; }
.footer-links a { color: #fff; margin: 0 1rem; }
@media(max-width: 768px) { .articles-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 2.5rem; } }