:root{
  --bg: #151541;
  --panel: #f4b85e;
  --accent: #ffffff;
  --container-width: 1000px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color:#111;
  line-height:1.45;
}
.container{
  max-width: var(--container-width);
  margin: 24px auto;
  background: var(--panel);
  padding: 28px;
  border-radius: 8px;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-header h1{
  margin:0;
  font-size:20px;
  color:var(--accent);
  background: var(--bg);
  padding:10px 14px;
  border-radius:8px;
}
.main-nav a{
  color:var(--accent);
  text-decoration:none;
  margin-left:12px;
  font-weight:600;
}
.main-nav a[aria-current="page"]{ text-decoration:underline; }
.hero-images{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.top-img{ height:120px; object-fit:cover; border-radius:6px; }
.sidebox{ background: var(--bg); color: var(--accent); padding:12px; border-radius:8px; margin:12px 0;}
.sidebox.right{ float:right; width:320px; margin-left:16px; }
.sidebox.left{ float:left; width:320px; margin-right:16px; }
.fig{ max-width:100%; height:auto; display:block; margin:12px 0; border-radius:6px; }
.data-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.data-table th, .data-table td{ border:1px solid rgba(0,0,0,0.08); padding:8px; text-align:left; }
.site-footer{ margin-top:24px; text-align:center; color:#222; padding:8px 0; }
@media (max-width:900px){
  .container{ margin:12px; padding:16px }
  .sidebox.right, .sidebox.left{ float:none; width:auto; margin:12px 0 }
  .top-img{ height:90px }
}