@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");
:root {
  --ink: #403641;
  --muted: #716675;
  --blue: #afd2e9;
  --lavender: #9d96b8;
  --mauve: #9a7197;
  --plum: #886176;
  --wine: #7c5869;
  --paper: #fffdfc;
  --line: rgba(64, 54, 65, 0.14);
  --shadow: 0 20px 50px rgba(124, 88, 105, 0.15);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--blue);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
a {
  color: inherit;
}
h1, h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.045em;
}
h1 {
  max-width: 680px;
  color: var(--paper);
  font-size: clamp(2.9rem, 8vw, 6.5rem);
  line-height: 0.95;
}
h1 > .hero__title-mark {
  color: var(--lavender);
  font-size: 0.55em;
  vertical-align: top;
}