:root {
  color-scheme: dark;
  --ink: #0a0a0a;
  --white: #ffffff;
  --muted: #bdbdbd;
  --gold-light: #f5d27a;
  --gold-mid: #c9a24b;
  --gold-deep: #8a6a1f;
  --gold-gradient: linear-gradient(115deg, var(--gold-light) 0%, var(--gold-mid) 48%, var(--gold-deep) 100%);
  --chrome-gradient: linear-gradient(90deg, #e6e6e6, #9a9a9a);
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
  --topbar-height: 72px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: -100px;
  left: 16px;
  padding: 12px 18px;
  background: var(--gold-light);
  color: #0a0a0a;
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}

@media (max-width: 600px) {
  :root {
    --topbar-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}