/* Aqualyt — Base */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--color-aqua); }

button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--text-strong);
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  color: var(--color-mint);
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem,   4.6vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem);  font-variation-settings: 'opsz' 24, 'SOFT' 50; letter-spacing: -0.005em; }

p { margin: 0; }

::selection { background: var(--color-deep); color: var(--bg-page); }