@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@400;500;600&display=swap');

:root {
  --ink: #10151d;
  --panel: #1a212c;
  --line: #2f3a4a;
  --navy: #17202e;
  --gold: #c9a35a;
  --gold-hi: #ead08f;
  --cream: #f2efe8;
  --muted: #9aa5b5;
  --danger: #e08a72;
  --display: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --body: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 58px; padding: 0 2em; width: 100%;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%, #a9843f);
  color: #1d150a; font-family: var(--display); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 30px -12px rgba(201,163,90,.7);
  transition: transform .15s var(--ease), filter .15s;
}
.btn-gold:active { transform: scale(.98); }
.btn-gold:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.1em; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid #45526a; font-size: .92rem; font-weight: 500;
}
.btn-line.solid { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1d150a; border-color: transparent; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Logo */
.logo { display: grid; justify-items: center; align-content: start; text-align: center; gap: .1rem; color: var(--gold-hi); }
.logo img { width: 100%; max-width: 260px; height: auto; }
.logo .crown { width: 34px; height: 22px; }
.logo .num { font-family: var(--display); font-size: 3.4rem; line-height: .9; letter-spacing: .02em; }
.logo .jaar { font-family: var(--display); font-size: 1.15rem; letter-spacing: .3em; margin-top: -.1rem; padding-left: .3em; }
.logo .name { font-family: var(--display); color: var(--cream); font-size: .9rem; letter-spacing: .14em; margin-top: .5rem; }
.logo .sub { color: var(--muted); font-size: .78rem; }