*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: clamp(2rem,   4vw,   3.25rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h3 { font-size: 1.2rem; }

a      { color: var(--color-accent); text-decoration: none; transition: opacity var(--dur) var(--ease); }
a:hover { opacity: .8; }

img    { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.main         { min-height: 70vh; }
.section      { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-3); }
.section__sub { color: var(--color-muted); max-width: 60ch; margin-bottom: var(--space-4); }
.lead         { font-size: 1.2rem; color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}