:root {
  --field-green: #344c3d;
  --field-green-deep: #26372d;
  --warm-acre: #c5a66a;
  --deep-soil: #292b28;
  --canvas: #efe9de;
  --canvas-light: #f5f1e9;
  --open-sky: #8fa9ac;
  --line: rgba(52, 76, 61, 0.36);
  --display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --body: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color: var(--deep-soil);
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  margin: 0;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.42), transparent 26rem),
    radial-gradient(circle at 88% 72%, rgba(197, 166, 106, 0.08), transparent 34rem),
    var(--canvas);
}

body::before {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(41, 43, 40, 0.22) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 72% 64%, rgba(41, 43, 40, 0.17) 0 0.5px, transparent 0.75px);
  background-position: 0 0, 4px 6px;
  background-size: 9px 11px, 13px 15px;
  mix-blend-mode: multiply;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--canvas-light);
  background: var(--field-green);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--warm-acre);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}