:root {
  --primary: #d4af37;
  --bg-body: #111111;
  --text-primary: #f8f8f8;
  --text-secondary: #aaa;
  --border: #333;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Lato', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-sans); background: var(--bg-body); color: var(--text-primary); letter-spacing: 0.5px; }
a { color: var(--primary); text-decoration: none; transition: color 0.3s; }
a:hover { color: #fff; }

header { background: #000; border-bottom: 1px solid var(--primary); padding: 2rem 0; }
.header-container { max-width: 1000px; margin: 0 auto; text-align: center; }
.logo { font-family: var(--font-serif); font-size: 2.5rem; color: var(--primary); letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 1.5rem; }
nav ul { display: flex; justify-content: center; gap: 3rem; list-style: none; }
nav a { color: #fff; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; }

main { max-width: 1000px; margin: 0 auto; padding: 4rem 2rem; }
.hero { text-align: center; margin-bottom: 5rem; position: relative; }
.hero::after { content: ''; display: block; width: 60px; height: 1px; background: var(--primary); margin: 2rem auto; }
.hero h1 { font-family: var(--font-serif); font-size: 3rem; color: #fff; margin-bottom: 1rem; font-style: italic; }

.articles-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
.article-card { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; border-bottom: 1px solid #222; padding-bottom: 4rem; }
.article-card:nth-child(even) { direction: rtl; }
.article-card:nth-child(even) .article-card-content { direction: ltr; }
.article-card img { width: 100%; height: 350px; object-fit: cover; border: 1px solid #333; }
.article-card-content { padding: 1rem; }
.article-card h3 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 1rem; color: var(--primary); }
.read-more { color: #fff; border-bottom: 1px solid var(--primary); padding-bottom: 2px; font-family: var(--font-serif); font-style: italic; }

footer { background: #000; border-top: 1px solid #222; padding: 4rem 0; text-align: center; }
.footer-links a { color: #666; margin: 0 1rem; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; }

@media(max-width: 768px) { .article-card { grid-template-columns: 1fr; gap: 1rem; } .article-card:nth-child(even) { direction: ltr; } }