:root {
  --green-950: #082818;
  --green-900: #0f3f2a;
  --green-800: #145236;
  --cream-50: #f8f4ea;
  --cream-100: #eee5d4;
  --ink: #111412;
  --muted: #6d716d;
  --white: #fff;
  --line: rgba(17, 20, 18, 0.12);
  --hero-image: url("../assets/hero-golden-gate.jpg");
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-serif: "HarveySerifFont", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tracking-tight-ui: -0.012em;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  background: var(--cream-50);
  font-family: var(--font);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  font-feature-settings: "kern";
  letter-spacing: var(--tracking-tight-ui);
  text-rendering: optimizeLegibility;
  animation: pageReveal 1200ms var(--ease-out) both;
}

.reveal-ready [data-animate] {
  visibility: hidden;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 112px, 0) scale(0.976);
  transition:
    opacity 1420ms var(--ease-out),
    filter 1540ms var(--ease-out),
    transform 1540ms var(--ease-out),
    visibility 0ms linear 1540ms;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}

.reveal-ready [data-animate].is-visible {
  visibility: visible;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: var(--reveal-delay, 0ms);
  transition-property: opacity, filter, transform, visibility;
  transition-duration: 1420ms, 1540ms, 1540ms, 0ms;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes pageReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}