/* =========================
   THE REAPERS MC GARAGE — Public Site
   Shared stylesheet for all pages
   ========================= */

/* Optional SOA-style font (remove if not using the TTF) */
@font-face{
  font-family: "SOA";
  src: url("../fonts/CarnevaleeFreakshow.ttf") format("truetype");
  font-display: swap;
}

/* Theme */
:root{
  --bg:#0e0e0f;
  --panel:#161718;
  --panel-alt:#121314;
  --text:#e9e9ea;
  --muted:#b9bcc2;
  --gunmetal:#8b8f92;      /* gunmetal gray */
  --accent:#c2252c;        /* subtle blood red */
  --border:#1b1c1d;
  --shadow:0 10px 30px rgba(0,0,0,.55);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}

.wrap{width:min(1100px,92vw); margin:0 auto; padding:20px 18px}

/* ---------- Header / Nav ---------- */
.site-header{
  border-bottom:3px solid var(--gunmetal);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2));
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(120%) blur(6px);
}
.site-title{ margin:0; letter-spacing:.04em }
.soa{ font-family:"SOA", Georgia, serif; font-size:42px }
.tagline{ margin:4px 0 10px; color:var(--muted) }

.nav{ display:flex; gap:14px; flex-wrap:wrap }
.nav a{
  padding:8px 12px; border:2px solid transparent; border-radius:10px;
  color:var(--text); text-decoration:none;
}
.nav a:hover{ border-color:var(--gunmetal) }
.nav a.active{ background:#101214; border-color:var(--gunmetal) }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:48vh; display:grid; align-items:center }
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.65)),
    url("../images/hero.png") center/cover no-repeat fixed;
  filter:saturate(95%);
}
.hero-inner{ position:relative; text-align:center }
.fx-title{ font-family:"SOA", Georgia, serif; font-size:34px; margin:0 0 10px }
.lead{ opacity:.92 }

/* Buttons */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none; border:2px solid var(--gunmetal); transition:filter .15s ease;
}
.btn-primary{ background:var(--gunmetal); color:#0a0a0a; font-weight:700 }
.btn-outline{ color:var(--text) }
.btn:hover{ filter:brightness(1.05) }
.btn.wide{ min-width:240px; text-align:center }
.cta-row{ display:flex; gap:12px; justify-content:center; margin-top:16px }

/* ---------- Sections / Panels ---------- */
.panel{
  background:var(--panel);
  border-top:1px solid #000; border-bottom:1px solid #000;
}
.panel.alt{ background:var(--panel-alt) }

/* Cards / Grids */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px }
.card{
  padding:18px; background:#0f1011; border:2px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow)
}
.card h4{ margin:6px 0 8px; font-size:22px }

.grid{ display:grid; gap:12px }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }

.ph{
  width:100%; height:220px; object-fit:cover;
  border-radius:12px; border:2px solid var(--border);
}

.bullets{ margin:10px 0 0 18px; color:var(--text) }
.muted{ color:var(--muted) }

/* ---------- Contact ---------- */
.contact{ text-align:center }

/* ---------- Footer ---------- */
.site-footer{ background:#0b0b0c; border-top:3px solid var(--gunmetal) }
.site-footer p{ margin:0; color:var(--muted) }

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .soa{ font-size:34px }
  .fx-title{ font-size:28px }
  .hero{ min-height:44vh }
  .cta-row{ flex-direction:column }
}