:root {
  --bg: #0f1117;
  --surface: #1a1d26;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #b310ff;
  --border: #30363d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  padding: 2rem 1rem;
}

.container { max-width: 1080px; margin: 0 auto; }
header { margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
header h1 { font-size: 2.5rem; color: #fff; margin-bottom: 0.25rem; }
header p { color: var(--text-muted); font-size: 1.1rem; }

.layout { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } }

/* Sidebar Factsheet */
aside { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; height: fit-content; }
aside h3 { margin-top: 1.25rem; margin-bottom: 0.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
aside h3:first-child { margin-top: 0; }
aside ul { list-style: none; }
aside li { margin-bottom: 0.4rem; font-size: 0.95rem; }
aside a { color: #fff; text-decoration: none; border-bottom: 1px dotted var(--accent); }
aside a:hover { color: var(--accent); }

/* Main Content */
main section { margin-bottom: 2.5rem; }
main h2 { font-size: 1.6rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
main p { margin-bottom: 1rem; color: #c9d1d9; }
main ul { margin-left: 1.5rem; margin-bottom: 1rem; }
main li { margin-bottom: 0.5rem; }

/* Media Gallery */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.grid img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); display: block; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 0.5rem;
}
.btn:hover { opacity: 0.9; }

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; }
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; border: 0; }