/* Amuse at night: the landing page's evening palette and faces */
@font-face { font-family: 'Spirit'; src: url('fonts/NewSpiritCondensed-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Spirit'; src: url('fonts/NewSpiritCondensed-Medium.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Kansas'; src: url('fonts/NewKansasSwash-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: block; }
@font-face { font-family: 'Social'; src: url('fonts/ABCSocial-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Social'; src: url('fonts/ABCSocial-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Social'; src: url('fonts/ABCSocial-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ground: #16120e; --ground-2: #221b14; --ground-3: #2e251b;
  --ink: #f4ecdc; --ink-soft: #f4ecdcb3; --ink-faint: #f4ecdc5c; --rule: #f4ecdc24;
  --tomato: #bb2d1c; --tomato-hi: #e0533d; --butter: #efca68; --linen: #f7f2e8;
  --venue: var(--butter);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: 'Social', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.display { font-family: 'Spirit', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; line-height: .92; text-wrap: balance; }
.swash { font-family: 'Kansas', Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.eyebrow { font-family: 'Social', sans-serif; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.dot::before { content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--tomato-hi); margin-right: .7em; vertical-align: .12em; }

/* the house button: butter, ringed, presses in */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; border: 0; cursor: pointer;
  background: var(--butter); color: var(--ground); font-weight: 500; border-radius: 999px; padding: .95em 1.6em;
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--butter); transition: transform .18s var(--spring), box-shadow .2s, background .2s; }
.btn:hover { background: #f6d887; }
.btn:active { transform: scale(.96) translateY(1px); transition-duration: .06s; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.btn.tomato { background: var(--tomato); color: var(--linen); box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--tomato); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--butter); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }