/* Thunderdome: AeroStrike — 3000 Studios. Black + gold, square corners everywhere. */
* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }
html { background: #000; }
body {
  background: #000; color: #e8e4da;
  font-family: "Rajdhani", "Segoe UI", Arial, sans-serif;
  font-size: 19px; line-height: 1.55;
}
h1, h2, h3, .brand, .btn, .tag {
  font-family: "Orbitron", "Rajdhani", Arial, sans-serif;
  letter-spacing: .06em;
}
a { color: #e8b33c; }
img, video { max-width: 100%; display: block; }

header {
  border-bottom: 2px solid #e8b33c;
  padding: 14px 22px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  background: #000;
}
.brand { color: #fff; font-weight: 900; font-size: 20px; text-decoration: none; }
.brand span { color: #e8b33c; }
nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 20px; }
nav a {
  color: #e8e4da; text-decoration: none; font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .12em;
}
nav a:hover { color: #e8b33c; }

.hero {
  padding: 72px 22px 56px; text-align: center;
  background: linear-gradient(180deg, #0a0800 0%, #000 70%);
  border-bottom: 1px solid #2a2200;
}
.hero .tag {
  display: inline-block; border: 1px solid #e8b33c; color: #e8b33c;
  padding: 5px 14px; font-size: 13px; font-weight: 700; margin-bottom: 22px;
}
.hero h1 { color: #fff; font-size: clamp(38px, 7vw, 76px); font-weight: 900; line-height: 1.05; }
.hero h1 span { color: #e8b33c; }
.hero p.lede { font-size: clamp(20px, 3vw, 27px); color: #cfc9ba; max-width: 760px; margin: 20px auto 30px; }

.btn {
  display: inline-block; background: #e8b33c; color: #000; text-decoration: none;
  font-weight: 800; font-size: 17px; padding: 14px 30px; text-transform: uppercase;
  border: 2px solid #e8b33c; margin: 4px;
}
.btn:hover { background: #000; color: #e8b33c; }
.btn.ghost { background: transparent; color: #e8b33c; }
.btn.ghost:hover { background: #e8b33c; color: #000; }

.statusbar {
  display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
  border-top: 1px solid #2a2200; border-bottom: 1px solid #2a2200; background: #070600;
}
.statusbar div { padding: 16px 26px; text-align: center; border-right: 1px solid #2a2200; }
.statusbar div:last-child { border-right: none; }
.statusbar b { display: block; color: #e8b33c; font-family: "Orbitron", sans-serif; font-size: 15px; letter-spacing: .08em; }
.statusbar span { font-size: 16px; color: #cfc9ba; }

section { max-width: 1080px; margin: 0 auto; padding: 56px 22px 8px; }
section h2 { color: #fff; font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin-bottom: 8px; }
section h2 span { color: #e8b33c; }
section .sub { color: #a49d8c; font-size: 18px; margin-bottom: 26px; max-width: 820px; }
section p.body { max-width: 860px; margin-bottom: 16px; color: #ddd7c9; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 10px 0 30px; }
.card { border: 1px solid #3a3000; background: #0a0906; padding: 22px; }
.card h3 { color: #e8b33c; font-size: 18px; margin-bottom: 6px; }
.card .role { color: #a49d8c; font-size: 14px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; font-weight: 700; }
.card p { font-size: 17px; color: #ddd7c9; }

.trailerbox { border: 2px solid #e8b33c; background: #000; margin-bottom: 30px; }
.trailerbox video { width: 100%; }

.facts { border: 1px solid #3a3000; background: #0a0906; padding: 8px 22px; margin-bottom: 30px; }
.facts table { width: 100%; border-collapse: collapse; }
.facts td { padding: 11px 6px; border-bottom: 1px solid #241d00; font-size: 18px; vertical-align: top; }
.facts tr:last-child td { border-bottom: none; }
.facts td.k { color: #e8b33c; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; width: 210px; padding-top: 14px; }

footer {
  margin-top: 56px; border-top: 2px solid #e8b33c; padding: 28px 22px 38px;
  text-align: center; color: #a49d8c; font-size: 16px;
}
footer .links { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
footer a { text-decoration: none; font-weight: 600; }
footer a:hover { text-decoration: underline; }