/* ===== Design tokens: warm paper + brick/pine identity ===== */
:root {
  --paper: #faf8f4;
  --paper-deep: #f2eee6;
  --surface: #ffffff;
  --ink: #191a1f;
  --ink-2: #3c3f48;
  --muted: #6b6f7a;
  --line: #e6e1d8;
  --line-strong: #d6cfc2;

  --brand: #8a3324;
  --brand-hover: #6f281c;
  --brand-soft: #f6e6e1;
  --pine: #2f5d52;
  --pine-soft: #e3ece9;

  --font-display: "Readex Pro", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  --step-display: clamp(2.3rem, 1.2rem + 4.4vw, 4.1rem);
  --step-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  --step-h3: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  --step-body: 1.02rem;
  --step-small: 0.86rem;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 104px;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(25, 26, 31, .05), 0 6px 18px -12px rgba(25, 26, 31, .18);
  --shadow-md: 0 2px 4px rgba(25, 26, 31, .04), 0 22px 44px -26px rgba(25, 26, 31, .26);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --maxw: 1140px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.25;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-display); line-height: 1.1; font-weight: 700; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Latin numerals + latin words keep their own face inside Arabic text */
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-family: "IBM Plex Sans", var(--font-body); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 50%; transform: translate(50%, -120%);
  z-index: 100; background: var(--ink); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius) var(--radius);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(50%, 0); }