:root{
  --bg:#0b0f14;
  --card:#0f1720;
  --accent:#d97706;
  --muted:#9aa6b2;
  --glass: rgba(255,255,255,0.03);
  --maxw:1000px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg), #071017);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.hero{
  padding:48px 20px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.2)),
    url('https://imgur.com/KD9hXy0.jpg') center/cover no-repeat;
  color:white;
  text-align:center;
}
.hero-inner{max-width:var(--maxw);margin:0 auto}
.hero h1{font-size:40px;margin:0 0 8px}
.subtitle{opacity:.9;margin:0 0 12px}
.cta a{color:var(--accent);text-decoration:none;font-weight:600}

.nav{display:flex;justify-content:center;gap:18px;padding:12px 8px;background:var(--card);border-top:1px solid rgba(255,255,255,0.03)}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:white}

.container{max-width:var(--maxw);margin:28px auto;padding:0 16px;display:grid;gap:18px}

.card{background:var(--glass);padding:18px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,10,0.6);border:1px solid rgba(255,255,255,0.03)}

.card h2{margin-top:0;color:#fff}
.note{color:var(--muted);font-size:14px}
.evidence h3{margin-bottom:6px}
.links a{color:var(--accent);font-weight:600}
.hint{margin-top:12px;color:var(--muted);font-size:13px}

.site-footer{max-width:var(--maxw);margin:18px auto;text-align:center;color:var(--muted);font-size:13px;padding:12px}
.small{margin-top:6px}
img {
  max-width: 100%; /* Ensures images scale down but not up beyond their natural size */
  height: auto;    /* Maintains the image's aspect ratio */
  display: block;  /* Prevents extra whitespace at the bottom */
}