@layer components {
  .landing-nav {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: var(--color-sand-80);
    box-shadow: var(--shadow-nav);
    inset-block-start: 0;
    inset-inline: 0;
    padding: var(--space-xl) var(--space-3xl);
    position: fixed;
    z-index: 100;
  }

  @media (width <= 640px) {
    .landing-nav {
      padding: var(--space-lg) var(--space-xl);
    }
  }

  .landing-nav-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-inline-size: var(--content-max-width);
  }

  .landing-nav-logo {
    background-image: linear-gradient(135deg, #5c3d2e, #b8860b);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .landing-title-text {
    background-image: linear-gradient(
      135deg,
      #5c3d2e 0%,
      #8b6914 25%,
      #b8860b 50%,
      #d4a843 75%,
      #5c3d2e 100%
    );
    background-size: 200% 200%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .landing-title-text {
      animation: shimmer 12s ease-in-out infinite;
      will-change: background-position;
    }
  }
}