body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
.site-menu { background: #222; padding: 10px 20px; display: flex; gap: 15px; flex-wrap: wrap; }
.site-menu a { color: white; text-decoration: none; font-weight: bold; font-size: 16px; }
.site-menu a:hover { text-decoration: underline; }

.article-list { max-width: 900px; margin: 20px auto; display: flex; flex-direction: column; gap: 20px; }
.article-card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.article-card img { width: 150px; height: auto; border-radius: 6px; object-fit: cover; }
.article-card h3 { margin: 0; font-size: 20px; }
.article-card h3 a { color: #222; text-decoration: none; }
.article-card h3 a:hover { text-decoration: underline; }
.article-card p { margin: 5px 0 0; font-size: 14px; color: #333; }

.load-more { display: block; text-align: center; padding: 10px 20px; margin: 20px auto; font-size: 16px; background: black; color: white; border-radius: 6px; cursor: pointer; }
.load-more:hover { opacity: 0.9; }

.back-to-top { position: fixed; bottom: 20px; right: 20px; background: black; color: white; padding: 10px 15px; border-radius: 50%; font-size: 18px; cursor: pointer; display: none; }

@media screen and (max-width: 600px) {
    .article-card { flex-direction: column; align-items: flex-start; }
    .article-card img { width: 100%; }
}