:root {
  --brand-primary: #1e3a5f;
  --brand-secondary: #de7c1e;
  --brand-accent-1: #a97c2f;
  --brand-ink: #1e1b19;
  --brand-grey: #5b5551;
  --brand-light-grey: #d9d3cc;
  --brand-background: #f7f2ea;
  --brand-success: #4f6f49;
  --brand-error: #a83a2a;
  --brand-surface: #ffffff;

  --font-display: "Spectral", Georgia, serif;
  --font-sans: "Archivo", -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--brand-background);
  color: var(--brand-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

a, button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-rise {
  animation: rise-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-rise-delay-1 {
  animation-delay: 0.14s;
}

.hero-rise-delay-2 {
  animation-delay: 0.28s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-rise,
  .hero-rise-delay-1,
  .hero-rise-delay-2 {
    animation: none;
  }
  * {
    transition-duration: 0.001ms !important;
  }
}

/* Mobile nav menu, toggled by js/main.js */
#mobile-menu[hidden] {
  display: none;
}