:root {
  --color-primary: #0f766e;
  --color-primary-contrast: #f8fafc;
  --color-bg: #f5f1e8;
  --color-surface: #fffdf8;
  --color-text: #17312f;
  --color-muted: #61716e;
  --color-link: #0f766e;
  --color-link-hover: #115e59;
  --color-border: #d9dfd7;
  --font-heading: "Georgia", "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-link-hover);
  outline-offset: 3px;
}

.prose-copy p {
  line-height: 1.85;
}

.prose-copy a,
.sidebar-link,
.footer-link {
  transition: color 180ms ease, opacity 180ms ease;
}

.prose-copy a:hover,
.sidebar-link:hover,
.footer-link:hover {
  color: var(--color-link-hover) !important;
}

.gallery-track {
  animation: drift 38s linear infinite;
  width: max-content;
}

.gallery-track:hover {
  animation-play-state: paused;
}

@keyframes drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gallery-track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .gallery-track {
    animation-duration: 22s;
  }
}