/* ── Base ── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body { margin: 0; }
  img { display: block; max-width: 100%; }

  /* ── Scroll reveal (progressive enhancement) ── */
  @media (prefers-reduced-motion: no-preference) {
    .scroll-animate {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
  }

  /* ── Header scroll state ── */
  #site-header.scrolled {
    background: rgba(253, 252, 248, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(6, 78, 59, 0.08);
  }
  #site-header.scrolled .font-display { color: #064e3b; }

  /* ── Mobile menu ── */
  #mobile-menu.open {
    translate: 0 0;
    opacity: 1;
    pointer-events: all;
  }

  /* ── Selection ── */
  ::selection { background: #064e3b; color: #fef9ee; }
</style>