:root {
    --bg: #f0f0f0; --text: #1a1a1a; --accent: #d32f2f;
    --card-bg: #ffffff; --nav-bg: #1a1a1a;
}
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; line-height: 1.6; }
header { background: var(--nav-bg); color: white; padding: 30px; text-align: center; border-bottom: 6px solid var(--accent); }
header span { color: var(--accent); }
nav { background: var(--nav-bg); padding: 10px; display: flex; justify-content: center; gap: 15px; position: sticky; top: 0; z-index: 100; }
nav a, nav button { color: white; text-decoration: none; font-weight: 900; text-transform: uppercase; font-size: 0.8rem; background: none; border: none; cursor: pointer; }
.container { max-width: 1100px; margin: 30px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.card { background: white; border: 4px solid #000; box-shadow: 10px 10px 0 #000; margin-bottom: 40px; transition: 0.2s; }
.card:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--accent); }
.post-img { width: 100%; height: 350px; object-fit: cover; border-bottom: 4px solid #000; }
.card-body { padding: 25px; }
.tag { background: var(--accent); color: white; padding: 5px 10px; font-weight: 900; display: inline-block; transform: rotate(-1deg); }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; border: 4px solid #000; margin: 20px 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.search-bar { border: 2px solid white; color: white; background: none; padding: 5px; }
@media (max-width: 800px) { .container { grid-template-columns: 1fr; } }