@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alan Sans Arabic";
  src: url("fonts/AlanSans-Arabic-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
}

* {
  border-color: var(--color-navy-200);
}

html {
  scroll-behavior: smooth;
}

body {
  background: #ffffff;
  color: var(--color-navy-950);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  font-family: var(--font-body-ar), ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: var(--font-display), Georgia, serif;
  letter-spacing: -0.02em;
}

html[lang="ar"] .font-display {
  font-family: var(--font-display-ar), sans-serif;
  letter-spacing: 0;
}

::selection {
  background: var(--color-gold-300);
  color: var(--color-navy-950);
}

:focus-visible {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 3px;
}

.reveal {
  opacity: 0;
}
.reveal.is-visible {
  animation: var(--animate-fade-up);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    animation: none !important;
  }
}

.brand-watermark {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  aspect-ratio: 1000 / 932;
}
.brand-watermark--navy {
  -webkit-mask-image: url("img/icon-navy.png");
  mask-image: url("img/icon-navy.png");
  background-color: #051226;
}
.brand-watermark--white {
  -webkit-mask-image: url("img/icon-white.png");
  mask-image: url("img/icon-white.png");
  background-color: #ffffff;
}

.locale-menu {
  display: none;
}
.locale-dropdown.is-open .locale-menu {
  display: block;
}
.locale-dropdown.is-open .locale-chevron {
  transform: rotate(180deg);
}

#mobile-nav {
  display: none;
}
#mobile-nav.is-open {
  display: block;
}