/* ══════════════════════════════════════════════════════════════
   صفحة الأعمال — أرشيف مكاني
   البنية: هيدر الموقع · الهيرو · الـstatement · الأرشيف الأسود · الفوتر
   الأرشيف حقل أفقي: الأعمال أجسام تتحرك داخل إطار الشاشة.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Thmanyah';src:url('/fonts/thmanyahserifdisplay-Light.woff2')   format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Thmanyah';src:url('/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah';src:url('/fonts/thmanyahserifdisplay-Medium.woff2')  format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah';src:url('/fonts/thmanyahserifdisplay-Bold.woff2')    format('woff2');font-weight:700;font-display:swap}

:root{
  --paper:#FAF8F2;
  --ink:#0F0F0F;
  --soft:#5C5C5C;
  --line:rgba(15,15,15,.14);
  --offwhite:#EEEEE8;
  --signal:#BBE222;

  --stage:#050505;                 /* أرض الأرشيف */
  --stage-fg:rgba(238,238,232,.92);
  --stage-dim:rgba(238,238,232,.44);
  --stage-line:rgba(238,238,232,.16);

  --gutter:clamp(20px,4.4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --navh:0px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Thmanyah',Georgia,'Times New Roman',serif;
  font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
[dir=rtl] *{letter-spacing:normal}          /* فخ iOS: التباعد يكسر اتصال الحروف */

.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}

/* درع ضد الـCSS العام في /mm/nav.js (يفرض padding على main>section) */
body main>section.ar-band{max-width:none!important;margin-inline:0!important;width:100%!important}

body main>section.ar-archive{padding-inline:0!important;padding-block:0!important}

/* ══════════════════════════════════════════════════════════════
   2 · المقدّمة — أول مشهد داخل المسرح
   ليست قسماً مستقلاً: لو كانت لوحاً ثابتاً منفصلاً لبقي بعد تلاشيه
   شاشةٌ سوداء ميتة كاملة قبل أن يبدأ الأرشيف (قِسناها: 868 بكسل).
   هنا تشترك مع الحقل في نفس المسرح، فالانتقال بلا فراغ.
   ══════════════════════════════════════════════════════════════ */
.ar-intro{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:grid;place-items:center;
}
.ar-intro-bg{position:absolute;inset:0;opacity:var(--intro-bg,1)}
.ar-intro-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.ar-intro-veil{
  position:absolute;inset:0;opacity:var(--intro-bg,1);
  background:linear-gradient(to bottom,rgba(5,5,5,.56) 0%,rgba(5,5,5,.44) 45%,rgba(5,5,5,.70) 100%);
}
.ar-intro-text{
  position:relative;z-index:2;width:100%;
  max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);
  opacity:var(--intro-text,1);
  transform:translateY(calc((1 - var(--intro-text,1)) * -22px));
}
.ar-statement{
  margin:0;max-width:min(62%,880px);
  font-weight:400;font-size:clamp(21px,2.7vw,40px);line-height:1.64;
  color:var(--offwhite);text-shadow:0 2px 26px rgba(5,5,5,.6);
  text-wrap:pretty;
  word-break:keep-all;overflow-wrap:normal;hyphens:none;-webkit-hyphens:none;
}

/* ══════════════════════════════════════════════════════════════
   3 · الأرشيف — الصالة السوداء
   .ar-track طويل عمودياً؛ .ar-stage ثابت داخله بارتفاع الشاشة.
   تمرير الصفحة العادي يُترجم لحركة أفقية داخل الحقل، فما فيه
   خطف للسكرول ولا حبس: البداية والنهاية تُفلت الصفحة طبيعياً.
   ══════════════════════════════════════════════════════════════ */
.ar-archive{background:var(--stage);color:var(--stage-fg)}
.ar-track{position:relative;height:100svh}  /* JS يضبطه */          /* JS يضبطه = 100svh + مسافة السفر */
.ar-stage{
  /* الهيدر الموحّد sticky فوقنا — نلتصق تحته لا خلفه */
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:var(--stage);
  cursor:grab;touch-action:pan-y;
  opacity:0;transition:opacity .7s var(--ease);
}
.ar-stage.ready{opacity:1}
.ar-stage.dragging{cursor:grabbing}

/* وهج خافت في المركز — البؤرة البصرية للحقل */
.ar-stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(115% 60% at 50% 50%,rgba(238,238,232,.055) 0%,rgba(238,238,232,0) 65%);
}

.ar-field{position:absolute;inset:0;z-index:1}
.ar-plane{
  position:absolute;left:0;top:0;
  transform-origin:50% 50%;
  text-decoration:none;color:inherit;
  display:block;
}
.ar-frame{
  position:relative;display:block;width:100%;height:100%;
  overflow:hidden;background:#0d0d0d;
}
/* تدرّج أسود من أسفل البطاقة — يضمن قراءة البيانات فوق أي صورة */
.ar-frame::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:62%;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(5,5,5,.94) 0%, rgba(5,5,5,.80) 26%,
    rgba(5,5,5,.42) 58%, rgba(5,5,5,0) 100%);
}
.ar-frame img{
  width:100%;height:100%;object-fit:cover;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  pointer-events:none;
}
/* اللوحات الطولية جداً أو التي لا تحتمل القص تُعرض كاملة داخل إطار أسود */
.ar-plane[data-fit="contain"] .ar-frame img{object-fit:contain;background:#080808}

/* تمييز شديد التحفّظ للعمل النشط — الصورة تبقى دقيقة */
.ar-plane .ar-frame{transition:filter .5s linear}
/* لا ننتقل أبداً إلى filter:none — القيمة غير قابلة للاستيفاء
   فتُفرِغ الطبقة لحظةَ التبديل وتظهر الصورة سوداء. القيم صريحة على الطرفين. */
.ar-plane[data-active="0"] .ar-frame{filter:saturate(.88) brightness(.84)}
.ar-plane[data-active="1"] .ar-frame{filter:saturate(1) brightness(1)}

/* عند وجود الماوس داخل الحقل: البطاقة تحته حادّة، والباقي يُغبَّش */
@media (hover:hover) and (pointer:fine){
  .ar-field:hover .ar-plane .ar-frame{
    filter:blur(3px) saturate(.8) brightness(.62);
  }
  .ar-field:hover .ar-plane:hover .ar-frame{
    filter:saturate(1) brightness(1);
  }
  .ar-field:hover .ar-plane .ar-meta{opacity:.18}
  .ar-field:hover .ar-plane:hover .ar-meta{opacity:1}
}

/* ══════════════ واجهة الأرشيف — صغيرة مقابل الصور ══════════════ */
.ar-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.ar-ui > *{pointer-events:auto}

/* ─── مبدّل الوضع — أعلى الوسط ─── */
.ar-modes{
  position:absolute;top:clamp(92px,11vh,116px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.ar-modes-row{display:flex;border:1px solid var(--stage-line);background:rgba(10,10,10,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ar-mode{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:9px 11px;display:grid;place-items:center;
  transition:background .35s var(--ease);
}
.ar-mode + .ar-mode{border-inline-start:1px solid var(--stage-line)}
.ar-mode svg{display:block}
.ar-mode rect{fill:none;stroke:rgba(238,238,232,.42);stroke-width:1.6;transition:stroke .35s var(--ease)}
.ar-mode[aria-pressed="true"]{background:rgba(238,238,232,.07)}
.ar-mode[aria-pressed="true"] rect{stroke:var(--signal)}
.ar-mode-label{font-size:10px;font-weight:500;color:var(--stage-dim);text-align:center;line-height:1.4}
.ar-mode-label b{display:block;font-weight:500;color:var(--stage-fg)}

/* ─── مؤشر الموضع في الحقل ─── */
.ar-progress{
  position:absolute;bottom:clamp(16px,3vh,28px);left:50%;transform:translateX(-50%);
  width:min(260px,42vw);height:1px;background:rgba(238,238,232,.18);
}
.ar-progress i{position:absolute;inset-block:-1px;inset-inline-start:0;width:0;background:var(--signal);display:block}

/* ─── تلميح التنقل ─── */
.ar-hint{
  position:absolute;bottom:clamp(14px,2.6vh,26px);inset-inline-start:var(--gutter);
  color:var(--stage-dim);font-size:10.5px;font-weight:500;
  transition:opacity .5s var(--ease);
}
.ar-stage.moved .ar-hint{opacity:0}

/* ══════════════ الذيل ══════════════ */
.ar-tail{padding:clamp(80px,12vh,150px) var(--gutter);background:var(--paper)}
.ar-tail-inner{max-width:1180px;margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:22px;flex-wrap:wrap}
.ar-link{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;
  font-size:clamp(15px,1.5vw,20px)}
.ar-link .arw{display:inline-block;transform:scaleX(-1);transition:transform .55s var(--ease)}
.ar-link:hover .arw{transform:scaleX(-1) translateX(7px)}

/* ══════════════════════════════════════════════════════════════
   لوحي — عملان رئيسيان في الإطار، بلا اعتماد على الهوفر
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .ar-statement{max-width:76%}
}

/* ══════════════════════════════════════════════════════════════
   جوال — عمل واحد مهيمن وجيرانه يطلّون، والواجهة تنكمش
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* البنر بارتفاع نصّه فقط — لا لوح ممتد ولا تلاشٍ بالتمرير */
  .ar-statement{max-width:100%;font-size:clamp(19px,4.9vw,25px);line-height:1.68}
  
  .ar-modes-row{background:rgba(10,10,10,.82)}
  .ar-mode{padding:12px 15px}                 /* هدف لمس ≥44px */
  .ar-progress{bottom:auto;top:14px;width:min(180px,50vw)}
  .ar-hint{display:none}
}

/* ══════════════════════════════════════════════════════════════
   احترام prefers-reduced-motion:
   يتوقف التمويه والعمق والقصور الذاتي، ويبقى التنقّل شغّالاً.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .ar-stage{opacity:1}
}

/* ── الخروج نحو صفحة العمل — انتقال قصير من الصورة المختارة ── */
.ar-veil{
  position:absolute;inset:0;z-index:4;background:var(--stage);
  opacity:0;pointer-events:none;transition:opacity .34s linear;
}
.ar-stage.leaving .ar-veil{opacity:1}
.ar-stage.leaving .ar-plane{transition:opacity .3s linear}
.ar-stage.leaving .ar-plane[data-leaving="0"]{opacity:0!important}
.ar-plane[data-leaving="1"]{z-index:5;transition:transform .48s cubic-bezier(.6,0,.2,1)}
@media (prefers-reduced-motion:reduce){
  .ar-veil,.ar-stage.leaving .ar-plane,.ar-plane[data-leaving="1"]{transition:none!important}
}

/* ══════════════════════════════════════════════════════════════
   الهيدر — نفس معالجة الصفحة الرئيسية
   الهيدر نفسه من /mm/nav.js؛ هذي طبقة عرض فقط: ثابت وشفاف،
   الاسم يسار والروابط ممتدة. القيم منقولة حرفياً من الرئيسية.
   ══════════════════════════════════════════════════════════════ */
body.ar-page .mm-nav{
  position:fixed; top:0; inset-inline:0;
  background:none; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.ar-page .mm-nav::before{
  content:""; position:absolute; inset-inline:0; top:0; height:210px;
  pointer-events:none; z-index:-1; opacity:0; transition:opacity .45s var(--ease);
  background:linear-gradient(to bottom,
    rgba(5,5,5,.55) 0%, rgba(5,5,5,.30) 34%,
    rgba(5,5,5,.10) 66%, rgba(5,5,5,0) 100%);
}
body.ar-page.over-dark .mm-nav::before{opacity:1}
body.ar-page .mm-nav-inner{
  direction:ltr; max-width:none;
  padding-inline:var(--gutter); padding-block:22px;
}
body.ar-page .mm-nav .mm-nav-brand{font-size:19px;font-weight:700}
body.ar-page .mm-nav .mm-nav-links{gap:clamp(26px,4.4vw,68px)}
@media (min-width:721px){
  body.ar-page .mm-nav .mm-nav-links{flex:1; justify-content:space-evenly}
}
body.ar-page .mm-nav .mm-nav-link{font-size:13.5px}

/* فوق الصالة السوداء: نفس ألوان الرئيسية بالضبط */
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-inner{text-shadow:0 1px 14px rgba(5,5,5,.55)}
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-brand{color:var(--offwhite)}
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-link{color:rgba(238,238,232,.9)}
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-link:hover,
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-link.active{color:var(--offwhite)}
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-lang{color:var(--offwhite);border-color:rgba(238,238,232,.42)}
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-lang:hover{background:var(--offwhite);color:var(--ink);border-color:var(--offwhite)}
body.ar-page.over-dark .mm-nav:not(.open) .mm-nav-burger span{background:var(--offwhite)}

/* فوق الورق الكريمي: نفس الشكل الشفاف، بحبر داكن ليبقى مقروءاً */
body.ar-page:not(.over-dark) .mm-nav:not(.open) .mm-nav-brand,
body.ar-page:not(.over-dark) .mm-nav:not(.open) .mm-nav-link{color:var(--ink)}
body.ar-page:not(.over-dark) .mm-nav:not(.open) .mm-nav-burger span{background:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   بيانات العمل مطبوعة داخل البطاقة — الخطوط تمرّ خلف النص
   ══════════════════════════════════════════════════════════════ */
.ar-meta{
  position:absolute; inset-inline:0; bottom:7%; padding-inline:7%;
  text-align:center; color:var(--offwhite); pointer-events:none;
  text-shadow:0 1px 18px rgba(5,5,5,.75);
  opacity:.3; transition:opacity .55s var(--ease);
}
.ar-plane[data-active="1"] .ar-meta{opacity:1}
.ar-cat{display:block;font-size:clamp(10px,.78vw,11.5px);font-weight:500;
  color:rgba(238,238,232,.92);margin-bottom:7px;line-height:1.3}
.ar-title{display:block;font-weight:400;line-height:1.22;
  font-size:clamp(19px,2vw,30px);margin-bottom:clamp(12px,1.4vw,18px)}
.ar-rows{display:block}
/* الفاصل بين الصفوف لا فوق الكلام — الخط المارّ كان يطمس النص */
.ar-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:5px 0;border-top:1px solid rgba(238,238,232,.3)}
.ar-row:first-child{border-top:0}
.ar-row i,.ar-row em{position:relative;font-style:normal;line-height:1.15;
  font-size:clamp(9.5px,.76vw,11.5px);font-weight:500}
.ar-row em{font-weight:400}
.ar-row .num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

@media (max-width:767px){
  .ar-meta{bottom:6%;padding-inline:6%}
  .ar-title{font-size:clamp(17px,4.6vw,22px)}
  .ar-row i,.ar-row em{font-size:10px}
}