:root {
  --bg: #12080f;
  --velvet: #2a0f1f;
  --gold: #d9b26f;
  --gold-soft: rgba(217, 178, 111, 0.35);
  --ink: #f3e9dc;
  --ink-dim: #b8a892;
  --panel: rgba(20, 8, 16, 0.78);
  --panel-border: rgba(217, 178, 111, 0.25);
  --danger: #e07a7a;
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --radius: 10px;
  --flip-ms: 600ms;
  --card-back:
    repeating-linear-gradient(45deg, rgba(217, 178, 111, 0.18) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(217, 178, 111, 0.18) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 50% 40%, #3a1630 0%, #1a0a18 75%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--gold);
}
p { margin: 0 0 0.75em; }
a { color: var(--gold); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  padding: 0.55em 1.4em;
  letter-spacing: 0.06em;
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
}
.btn:hover, .btn:focus-visible { background: rgba(217, 178, 111, 0.12); border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn--primary { background: var(--gold); color: #1a0f0a; border-color: var(--gold); font-weight: 600; }
.btn--primary:hover, .btn--primary:focus-visible { background: #e8c98a; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}