/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Base
   إعادة الضبط، العناصر الأساسية، الأدوات المشتركة، وإتاحة الوصول.
   ═════════════════════════════════════════════════════════════════════════ */

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

html{
  background:var(--paper);
  color-scheme:light;
  scroll-behavior:smooth;
  /* يمنع الهيدر الثابت من تغطية العنوان عند القفز لمرساة */
  scroll-padding-top:90px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ar);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg, video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font:inherit; }

/* حالة التركيز — مرئية دائمًا للكيبورد، مخفية للفأرة */
:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:var(--radius);
}
.hero :focus-visible,
.portfolio :focus-visible,
.site-footer :focus-visible{ outline-color:var(--paper); }

/* ── أدوات الخط ─────────────────────────────────────────────────────────── */
.en{ font-family:var(--font-en); direction:ltr; }
.hand{ font-family:var(--font-serif); font-style:italic; direction:ltr; }
.mono{ font-family:var(--font-mono); direction:ltr; }
.ar-display{ font-family:var(--font-display); }

/* ── التخطيط ────────────────────────────────────────────────────────────── */
.wrap{ max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--space-gutter); }
section{ padding-block:var(--space-section); position:relative; }

/* ── إتاحة الوصول ───────────────────────────────────────────────────────── */
.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:0; top:-100px; z-index:999;
  background:var(--violet); color:#fff; padding:12px 20px;
  font-size:14px; transition:top var(--dur-fast) ease;
}
.skip-link:focus{ top:0; }

/* مصيدة البوتات — مخفية عن البشر، مقروءة للبوتات */
.hp{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── الترويسات المشتركة ─────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--font-mono); direction:ltr;
  font-size:var(--fs-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{ content:''; width:20px; height:1px; background:currentColor; flex:none; }

.title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-title); line-height:1.3; letter-spacing:-.01em; max-width:820px;
}
.title .hl{ color:var(--violet); }

.lead{
  margin-top:18px; font-size:var(--fs-lead); line-height:1.95;
  color:var(--grey); max-width:600px;
}

.section-head--split{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; flex-wrap:wrap;
}
.section-head--split .lead{ margin-top:0; }

/* ── ظهور تدريجي عند التمرير ────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--dur-slow) ease, transform var(--dur-slow) ease;
}
.reveal.is-in{ opacity:1; transform:none; }

/* بلا JS: أظهر كل شيء فورًا — المحتوى لا يعتمد على السكربت */
.no-js .reveal{ opacity:1; transform:none; }

/* ── الأزرار ────────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--font-ar); font-size:15px; font-weight:500;
  padding:15px 30px; border-radius:var(--radius);
  display:inline-block; transition:all var(--dur-fast) ease;
}
.btn--primary{ background:var(--violet); color:#fff; }
.btn--primary:hover{ background:var(--violet-deep); transform:translateY(-2px); }
.btn--outline{ border:1px solid rgba(246,244,241,.35); color:var(--paper); }
.btn--outline:hover{ border-color:var(--paper); }

/* ── صفحة الخطأ ─────────────────────────────────────────────────────────── */
.error-page{ min-height:70vh; display:flex; align-items:center; text-align:center; }
.error-page .eyebrow{ justify-content:center; }
.error-page .lead{ margin-inline:auto; }
.error-page .btn{ margin-top:34px; }