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

[hidden] { display: none !important; }

:root {
  --c-900: #001E30;
  --c-800: #003050;
  --c-700: #005278;
  --c-600: #006D91;
  --c-500: #0088B4;
  --c-400: #2BB5D8;
  --c-300: #5CCAE6;
  --c-200: #9ADDF2;
  --c-150: #C5EEF8;
  --c-100: #E4F5FB;
  --c-50:  #EDF8FD;
  --c-10:  #F8FBFD;
  --c-white: #ffffff;

  --ff-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --ff-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  --max-w:  1200px;
  --pad-x:  1.25rem;
}

@media (min-width: 1024px) {
  :root { --pad-x: 3rem; }
}

@media (min-width: 1280px) {
  :root { --pad-x: 4rem; }
}

html {
  scroll-behavior: auto;
}

body {
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-800);
  background-color: var(--c-10);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--ff-serif);
  font-weight: 400;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  color: var(--c-900);
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  color: var(--c-900);
}

p {
  max-width: 62ch;
}

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

img {
  display: block;
  max-width: 100%;
}

button, input, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}