/* Shared typography and surfaces for support, account, and invitation pages. */
@font-face {
  font-family: Instrument;
  src: url("/fonts/instrument-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Instrument;
  src: url("/fonts/instrument-semibold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: Newsreader;
  src: url("/fonts/newsreader-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
:root {
  font-family: Instrument, Arial, sans-serif;
  --canvas: #121311;
  --canvas-soft: #171915;
  --surface: rgb(29 32 26 / 78%);
  --surface-solid: #1b1d19;
  --surface-raised: #272a23;
  --gold: #d8c49b;
  --gold-bright: #e7d8b8;
  --gold-soft: rgb(216 196 155 / 13%);
}
body {
  background:
    radial-gradient(ellipse at 80% 0%, #a494671a, transparent 50rem), #121311;
}
h1,
h2 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
}
.brand {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--gold);
}
.brand .mini-mark {
  display: none;
}
.mark {
  font-family: Newsreader, Georgia, serif;
  background: var(--gold);
}
.eyebrow {
  color: var(--gold);
}
button {
  background-color: var(--gold);
}
input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px #d8c49b24;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}