/*
  Base stylesheet for default HTML element styles.
  Use this file for typography, links, body styles, and global accessibility defaults.
  Do not store customer data, CRM data, emails, secrets, or private company records here.
*/

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 86% 10%, rgba(216, 114, 36, 0.16), transparent 28rem),
    radial-gradient(circle at 12% 18%, rgba(22, 108, 120, 0.08), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(251, 247, 239, 0.96));
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0;
}

h1 {
  max-width: 11ch;
  font-size: clamp(3.1rem, 6vw, 6rem);
  line-height: 0.96;
}

h2 {
  font-size: clamp(2rem, 4.8vw, 4.6rem);
  line-height: 1;
  max-width: 14ch;
}

h3 {
  font-size: 1.18rem;
  line-height: 1.2;
}

p {
  max-width: 68ch;
  color: var(--muted);
}

a {
  color: inherit;
}

a:hover {
  color: var(--orange-dark);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}