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

:root {
  --primary: #d9ec43;
  --light: #f8f8f8;
  --white: #fff;
  --black: #292929;
  --black-bg: #111111;
  --black-border: #4a4848;
  --black-muted: #838383;
  --border: #ededed;
  --border-darker: #cdc5c5;
  --paper: #f2f0eb;
  /* sizing */
  --p-inline: clamp(16px, 4.3vw, 70px);
}

html,
body {
  min-height: 100vh;
  scrollbar-width: thin;
  font-family: 'Mersad', sans-serif !important;
  /* scroll-behavior: smooth; */
}

button {
  font-family: 'Mersad', sans-serif !important;
}

.mask {
  display: block;
  overflow: hidden;
  /* a little room so ascenders and descenders are not cut, cancelled out by the negative margin */
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.reveal {
  display: block;
  animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
}

@keyframes rise {
  from {
    transform: translateY(115%);
  }

  to {
    transform: translateY(0);
  }
}


/* Pages */
main.page {
  width: 100%;
  padding: 15dvh var(--p-inline);
}

/* Pages */