@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: linear-gradient(var(--wood-dark), var(--wood));
    color: var(--cream);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  section {
    scroll-margin-top: 0;
    transition: box-shadow 220ms ease, filter 220ms ease;
  }

  section.is-nav-target {
    animation: section-target-flash 900ms ease-out;
  }

  @keyframes section-target-flash {
    0% {
      box-shadow: inset 0 0 0 0 rgba(235, 212, 65, 0);
      filter: brightness(1);
    }

    35% {
      box-shadow: inset 0 0 0 4px rgba(235, 212, 65, 0.85);
      filter: brightness(1.08);
    }

    100% {
      box-shadow: inset 0 0 0 0 rgba(235, 212, 65, 0);
      filter: brightness(1);
    }
  }

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

  a:focus-visible,
  button:focus-visible {
    outline: 3px solid rgba(235, 212, 65, 0.95);
    outline-offset: 3px;
  }

  h3 {
    margin-top: 0;
    color: var(--gold);
    font-family: "Rye", cursive;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.16);
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}