@font-face { font-family: "EB Garamond"; src: url("fonts/EBGaramond-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/EBGaramond-Italic-var.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Naskh"; src: url("fonts/NotoNaskhArabic-Regular.woff2") format("woff2"); font-weight: 400 500; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF; font-display: swap; }
@font-face { font-family: "Naskh"; src: url("fonts/NotoNaskhArabic-Bold.woff2") format("woff2"); font-weight: 600 800; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF; font-display: swap; }

:root {
  --green-950: #0d1912;
  --green-900: #13221a;
  --green-850: #182b20;
  --green-800: #1f3527;
  --green-700: #2c4836;
  --green-500: #4e613f;
  --gold: #b8955d;
  --gold-hi: #cba66e;
  --gold-soft: rgba(203, 166, 110, 0.32);
  --gold-ink: #17120a;
  --cream: #efe6d9;
  --cream-2: #e5d9c6;
  --paper: #f6f0e6;
  --ink: #18261d;
  --ink-2: #4b5a4f;
  --on-dark: #f3ece0;
  --on-dark-2: #c4c6b4;
  --line-dark: rgba(203, 166, 110, 0.22);
  --line: rgba(24, 38, 29, 0.14);
  --serif: "EB Garamond", "Naskh", Georgia, serif;
  --sans: "Inter", "Naskh", system-ui, sans-serif;
  --r: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
:lang(ar) { --serif: "Naskh", "EB Garamond", serif; --sans: "Naskh", "Inter", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold-hi); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wordmark { font-family: "EB Garamond", serif; font-weight: 500; letter-spacing: 0.24em; white-space: nowrap; }
.mark { display: block; flex: none; }
.mark .v { fill: var(--gold); }
.mark .p { fill: var(--pv-bowl, var(--green-800)); }
.on-dark .mark .p { fill: var(--green-500); stroke: var(--gold); stroke-width: 3; paint-order: stroke; }

.concept-badge { font: 600 11px/1.4 var(--sans); letter-spacing: 0.01em; text-align: center; padding: 10px 16px; color: var(--on-dark-2); }
.concept-badge span { color: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}