:root{
  --black:#030303;
  --panel:#0b0b0d;
  --panel2:#121216;
  --red:#e50914;
  --red2:#8b0000;
  --silver:#d9d9d9;
  --muted:#9e9e9e;
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{background:var(--black);color:var(--white)}
a{text-decoration:none;color:inherit}
header{padding:18px 7%;display:flex;justify-content:space-between;align-items:center;background:#050505;border-bottom:1px solid rgba(229,9,20,.35)}
header img{height:80px}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{color:#ddd;text-transform:uppercase;font-weight:800;font-size:13px}
nav a:hover{color:var(--red)}
.hero{padding:80px 7%;background:radial-gradient(circle at 15% 20%,rgba(229,9,20,.35),transparent 25%),linear-gradient(120deg,#030303,#130000)}
.hero h1{font-size:60px;text-transform:uppercase}
.hero span{color:var(--red)}
section{padding:60px 7%}
.btn{display:inline-block;border:0;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;padding:14px 22px;border-radius:4px;font-weight:900;text-transform:uppercase;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:#111;border-left:4px solid var(--red);border-radius:16px;padding:24px}
.card img{width:100%;height:180px;object-fit:cover;border-radius:10px;margin-bottom:14px;background:#050505}
.card h3{text-transform:uppercase;margin-bottom:10px}
.card p{color:#aaa;line-height:1.6}
input,select,textarea{width:100%;padding:15px;margin-bottom:16px;background:#050505;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:6px}
textarea{height:180px}
form{background:#0d0d0f;border-left:5px solid var(--red);padding:30px;border-radius:20px;max-width:900px}
.small{color:#999;font-size:14px;margin-top:10px}
footer{background:#050505;border-top:1px solid rgba(229,9,20,.35);margin-top:60px}
.footer-red{height:10px;background:linear-gradient(90deg,var(--red2),var(--red),var(--red2))}
.footer-main{padding:35px 7%;color:#999}


/* ======================================================
   FULL-WIDTH CMS POST LAYOUT
   Overrides the older card grid styles above.
   ====================================================== */

#posts.grid,
#posts {
  display:block;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

#posts .news-article {
  width:100%;
  margin:0 auto 60px;
  padding:0;
  overflow:hidden;
  background:#111;
  border-left:4px solid var(--red);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

#posts .hero-image {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  margin:0;
  border-radius:0;
  object-fit:contain;
  background:#050505;
}

#posts .article-content {
  padding:40px;
}

#posts .article-content h1 {
  margin:0 0 18px;
  color:var(--white);
  font-size:clamp(30px,4vw,48px);
  line-height:1.1;
  text-transform:uppercase;
}

#posts .article-content p {
  color:#c7c7c7;
  font-size:18px;
  line-height:1.8;
}

#posts .article-content .small {
  margin:0 0 18px;
  color:#888;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
}

@media (max-width:700px) {
  #posts .article-content {
    padding:24px;
  }

  #posts .article-content p {
    font-size:16px;
  }
}