:root {
  --paper: #f4f7f8;
  --paper-2: #e6eef1;
  --ink: #13202b;
  --ink-soft: #3c4d5c;
  --line: #d3e0e5;
  --teal: #0e6b66;
  --teal-deep: #0a524e;
  --sun: #e6b23c;
  --sun-deep: #c9921c;
  --white: #fbfcfd;
  --navy: #102833;
  --navy-2: #1a3846;
  --max: 1120px;
  --sans: "Figtree", sans-serif;
  --serif: "Literata", "Iowan Old Style", serif;
  --shadow: 0 22px 50px rgba(16, 40, 51, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); }
button, input, textarea { font: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; scroll-margin-top: 5.5rem; }
h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 0.45em; }
h3 { font-size: 1.28rem; margin: 0 0 0.35em; }
p { margin: 0 0 0.9em; }
.skip {
  position: absolute; left: 1rem; top: -4rem; background: var(--navy); color: white;
  padding: 0.5rem 0.8rem; z-index: 20;
}
.skip:focus { top: 0.6rem; }