html {
  scroll-behavior: smooth;
}

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

.hero-grid {
  background-image:
    linear-gradient(to right, rgba(110, 123, 92, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110, 123, 92, 0.12) 1px, transparent 1px);
  background-size: 40px 40px;
}

::selection {
  background: #4F5A40;
  color: #FBF8F1;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #7C4530;
  outline-offset: 2px;
  border-radius: 2px;
}

.lang-flag svg {
  transform-origin: 50% 50%;
  transition: transform 0.25s ease;
}

.lang-flag:hover svg,
.lang-flag:focus-visible svg {
  transform: rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
  .lang-flag svg {
    transition: none;
  }
}

/* Pencil-drawn buttons: the outline is always there, the hatching fills in on hover. */
.sketch-btn-hatch {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sketch-btn-filled .sketch-btn-hatch {
  opacity: 0.75;
}

.sketch-btn:hover .sketch-btn-hatch,
.sketch-btn:focus-visible .sketch-btn-hatch {
  opacity: 1;
}