@font-face {
  font-family: "Alexandria";
  src: url("../fonts/Alexandria-subset.594aebfb9f87.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

html {
  font: var(--text-body-1);
  color: var(--color-text-primary);
  background: var(--color-body-bg);
  -webkit-text-size-adjust: 100%;
}

html:lang(ar) {
  letter-spacing: 0;
}

body {
  margin: 0;
  min-block-size: 100vh;
}

h1,
h2,
h3,
h4,
p {
  margin-block: 0;
}

h1,
h2,
h3,
h4 {
  font: var(--text-h4);
}

a {
  color: var(--color-primary-500);
  text-decoration: none;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[dir="ltr"] .num,
.num {
  direction: ltr;
  unicode-bidi: isolate;
}

.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-center {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: var(--pad-6);
}

/* Page-to-page moves cross-fade instead of flashing white (Chrome, Edge, Safari 18.2+; other
   browsers simply navigate as before). Off for people who ask for less motion. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}