@font-face { font-family: "Plex Serif"; font-weight: 600; font-display: swap; src: url("/fonts/serif-600.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url("/fonts/sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/sans-arabic-600.woff2") format("woff2"); }

:root { --bg: #052e2e; --ink: #f2f7f5; --mut: #9dbdb7; --line: rgba(242, 247, 245, 0.3); --focus: #ff6b2c; }
@media (prefers-color-scheme: light) {
  :root { --bg: #fafbfa; --ink: #052e2e; --mut: #3f6362; --line: rgba(5, 46, 46, 0.3); --focus: #c2410c; }
  .logo.logo-dark { display: none; }
}
@media (prefers-color-scheme: dark) { .logo.logo-light { display: none; } }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(1.25rem, 5vw, 4rem);
  font-family: "Plex Sans", "Plex Sans Arabic", system-ui, sans-serif;
}
main { align-self: center; max-width: 46rem; }
.logo { display: block; height: clamp(3.5rem, 9vw, 5.5rem); width: auto; }
h1 {
  margin: clamp(2rem, 6vw, 3.5rem) 0 0;
  font-family: "Plex Serif", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
:lang(ar) h1 { font-family: "Plex Sans Arabic", system-ui, sans-serif; line-height: 1.4; letter-spacing: 0; }
nav { display: flex; gap: 1.25rem; padding-top: 2rem; border-top: 1px solid var(--line); font-weight: 600; }
nav a { color: var(--mut); text-decoration: none; padding-block: 0.5rem; }
nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
nav a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }