@font-face {
  font-family: "Lilita One";
  src: url("lilita.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #100e0c;
  --asphalt: #17130f;
  --panel: #2a221b;
  --panel-2: #3a2e22;
  --cream: #fff3d6;
  --muted: #cbb89a;
  --green: #2fce45;
  --green-deep: #0f6a22;
  --red: #ff3b30;
  --amber: #ffbf1f;
  --gold: #f6c945;
  --line: rgba(255, 220, 160, 0.18);
  --shadow: #070604;
  --display: "Lilita One", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Trebuchet MS", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 700;
}

@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  background-image:
    linear-gradient(180deg, rgba(16, 14, 12, 0.55), rgba(16, 14, 12, 0.88)),
    url("backdrop.webp");
  background-size: cover;
  background-position: center;
}

button, input, a { font: inherit; color: inherit; }

button { cursor: pointer; }

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

h1, h2, h3, strong, .btn, .brand strong, .kicker {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

h1, h2, h3, p { margin: 0; }

h1 { font-size: clamp(1.7rem, 6vw, 3.1rem); line-height: 0.95; }

h2 { font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.05; }

p { line-height: 1.35; }

a { text-decoration: none; }

.ico { display: inline-flex; width: 1.15em; height: 1.15em; }

.ico svg { width: 100%; height: 100%; }

.kicker {
  color: var(--amber);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.muted { color: var(--muted); }