:root {
  --color-primary: #0f766e;
  --color-primary-contrast: #ffffff;
  --color-bg: #f4f7f5;
  --color-surface: #ffffff;
  --color-text: #17313b;
  --color-muted: #61747b;
  --color-link: #0f766e;
  --color-link-hover: #115e59;
  --color-border: #d7e3df;
  --font-heading: "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", 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;
}

a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

a:hover {
  color: var(--color-link-hover) !important;
}

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

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 1rem;
}

.display-none {
  display: none;
}

.prose-copy p {
  margin: 0 0 1.25rem;
  line-height: 1.8;
}

.prose-copy h1,
.prose-copy h2,
.prose-copy h3 {
  font-family: var(--font-heading);
}

@media (max-width: 700px) {
  .prose-copy p {
    line-height: 1.7;
  }
}