@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=IBM+Plex+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap&subset=vietnamese');

:root {
  --display: "Cormorant Garamond", "Noto Serif", "Times New Roman", serif;
  --reading: "Lora", "Noto Serif", "Times New Roman", serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}

h1,
.letter h2,
.tool-card h3 {
  font-family: var(--display);
  font-weight: 500;
}

h1 {
  letter-spacing: -2.5px;
}

h1 em {
  font-family: var(--display);
  font-weight: 500;
}

.lead,
.prose p,
.signature,
.tool-card p,
footer p {
  font-family: var(--reading);
}

.lead,
.prose p {
  font-weight: 400;
  letter-spacing: 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

.terminal,
.terminal input,
.terminal button,
.section-mark,
.tool-number,
.coming {
  font-family: var(--mono);
}

@media (max-width: 480px) {
  h1 { letter-spacing: -1.2px; }
}

.tools .tool-card + .tool-card { margin-top: 14px; }