@font-face {
  font-family: "Azarbanu Naskh";
  src: url("/noto-naskh-arabic.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #fff; color: #171717; }
body {
  min-height: 100svh;
  margin: 0;
  padding: 48px 20px;
  display: grid;
  place-items: center;
  font-family: "Azarbanu Naskh", "Geeza Pro", serif;
  -webkit-font-smoothing: antialiased;
}
main { width: fit-content; max-width: 100%; text-align: right; }
h1 {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 9px;
  margin: 0;
  font-size: clamp(30px, 7.7vw, 36px);
  line-height: 1.7;
  font-weight: 650;
}
.pronunciation, .gender {
  font-family: "Times New Roman", Times, serif;
  font-size: .94em;
  font-weight: 400;
}
.gender { font-size: 1em; }
p { margin: 0; }
.definition {
  margin-top: 1px;
  font-size: clamp(23px, 6.2vw, 29px);
  line-height: 1.8;
}
.etymology {
  font-size: clamp(20px, 5.6vw, 27px);
  line-height: 1.9;
}