:root { --fence: #5b4230; --slate: #3a434b; --cream: #f6f2ec; --ink: #22190f; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body { font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: Verdana, 'Segoe UI', ui-sans-serif, sans-serif; }
#scroll-progress { transform-origin: left; transform: scaleX(0); transition: transform 0.1s linear; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.counter-stat, [data-counter-target] { font-variant-numeric: tabular-nums; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--slate); outline-offset: 3px; }
#back-to-top { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; }
#back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.fence-slats {
  background-image: repeating-linear-gradient(90deg, #7a5a3c 0px, #7a5a3c 22px, #5b4230 22px, #5b4230 26px);
}