/* Global base: shared by every page */
:root {
  --bg-deep: #0b2a1f;
  --bg-panel: rgba(8, 32, 24, 0.82);
  --bg-panel-solid: #0f3326;
  --accent-red: #e8534a;
  --accent-red-dark: #c63d35;
  --accent-cream: #fde7c2;
  --accent-gold: #f5c04a;
  --text-main: #f4f1e8;
  --text-muted: #b9c9bf;
  --border-soft: rgba(253, 231, 194, 0.18);
  --radius: 11px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font-display: "Righteous", "Segoe UI", sans-serif;
  --font-hero: "Pacifico", cursive;
  --font-label: "Bebas Neue", sans-serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.4s ease;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 0.4s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-red-dark);
}

html {
  font-size: 12.8px; /* 80% scale: every rem-based size shrinks with it */
}

html,
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-cream);
}

h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.container {
  width: min(880px, 92%);
  margin-inline: auto;
}

.section {
  padding: 12px 0;
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 11px;
  box-shadow: var(--shadow);
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent-red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-red-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-cream);
  border: 1px solid var(--border-soft);
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--text-muted);
}
h1 {
  font-family: var(--font-hero);
}
.bullet {
  font-size: 1rem;
}
html.scrolling * {
  scrollbar-color: var(--accent-red) transparent;
}

html.scrolling::-webkit-scrollbar-thumb {
  background: var(--accent-red);
}