/* =========================================================
   1) رموز الهوية — الألوان والمقاسات والأحجام من هنا فقط
   ========================================================= */
:root{
  /* الألوان: أحمر + أسود + أبيض + رمادي */
  --red:#CE1F30; --red-deep:#A81826; --red-tint:#E1BABD;
  --black:#000; --white:#FFF; --gray:#E8E8E8;

  --bg:var(--white); --bg-alt:var(--gray); --surface:var(--white);
  --ink:var(--black); --ink-soft:#2B2B2B; --muted:#6B6B6B;
  --line:rgba(0,0,0,.12); --hover:rgba(0,0,0,.035);
  --tag-bg:var(--black); --tag-ink:var(--white);
  --ph-a:#D9D9D9; --ph-b:#C6C6C6;
  --header-bg:rgba(255,255,255,.92);
  /* الأحمر للمساحات الكبيرة (الأزرار، لوحة «أبرز تطور») — نفس الأحمر في النهاري */
  --red-fill:var(--red); --footer-bg:var(--black); --footer-ink:var(--white);
  color-scheme:light;

  /* الخط وسلّم الأحجام المتدرّج (clamp) */
  --font:"Tajawal","Noto Kufi Arabic","Segoe UI",system-ui,sans-serif;
  --fs-hero:  clamp(1.85rem, 1.05rem + 2.3vw, 3.25rem);
  --fs-lead:  clamp(1.5rem,  1.05rem + 1.3vw, 2.35rem);
  --fs-h2:    clamp(1.5rem,  1.2rem  + 0.9vw, 2.1rem);
  --fs-mid:   clamp(1.28rem, 1.05rem + 0.6vw, 1.6rem);
  --fs-small: clamp(1.08rem, 0.98rem + 0.3vw, 1.28rem);
  --fs-item:  clamp(1.04rem, 0.97rem + 0.22vw, 1.18rem);
  --fs-body:  clamp(1rem,    0.96rem + 0.12vw, 1.08rem);
  --fs-lede:  clamp(1rem,    0.94rem + 0.2vw, 1.12rem);
  --fs-meta:  clamp(.8rem,   0.78rem + 0.08vw, .86rem);

  --r-xl:40px; --r-lg:30px; --r-md:20px; --r-sm:14px; --pill:999px;
  --wrap:1480px;
  --gutter:clamp(16px,3.2vw,48px);
  --sec:clamp(36px,4.5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* الوضع الليلي: فحمي دافئ بطبقات واضحة — نص off-white مريح، وأحمر مضبوط للتباين */
    --bg:#151311; --bg-alt:#1C1916; --surface:#221F1C;
    --ink:#EDE7E0; --ink-soft:#CEC6BD; --muted:#9D958C;
    --line:rgba(237,231,224,.12); --hover:rgba(237,231,224,.05);
    --tag-bg:#EDE7E0; --tag-ink:#151311;
    --red:#EA5159; --red-deep:#A81B28; --red-fill:#C2202F; --red-tint:rgba(234,81,89,.26);
    --ph-a:#262320; --ph-b:#1F1C19;
    --header-bg:rgba(21,19,17,.86);
    --footer-bg:#0F0D0C; --footer-ink:#EDE7E0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  /* الوضع الليلي: فحمي دافئ بطبقات واضحة — نص off-white مريح، وأحمر مضبوط للتباين */
  --bg:#151311; --bg-alt:#1C1916; --surface:#221F1C;
  --ink:#EDE7E0; --ink-soft:#CEC6BD; --muted:#9D958C;
  --line:rgba(237,231,224,.12); --hover:rgba(237,231,224,.05);
  --tag-bg:#EDE7E0; --tag-ink:#151311;
  --red:#EA5159; --red-deep:#A81B28; --red-fill:#C2202F; --red-tint:rgba(234,81,89,.26);
  --ph-a:#262320; --ph-b:#1F1C19;
  --header-bg:rgba(21,19,17,.86);
  --footer-bg:#0F0D0C; --footer-ink:#EDE7E0;
  color-scheme:dark;
}

/* =========================================================
   2) أساسيات وTypography
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.8;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:900;line-height:1.45;letter-spacing:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--red);color:#fff;padding:10px 16px;border-radius:var(--r-sm);z-index:100;transition:top .2s}
.skip:focus{top:12px}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* =========================================================
   3) عناصر الهوية
   ========================================================= */
.logo{display:inline-block;line-height:0;flex-shrink:0;transition:transform .35s var(--ease)}
@media (hover:hover){.logo:hover{transform:translateY(-1px)}}
.logo:focus-visible{transform:translateY(-1px)}
.logo img{height:60px;width:auto;aspect-ratio:638/277;transition:height .35s var(--ease)}

/* شارة التصنيف */
.tag{position:relative;display:inline-flex;align-items:center;gap:.45em;align-self:flex-start;
  background:var(--tag-bg);color:var(--tag-ink);font-weight:800;font-size:.8rem;line-height:1;
  padding:.6em .95em .54em;border-start-end-radius:12px;border-inline-start:2px solid var(--red)}
.tag::before{content:"";position:absolute;inset-inline-start:-5px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.tag--trending{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.tag--exclusive{background:var(--red);color:#fff;border-inline-start-color:var(--black)}
.tag--exclusive::before{background:var(--black)}
.tag .dot{width:.5em;height:.5em;border-radius:50%;background:var(--red);animation:pulse 1.8s var(--ease) infinite}
.tag--sm{font-size:.7rem;padding:.55em .78em .5em;border-start-end-radius:9px}
.tag--sm::before{width:7px;height:7px;top:-4px;inset-inline-start:-4px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* الزر الكبسولي */
.btn{display:inline-flex;align-items:center;gap:16px;background:var(--red);color:#fff;font-weight:700;font-size:.98rem;
  padding:6px 22px 6px 6px;border-radius:var(--pill);border:0;cursor:pointer;
  transition:background .3s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease)}
.btn .arrow{order:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--red);transition:transform .4s var(--ease)}
.btn .arrow svg{width:18px;height:18px}
@media (hover:hover){.btn:hover{background:var(--red-deep);box-shadow:0 10px 24px -14px rgba(206,31,48,.9)}}
.btn:focus-visible{background:var(--red-deep);box-shadow:0 10px 24px -14px rgba(206,31,48,.9)}
@media (hover:hover){.btn:hover .arrow{transform:translateX(-5px)}}
.btn:focus-visible .arrow{transform:translateX(-5px)}
.btn:active{transform:scale(.97)}

.mark{background:var(--red-tint);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;color:var(--muted);font-size:var(--fs-meta);font-weight:500;line-height:1.5}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta svg{width:13px;height:13px}
.meta time{direction:ltr}

/* الصورة / مكان الصورة */
.media{position:relative;display:block;overflow:hidden;background:var(--ph-a);isolation:isolate}
.media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,0,0,.035) 22px 23px),linear-gradient(160deg,var(--ph-a),var(--ph-b));
  color:var(--muted)}
.ph span{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.8rem;font-weight:700;opacity:.8}
.ph svg{width:30px;height:30px}
.media > img,.media > .ph{transition:transform 1s var(--ease)}

/* سلوك البطاقة الموحّد: البطاقة كاملة رابط */
.card{display:flex;flex-direction:column;gap:12px;position:relative}
.card h3{transition:color .3s var(--ease),transform .4s var(--ease)}
@media (hover:hover){.card:hover .media > img,.card:hover .media > .ph{transform:scale(1.03)}}
.card:focus-visible .media > img,.card:focus-visible .media > .ph{transform:scale(1.03)}
@media (hover:hover){.card:hover h3{color:var(--red);transform:translateX(-3px)}}
.card:focus-visible h3{color:var(--red);transform:translateX(-3px)}
.go{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red);
  transition:background .3s,color .3s,transform .4s var(--ease)}
.go svg{width:14px;height:14px}
@media (hover:hover){.card:hover .go{background:var(--red);color:#fff;transform:translateX(-4px)}}
.card:focus-visible .go{background:var(--red);color:#fff;transform:translateX(-4px)}

.socials{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;transition:transform .3s var(--ease),background .3s}
@media (hover:hover){.socials a:hover{transform:translateY(-2px);background:var(--red-deep)}}
.socials a:focus-visible{transform:translateY(-2px);background:var(--red-deep)}
.socials a:active{transform:scale(.92)}
.socials svg{width:17px;height:17px}

/* =========================================================
   4) Header — شريط محكم
   ========================================================= */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--header-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-top:3px solid var(--red);border-bottom:1px solid var(--line);transition:box-shadow .35s}
.site-header .bar{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);height:74px;transition:height .35s var(--ease)}
.site-header.is-scrolled{box-shadow:0 12px 30px -22px rgba(0,0,0,.45)}
.site-header.is-scrolled .bar{height:62px}
.site-header.is-scrolled .logo img{height:50px}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav a{position:relative;display:block;padding:6px 14px;font-weight:700;font-size:1.02rem;color:var(--ink-soft);transition:color .25s}
.nav a::after{content:"";position:absolute;inset-inline:14px;bottom:-2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a[aria-current="page"]{color:var(--ink)}
@media (hover:hover){.nav a:hover{color:var(--ink)}}
.nav a:focus-visible{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}}
.nav a:focus-visible::after{transform:scaleX(1)}
.header-socials{margin-inline-start:auto}
.nav .mobile-socials{display:none}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--red);color:#fff;cursor:pointer;place-items:center;transition:transform .25s var(--ease),background .3s}
@media (hover:hover){.menu-btn:hover{background:var(--red-deep)}}
.menu-btn:focus-visible{background:var(--red-deep)}
.menu-btn:active{transform:scale(.92)}
.menu-btn .lines{position:relative;width:18px;height:12px}
.menu-btn .lines i{position:absolute;inset-inline:0;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .2s,top .35s var(--ease)}
.menu-btn .lines i:nth-child(1){top:0}.menu-btn .lines i:nth-child(2){top:5px}.menu-btn .lines i:nth-child(3){top:10px}
.menu-btn[aria-expanded="true"] .lines i:nth-child(1){top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .lines i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .lines i:nth-child(3){top:5px;transform:rotate(-45deg)}

@media (max-width:960px){
  .header-socials{display:none}
  .menu-btn{display:grid;margin-inline-start:auto}
  .site-header .bar{height:64px}
  .logo img{height:48px}
  .site-header.is-scrolled .bar{height:58px}
  .site-header.is-scrolled .logo img{height:42px}
  .nav{position:absolute;inset-inline:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
    clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility 0s .45s}
  .nav.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease),visibility 0s}
  .nav ul{flex-direction:column;gap:0}
  .nav a{font-size:1.3rem;font-weight:800;padding:14px 2px;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .mobile-socials{display:flex;flex-direction:row;gap:10px;margin-top:20px}
  .nav .mobile-socials a{width:44px;height:44px}
}

/* =========================================================
   5) Hero
   ========================================================= */
.hero{position:relative;background:var(--bg-alt);overflow:hidden;padding-block:clamp(14px,2vw,24px) var(--sec)}
.hero .ring{position:absolute;width:min(56vw,760px);aspect-ratio:1;border:1.5px solid var(--red);border-radius:50%;inset-inline-end:-22vw;bottom:-46%;pointer-events:none}
.feature{position:relative;display:block}
.feature-media{aspect-ratio:16/7.6;min-height:500px;border-radius:var(--r-xl)}
.feature-media .ph{justify-items:end;padding-inline-end:22%}
.feature-media .stamp{position:absolute;top:24px;inset-inline-end:24px;z-index:1;line-height:0}
.feature-media .stamp img{height:34px;width:auto;aspect-ratio:638/277}
.feature-panel{position:absolute;bottom:0;right:0;width:min(600px,44%);
  background:var(--bg-alt);border-top-left-radius:var(--r-xl);
  padding:30px 0 0 40px;display:flex;flex-direction:column}
.feature-panel::before,.feature-panel::after{content:"";position:absolute;width:var(--r-xl);height:var(--r-xl);
  background:radial-gradient(circle at 0 0,transparent calc(var(--r-xl) - .5px),var(--bg-alt) var(--r-xl))}
.feature-panel::before{right:0;bottom:100%}
.feature-panel::after{bottom:0;right:100%}
.feature-panel .tag{margin-bottom:16px}
.feature h1{font-size:var(--fs-hero);line-height:1.42;transition:color .3s var(--ease)}
.feature .lede{margin-top:12px;color:var(--muted);font-size:var(--fs-lede);line-height:1.75;max-width:52ch}
.feature-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
@media (hover:hover){.feature:hover .media > img,.feature:hover .media > .ph{transform:scale(1.02)}}
.feature:focus-visible .media > img,.feature:focus-visible .media > .ph{transform:scale(1.02)}
@media (hover:hover){.feature:hover .btn{background:var(--red-deep)}}
.feature:focus-visible .btn{background:var(--red-deep)}
@media (hover:hover){.feature:hover .btn .arrow{transform:translateX(-5px)}}
.feature:focus-visible .btn .arrow{transform:translateX(-5px)}

@media (max-width:1140px){
  .feature-media{aspect-ratio:16/9;min-height:0}
  .feature-media .ph{justify-items:center;padding:0}
  .feature-panel{position:relative;width:min(720px,88%);margin-top:-80px;padding:28px 0 0 28px}
  .feature-panel::after{display:none}
}
@media (max-width:640px){
  .hero{padding-top:0}
  .hero .ring{display:none}
  .feature-media{aspect-ratio:4/3.4;border-radius:0;margin-inline:calc(var(--gutter) * -1)}
  .feature-media .stamp{top:14px;inset-inline-end:14px}
  .feature-media .stamp img{height:26px}
  .feature-panel{width:auto;margin:-32px calc(var(--gutter) * -1) 0;padding:24px var(--gutter) 0;border-top-left-radius:30px}
  .feature-panel::before{display:none}
  .feature-panel .tag{margin-bottom:12px}
  .feature-foot{flex-direction:column;align-items:stretch}
  .feature-foot .btn{justify-content:space-between}
}

/* =========================================================
   6) عناوين الأقسام
   ========================================================= */
.section{padding-block:var(--sec)}
.section-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:clamp(20px,2.2vw,28px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.section-head::after{content:"";position:absolute;bottom:-2px;right:0;width:84px;height:3px;background:var(--red);border-radius:2px}
.section-head h2{font-size:var(--fs-h2);line-height:1.3}
.more{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;white-space:nowrap}
.more .c{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red);transition:background .3s,color .3s,transform .4s var(--ease)}
.more .c svg{width:15px;height:15px}
@media (hover:hover){.more:hover .c{background:var(--red);color:#fff;transform:translateX(-4px)}}
.more:focus-visible .c{background:var(--red);color:#fff;transform:translateX(-4px)}

/* =========================================================
   7) المقالات
   ========================================================= */
.news{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,36px)}
.n-lead{grid-column:span 7;gap:14px}
.n-lead .media{aspect-ratio:16/10;border-radius:var(--r-lg)}
.n-lead h3{font-size:var(--fs-lead);line-height:1.45}
.n-lead p{color:var(--muted);font-size:var(--fs-lede)}
.n-lead .foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.n-side{grid-column:span 5;display:flex;flex-direction:column;gap:20px}
.n-mid .media{aspect-ratio:16/9;border-radius:var(--r-md)}
.n-mid h3{font-size:var(--fs-mid);line-height:1.5}
.n-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.n-list li{border-bottom:1px solid var(--line)}
.n-item{display:grid;grid-template-columns:clamp(96px,8vw,124px) 1fr;gap:16px;align-items:center;padding-block:14px}
.n-item .media{aspect-ratio:1;border-radius:var(--r-sm)}
.n-item .txt{display:flex;flex-direction:column;gap:8px}
.n-item h3{font-size:var(--fs-item);font-weight:800;line-height:1.55}
.n-row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line)}
.n-small{gap:10px}
.n-small .media{aspect-ratio:16/10;border-radius:var(--r-sm)}
.n-small h3{font-size:var(--fs-small);font-weight:800;line-height:1.55}

@media (max-width:1100px){
  .n-lead,.n-side{grid-column:1 / -1}
  .n-side{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .n-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .n-lead .media{border-radius:var(--r-md)}
  .n-side{grid-template-columns:1fr;gap:16px}
  .n-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;
    overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:6px;scrollbar-width:none}
  .n-row::-webkit-scrollbar{display:none}
  .n-small{scroll-snap-align:start}
}

/* =========================================================
   8) الأوضاع داخل غزة
   ========================================================= */
.gaza{background:var(--bg-alt)}
.gaza-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,36px);align-items:stretch}
.panel{grid-column:span 7;gap:0}
.panel .media{aspect-ratio:16/9;border-radius:var(--r-lg) var(--r-lg) 0 0}
.panel .box{position:relative;flex:1;background:var(--red);color:#fff;border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:12px}
.panel .box::before{content:"";position:absolute;top:-17px;left:clamp(40px,8vw,90px);width:34px;height:18px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}
.panel .tag{background:#fff;color:#000;border-inline-start-color:#000}
.panel .tag::before{background:#000}
.panel h3{font-size:var(--fs-lead);line-height:1.45}
@media (hover:hover){.panel.card:hover h3{color:#fff}}
.panel.card:focus-visible h3{color:#fff}
.panel p{opacity:.9;font-size:var(--fs-lede);max-width:58ch}
.panel .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px}
.panel .meta{color:rgba(255,255,255,.9)}
.panel .go{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
@media (hover:hover){.panel.card:hover .go{background:#fff;color:var(--red)}}
.panel.card:focus-visible .go{background:#fff;color:var(--red)}

.updates{grid-column:span 5;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px)}
.u-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.u-head h3{font-size:clamp(1.1rem,1rem + .3vw,1.25rem);display:flex;align-items:center;gap:10px}
.u-head .live{width:9px;height:9px;border-radius:50%;background:var(--red);animation:ring 2s infinite}
.u-head small{color:var(--muted);font-size:var(--fs-meta);font-weight:500}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(206,31,48,.45)}70%{box-shadow:0 0 0 10px rgba(206,31,48,0)}100%{box-shadow:0 0 0 0 rgba(206,31,48,0)}}
.timeline{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.timeline li{position:relative;flex:1;display:flex;border-bottom:1px solid var(--line)}
.timeline li:last-child{border-bottom:0}
.u-item{position:relative;flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 26px 14px 10px;margin-inline:-10px;border-radius:var(--r-sm);
  transition:background .3s var(--ease)}
.u-item::after{content:"";position:absolute;right:10px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--red);transition:background .3s}
.timeline li::before{content:"";position:absolute;right:4px;top:32px;bottom:-22px;width:1.5px;background:var(--line);z-index:1}
.timeline li:last-child::before{display:none}
.u-item .top{display:flex;align-items:center;gap:10px}
.u-item time{font-weight:700;font-size:var(--fs-meta);color:var(--muted);direction:ltr;line-height:1}
.u-item .tag{font-size:.64rem}
.u-item h4{font-size:var(--fs-item);font-weight:700;line-height:1.6;transition:color .3s var(--ease),transform .4s var(--ease)}
@media (hover:hover){.u-item:hover{background:var(--hover)}}
.u-item:focus-visible{background:var(--hover)}
@media (hover:hover){.u-item:hover h4{color:var(--red);transform:translateX(-3px)}}
.u-item:focus-visible h4{color:var(--red);transform:translateX(-3px)}
@media (hover:hover){.u-item:hover::after{background:var(--red)}}
.u-item:focus-visible::after{background:var(--red)}
.updates .btn{margin-top:14px;justify-content:space-between}

@media (max-width:1000px){
  .panel,.updates{grid-column:1 / -1}
}
@media (max-width:640px){
  .panel{margin-inline:calc(var(--gutter) * -1)}
  .panel .media{border-radius:0}
  .panel .box{border-radius:28px 28px 0 0;margin-top:-28px;padding:24px var(--gutter) 28px}
  .panel .box::before{display:none}
  .updates{padding:16px}
}

/* =========================================================
   9) Footer
   ========================================================= */
.site-footer{background:#000;color:#fff;padding-block:clamp(40px,5vw,60px) 22px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;align-items:start}
.site-footer .logo img{height:56px}
.f-about{margin-top:14px;color:rgba(255,255,255,.7);max-width:40ch;font-size:.95rem}
.site-footer h4{margin:0 0 12px;font-size:1rem;font-weight:800}
.f-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-links a{color:rgba(255,255,255,.75);transition:color .25s,padding .3s var(--ease)}
@media (hover:hover){.f-links a:hover{color:#fff;padding-inline-start:6px}}
.f-links a:focus-visible{color:#fff;padding-inline-start:6px}
.f-bottom{margin-top:clamp(28px,4vw,44px);padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.6);font-size:.88rem}
.f-bottom .handle{direction:ltr}
@media (max-width:760px){
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid > :first-child{grid-column:1 / -1}
}

/* =========================================================
   11) صفحة المقال — تُضاف فوق الـDesign System دون تعديله
   ========================================================= */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.meta time[dir="rtl"]{direction:rtl}
:root{
  --fs-post:  clamp(1.7rem, 1.05rem + 2.4vw, 3.3rem);
  --fs-dek:   clamp(1.04rem, .98rem + .32vw, 1.28rem);
  --fs-prose: clamp(1.08rem, 1.02rem + .26vw, 1.24rem);
  --col-head:800px; --col-body:800px; --col-cover:1240px; --col-media:960px;
}
.post-col{width:100%;max-width:var(--col,var(--col-body));margin-inline:auto}
.post{padding-top:clamp(20px,3vw,40px)}
.post-head .post-col{--col:var(--col-head)}

/* Breadcrumb */
.crumbs ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
  font-size:.8rem;color:var(--muted);font-weight:500;line-height:1.6}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"←";opacity:.55}
.crumbs a{transition:color .25s}
@media (hover:hover){.crumbs a:hover{color:var(--red)}}
.crumbs a:focus-visible{color:var(--red)}
.crumbs [aria-current]{color:var(--ink-soft);font-weight:700}

.post-head .tag{margin-bottom:14px}
.post-title{font-size:var(--fs-post);line-height:1.4}
.post-title:focus{outline:none}
.post-dek{margin-top:12px;font-size:var(--fs-dek);color:var(--muted);font-weight:500;line-height:1.75;max-width:60ch}
.post-meta{margin-top:14px}
.post-bar{position:relative;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.post-bar::before{content:"";position:absolute;top:-2px;right:0;width:84px;height:3px;background:var(--red);border-radius:2px}

/* المشاركة */
.share{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.share-label{font-weight:800;font-size:.95rem}
.share ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0;border:0;border-radius:var(--pill);
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;font:inherit;
  transition:background .3s var(--ease),color .3s,box-shadow .3s,transform .25s var(--ease)}
.share-btn svg{width:17px;height:17px;flex-shrink:0}
@media (hover:hover){.share-btn:hover{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1.5px var(--red);transform:translateY(-2px)}}
.share-btn:focus-visible{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1.5px var(--red);transform:translateY(-2px)}
.share-btn:active{transform:scale(.94)}
.share-copy{padding-inline:14px 16px;font-weight:700;font-size:.88rem}
.share-copy[data-state="done"]{background:var(--ink);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* صورة الغلاف */
.post-cover{margin-block:clamp(22px,2.6vw,34px) 0}
.post-cover .post-col{--col:var(--col-cover)}
.cover-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ph-a)}
.cover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fig-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin-top:10px;font-size:.86rem;color:var(--muted);line-height:1.7}
.fig-cap .credit{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.fig-cap .credit::before{content:"";display:inline-block;width:14px;height:2px;background:var(--red);vertical-align:middle;margin-inline-end:6px}

/* جسم المقال */
.prose{padding-top:clamp(26px,3.4vw,40px);font-size:var(--fs-prose);line-height:2;color:var(--ink-soft);font-weight:400}
.prose > * + *{margin-top:1.2em}
.prose h2{font-size:clamp(1.4rem,1.16rem + .9vw,1.9rem);color:var(--ink);margin-top:2em;line-height:1.4}
.prose h3{font-size:clamp(1.18rem,1.06rem + .45vw,1.42rem);font-weight:800;color:var(--ink);margin-top:1.7em;line-height:1.45}
.prose h2 + *,.prose h3 + *{margin-top:.5em}
.prose strong{font-weight:800;color:var(--ink)}
.prose a{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(206,31,48,.35);transition:text-decoration-color .25s}
@media (hover:hover){.prose a:hover{text-decoration-color:var(--red)}}
.prose a:focus-visible{text-decoration-color:var(--red)}
.prose .share-btn,.prose .back{color:var(--ink);text-decoration:none}
@media (hover:hover){.prose .share-btn:hover{color:#fff}}
.prose .share-btn:focus-visible{color:#fff}
.prose .share ul{margin:0;padding:0}
.prose .share li,.prose .sources li{margin-top:0}
.prose .share-copy[data-state="done"]{color:var(--bg)}
.prose ul,.prose ol{margin-bottom:0;padding-inline-start:1.3em}
.prose li + li{margin-top:.45em}
.prose ul li::marker{color:var(--red)}
.prose ol li::marker{color:var(--red);font-weight:800}
.prose .quote{margin-inline:0;margin-bottom:0;padding-inline-start:20px;border-inline-start:3px solid var(--muted)}
.prose .quote p{color:var(--ink);font-weight:500}
.prose .quote footer{margin-top:6px;font-size:.85rem;color:var(--muted)}
.prose .quote cite{font-style:normal}

/* الاقتباس البارز */
.pullquote{position:relative;margin:2.4em 0 0;padding-inline-start:26px;border-inline-start:3px solid var(--red)}
.pullquote::before{content:"";position:absolute;top:-6px;inset-inline-start:-7px;width:11px;height:11px;border-radius:50%;background:var(--red)}
.pullquote blockquote{margin:0}
.pullquote p{font-size:clamp(1.35rem,1.1rem + 1vw,1.95rem);font-weight:800;line-height:1.6;color:var(--ink);text-wrap:balance}
.pullquote figcaption{margin-top:12px;font-size:.88rem;color:var(--muted);font-weight:500}
.pullquote + *{margin-top:2.4em}

/* صور وفيديو داخل المقال */
.fig{margin:2em 0 0}
.fig-media{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--ph-a)}
.fig-media img{width:100%;height:auto}
.fig + *{margin-top:2em}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;width:100%;border:0;cursor:pointer;color:var(--muted);
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,0,0,.035) 22px 23px),linear-gradient(160deg,var(--ph-a),var(--ph-b));font:inherit;font-size:.85rem;font-weight:700}
.video-play .pbtn{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--red);color:#fff;transition:transform .35s var(--ease),background .3s}
.video-play .pbtn svg{width:26px;height:26px;margin-inline-start:-3px}
@media (hover:hover){.video-play:hover .pbtn{transform:scale(1.06);background:var(--red-deep)}}
.video-play:focus-visible .pbtn{transform:scale(1.06);background:var(--red-deep)}
.video-play[disabled]{cursor:default}
@media (hover:hover){.video-play[disabled]:hover .pbtn{transform:none;background:var(--red)}}
.video-play[disabled]:focus-visible .pbtn{transform:none;background:var(--red)}

/* الخلاصة */
.summary{background:color-mix(in srgb,var(--bg-alt) 45%,var(--bg));border-inline-start:3px solid var(--red);border-start-end-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px)}
.summary .summary-title{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.02rem;font-weight:800;line-height:1.4;color:var(--ink)}
.summary .summary-title::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.summary .summary-list{list-style:none;margin:0;padding:0}
.summary .summary-list li{position:relative;padding-inline-start:20px;color:var(--ink-soft);font-size:.9em;line-height:1.85}
.summary .summary-list li + li{margin-top:.3em}
.summary .summary-list li::before{content:"";position:absolute;right:0;top:.78em;width:7px;height:7px;background:var(--red);border-start-end-radius:3px}

/* المصادر */
.sources{position:relative;margin-top:2.4em;padding-top:18px;border-top:1px solid var(--line)}
.sources::before{content:"";position:absolute;top:-2px;right:0;width:84px;height:3px;background:var(--red);border-radius:2px}
.sources .sources-title{margin:0 0 10px;font-size:1.2rem;color:var(--ink)}
.sources ol{list-style:none;margin:0;padding:0;counter-reset:src;font-size:.95rem;line-height:1.7}
.sources li{counter-increment:src;display:grid;grid-template-columns:30px 1fr;gap:4px 8px;padding-block:14px;border-bottom:1px solid var(--line)}
.sources li:first-child{padding-top:6px}
.sources li:last-child{border-bottom:0}
.sources li::before{content:counter(src);font-weight:900;color:var(--red)}
.sources .src-name{font-weight:800;color:var(--ink)}
.sources .src-title{color:var(--ink-soft)}
.sources .src-link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:.84rem;font-weight:700;color:var(--red);text-decoration:none;transition:color .25s}
.sources .src-link .dom{direction:ltr;unicode-bidi:isolate;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sources .src-link svg{width:13px;height:13px;flex-shrink:0}
@media (hover:hover){.sources .src-link:hover{color:var(--red-deep);text-decoration:underline;text-underline-offset:4px}}
.sources .src-link:focus-visible{color:var(--red-deep);text-decoration:underline;text-underline-offset:4px}

/* نهاية المقال */
.post-end{position:relative;margin-top:2.6em;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.post-end::before{content:"";position:absolute;top:-2px;right:0;width:84px;height:3px;background:var(--red);border-radius:2px}
.post-end .back{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem}
.post-end .back .c{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red);transition:background .3s,color .3s,transform .4s var(--ease)}
.post-end .back .c svg{width:15px;height:15px;transform:scaleX(-1)}
@media (hover:hover){.post-end .back:hover .c{background:var(--red);color:#fff;transform:translateX(4px)}}
.post-end .back:focus-visible .c{background:var(--red);color:#fff;transform:translateX(4px)}
.post-end .share-label{font-size:1.1rem;font-weight:900;color:var(--ink)}

/* اقرأ أيضًا */
.related{background:var(--bg-alt);margin-top:calc(var(--sec) * 1.15)}
.related .section-head h2{font-size:clamp(1.6rem,1.25rem + 1.1vw,2.3rem)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}

/* مادة غير موجودة */
.post-missing{padding-block:clamp(56px,8vw,96px)}
.post-missing h1{font-size:var(--fs-h2)}
.post-missing p{margin:10px 0 24px;color:var(--muted)}

.fig .fig-cap{padding-inline:2px}
@media (min-width:1100px){
  .prose > .fig{margin-inline:calc((var(--col-body) - var(--col-media)) / 2)}
}
@media (max-width:640px){
  .post{padding-top:18px}
  .post-title{line-height:1.36}
  .crumbs ol{margin-bottom:12px;font-size:.76rem}
  .post-head .tag{margin-bottom:12px}
  .post-dek{margin-top:10px;line-height:1.7}
  .post-meta{margin-top:12px}
  .post-bar{margin-top:12px;padding-top:12px}
  .post-bar .share{flex-wrap:nowrap;justify-content:space-between}
  .share{gap:10px}
  .share ul{gap:6px}
  .share-copy{padding:0;width:44px}
  .share-copy .copy-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .share-btn{height:44px;min-width:44px}
  .post-end{flex-direction:column;align-items:stretch;gap:0;padding-top:16px}
  .post-end .share{justify-content:space-between;flex-wrap:nowrap;padding-bottom:16px}
  .post-end .back{padding-top:16px;border-top:1px solid var(--line);justify-content:space-between}
  .prose .pullquote{padding-inline-start:20px}
  .cover-media{border-radius:var(--r-md)}
  .related-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;
    overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:6px;scrollbar-width:none}
  .related-grid::-webkit-scrollbar{display:none}
  .related-grid .n-small{scroll-snap-align:start}
}

/* =========================================================
   12) صفحة المقالات (الأرشيف) — تستخدم رموز الـDesign System نفسها
   ========================================================= */
.archive-top{background:var(--bg-alt);padding-block:clamp(26px,3.4vw,44px) var(--sec)}
.page-head{position:relative;padding-bottom:16px;margin-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--line)}
.page-head::after{content:"";position:absolute;bottom:-2px;right:0;width:84px;height:3px;background:var(--red);border-radius:2px}
.page-head h1:focus{outline:none}
.page-head h1{font-size:clamp(2rem,1.4rem + 1.9vw,3.1rem);line-height:1.25}
.page-head p{margin-top:10px;color:var(--muted);font-size:var(--fs-lede);max-width:60ch}

#view-archive{overflow-x:clip}

/* المقال المميّز */
.a-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:center}
.a-feature .media{aspect-ratio:16/10;border-radius:var(--r-lg)}
.a-feature-body{display:flex;flex-direction:column;gap:14px}
.a-feature h2{font-size:var(--fs-lead);line-height:1.45;transition:color .3s var(--ease),transform .4s var(--ease)}
.a-feature p{color:var(--muted);font-size:var(--fs-lede)}
.a-feature .btn{align-self:flex-start;margin-top:4px}
@media (hover:hover){.a-feature:hover h2{color:var(--red);transform:translateX(-3px)}}
.a-feature:focus-visible h2{color:var(--red);transform:translateX(-3px)}
@media (hover:hover){.a-feature:hover .btn{background:var(--red-deep)}}
.a-feature:focus-visible .btn{background:var(--red-deep)}
@media (hover:hover){.a-feature:hover .btn .arrow{transform:translateX(-5px)}}
.a-feature:focus-visible .btn .arrow{transform:translateX(-5px)}
.a-feature--text{grid-template-columns:1fr}
.a-feature--text .a-feature-body{background:var(--surface);border-radius:var(--r-lg);border-top-left-radius:var(--r-xl);padding:clamp(24px,3.4vw,44px);max-width:900px}

/* شريط العنوان والتصفية */
.archive-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.archive-bar::after{content:"";position:absolute;bottom:-2px;right:0;width:84px;height:3px;background:var(--red);border-radius:2px}
.archive-bar h2{font-size:var(--fs-h2);line-height:1.3}
.chips{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--pill);
  box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:.93rem;white-space:nowrap;color:var(--ink-soft);
  transition:box-shadow .3s var(--ease),background .3s var(--ease),color .3s,transform .25s var(--ease)}
@media (hover:hover){.chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}}
.chip:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.chip:active{transform:scale(.96)}
.chip[aria-current="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.chip[aria-current="true"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}

/* الشبكة */
.a-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.8vw,40px) clamp(20px,2.4vw,32px)}
.a-grid.is-swap{animation:swapIn .45s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.a-card{gap:10px}
.a-card .media{aspect-ratio:16/10;border-radius:var(--r-md)}
.a-card h3{font-size:clamp(1.1rem,1rem + .35vw,1.32rem);font-weight:800;line-height:1.55}
.a-card .meta{margin-top:2px}
/* بطاقة بلا صورة */
.a-card--text{position:relative;overflow:hidden;justify-content:space-between;gap:18px;min-height:100%;
  background:var(--bg-alt);border-radius:var(--r-md);border-top-left-radius:var(--r-xl);padding:clamp(20px,2.4vw,28px)}
.a-card--text::after{content:"";position:absolute;width:240px;aspect-ratio:1;border:1.5px solid var(--red);border-radius:50%;
  left:-96px;bottom:-130px;opacity:.7;pointer-events:none;transition:transform .8s var(--ease)}
@media (hover:hover){.a-card--text:hover::after{transform:translate(8px,-8px)}}
.a-card--text:focus-visible::after{transform:translate(8px,-8px)}
.a-card--text h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);font-weight:900;line-height:1.5}
.a-card--text .top{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.a-empty{grid-column:1 / -1;padding:clamp(32px,5vw,56px) 0;color:var(--muted);font-size:var(--fs-lede);font-weight:500}

/* الترقيم */
.pager{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line)}
.pager ul{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pager a,.pager span.pg{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:var(--pill);
  font-weight:800;font-size:.95rem;transition:background .3s var(--ease),color .3s,box-shadow .3s}
.pager a.pg{box-shadow:inset 0 0 0 1.5px var(--line)}
@media (hover:hover){.pager a.pg:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.pager a.pg:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pager a.pg[aria-current="page"]{background:var(--red);color:#fff;box-shadow:none}
.pager .gap{min-width:24px;color:var(--muted);box-shadow:none}
.pager .step{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:var(--pill);font-weight:700;font-size:.93rem;
  box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s,color .3s,box-shadow .3s}
.pager .step svg{width:15px;height:15px}
.pager .step.prev svg{transform:scaleX(-1)}
@media (hover:hover){.pager a.step:hover{background:var(--ink);color:var(--bg);box-shadow:none}}
.pager a.step:focus-visible{background:var(--ink);color:var(--bg);box-shadow:none}
.pager span.step{opacity:.4}

@media (max-width:1100px){
  .a-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .a-feature{grid-template-columns:1fr;gap:20px}
}
@media (max-width:640px){
  .archive-top{padding-top:20px}
  .a-feature .media{border-radius:var(--r-md)}
  .archive-bar{flex-direction:column;align-items:stretch}
  .archive-bar nav{margin-inline:calc(var(--gutter) * -1);overflow-x:auto;scrollbar-width:none}
  .archive-bar nav::-webkit-scrollbar{display:none}
  .chips{padding-inline:var(--gutter);width:max-content}
  .chip{height:44px}
  .a-grid{grid-template-columns:1fr;gap:28px}
  .a-card--text{min-height:0}
  .pager ul{gap:6px}
  .pager .step .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pager .step{padding:0;width:44px;justify-content:center}
  .pager a,.pager span.pg{min-width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){ .a-grid.is-swap{animation:none} }

/* =========================================================
   13) صفحة الأوضاع داخل غزة — تستخدم رموز الـDesign System نفسها
   ========================================================= */
#view-gaza{overflow-x:clip}
.g-updated{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:12px;font-size:var(--fs-meta);font-weight:700;color:var(--ink-soft)}
.g-updated::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.g-updated time{font-weight:800;color:var(--ink)}
.g-updated .t{direction:ltr;unicode-bidi:isolate}

/* أبرز تطور */
.g-label{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);font-weight:900}
.g-label::before{content:"";width:3px;height:1.1em;background:var(--red);border-radius:2px}
.g-feature{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r-lg);overflow:hidden;background:var(--red);color:#fff}
.g-feature > .media{min-height:100%;aspect-ratio:16/11}
.g-feature-body{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,42px)}
.g-feature .g-row{display:flex;align-items:center;gap:12px}
.g-feature .tag{background:#fff;color:#000;border-inline-start-color:#000}
.g-feature .tag::before{background:#000}
.g-feature .g-when{font-weight:800;font-size:.92rem;opacity:.9}
.g-feature .g-when .t{direction:ltr;unicode-bidi:isolate}
.g-feature h2{font-size:var(--fs-lead);line-height:1.45}
.g-feature p{opacity:.92;font-size:var(--fs-lede);max-width:56ch}
.g-feature .g-src{color:rgba(255,255,255,.85)}
@media (hover:hover){.g-feature a.g-src:hover{color:#fff}}
.g-feature a.g-src:focus-visible{color:#fff}
.g-feature .btn{align-self:flex-start;margin-top:6px;background:#fff;color:var(--red)}
.g-feature .btn .arrow{background:var(--red);color:#fff}
@media (hover:hover){.g-feature .btn:hover{background:var(--gray);box-shadow:none}}
.g-feature .btn:focus-visible{background:var(--gray);box-shadow:none}
.g-feature--text{grid-template-columns:1fr;border-top-left-radius:var(--r-xl)}
.g-feature--text .g-feature-body{max-width:900px}

/* المصدر والتفاصيل */
.g-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:.86rem}
.g-src{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muted);transition:color .25s}
.g-src b{font-weight:800}
.g-src svg{width:12px;height:12px;flex-shrink:0}
@media (hover:hover){a.g-src:hover{color:var(--red)}}
a.g-src:focus-visible{color:var(--red)}
.g-detail{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--red)}
.g-detail svg{width:14px;height:14px;transition:transform .35s var(--ease)}
@media (hover:hover){.g-detail:hover svg{transform:translateX(-4px)}}
.g-detail:focus-visible svg{transform:translateX(-4px)}

/* الخط الزمني */
.g-timeline{max-width:920px}
.g-day + .g-day{margin-top:clamp(26px,3.2vw,40px)}
.g-day-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.g-day-head h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:900}
.g-day-head small{font-size:var(--fs-meta);color:var(--muted);font-weight:600}
.g-list{list-style:none;margin:0;padding:0}
.g-item{--tcol:64px;--gap:30px;position:relative;display:grid;grid-template-columns:var(--tcol) 1fr;gap:0 var(--gap);padding-block:18px}
.g-item:focus{outline:none}
.g-item::before{content:"";position:absolute;right:calc(var(--tcol) + var(--gap) / 2 - 1px);top:0;bottom:0;width:2px;background:rgba(206,31,48,.3)}
.g-item:first-child::before{top:27px}
.g-item:last-child::before{bottom:calc(100% - 27px)}
.g-item:only-child::before{display:none}
.g-item::after{content:"";position:absolute;right:calc(var(--tcol) + var(--gap) / 2 - 6px);top:21px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);box-shadow:inset 0 0 0 2.5px var(--red)}
.g-time{padding-top:1px;font-weight:800;font-size:1.02rem;line-height:1.6;color:var(--ink);direction:ltr;text-align:right;unicode-bidi:isolate}
.g-item.is-latest::after{background:var(--red);animation:ring 2s infinite}
.g-item.is-latest .g-time{color:var(--red)}
.g-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.g-body h4{font-size:clamp(1.08rem,1rem + .35vw,1.28rem);font-weight:800;line-height:1.6}
.g-body p{color:var(--muted);font-size:.98rem;line-height:1.8;max-width:64ch}
.g-img{max-width:560px;aspect-ratio:16/9;border-radius:var(--r-md);margin-top:4px}
.g-item.is-flash{animation:flash 2.4s var(--ease)}
@keyframes flash{0%,40%{background:color-mix(in srgb,var(--red-tint) 45%,transparent)}100%{background:transparent}}
.g-empty{padding:clamp(28px,4vw,48px) 0;color:var(--muted);font-size:var(--fs-lede);font-weight:500}

/* عرض تحديثات أقدم */
.g-more{max-width:920px;margin-top:clamp(22px,3vw,32px);padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:center}
.g-more .btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);padding-block:6px}
.g-more .btn .arrow{background:var(--red);color:#fff}
.g-more .btn .arrow svg{transform:rotate(-90deg)}
@media (hover:hover){.g-more .btn:hover{background:var(--ink);color:var(--bg);box-shadow:none}}
.g-more .btn:focus-visible{background:var(--ink);color:var(--bg);box-shadow:none}
@media (hover:hover){.g-more .btn:hover .arrow{transform:translateY(3px)}}
.g-more .btn:focus-visible .arrow{transform:translateY(3px)}

@media (max-width:900px){
  .g-feature{grid-template-columns:1fr}
  .g-feature > .media{aspect-ratio:16/9;min-height:0}
}
@media (max-width:640px){
  .g-feature{margin-inline:calc(var(--gutter) * -1);border-radius:0;background:transparent;overflow:visible}
  .g-feature > .media{border-radius:0}
  .g-feature-body{background:var(--red);border-radius:28px 28px 0 0;margin-top:-28px;position:relative;padding:24px var(--gutter) 28px}
  .g-feature--text .g-feature-body{margin-top:0}
  .g-item{--tcol:50px;--gap:24px;padding-block:16px}
  .g-time{font-size:.95rem}
  .g-img{max-width:100%}
  .g-more .btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){ .g-item.is-flash{animation:none;background:color-mix(in srgb,var(--red-tint) 35%,transparent)} }

/* =========================================================
   10) الحركة
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
  .card:hover .media > img,.card:hover .media > .ph,.feature:hover .media > img,.feature:hover .media > .ph{transform:none}
}
/* =========================================================
   14) المؤثرات — الباقة المعتمدة: S1 S3 S4 L1 H1 H3 P1 P3 G1 G2 B1 M1 M2
   قاعدة ثابتة: كل حالة «بداية» مخفية لحركة ما موجودة داخل
   (prefers-reduced-motion: no-preference)، فمع تقليل الحركة
   يظهر كل عنصر في حالته النهائية فورًا. لا ألوان أو خطوط أو مقاسات جديدة.
   ========================================================= */
:root{--fx-dur:.7s;--fx-rise:14px}
@keyframes fx-rise{from{opacity:0;transform:translateY(var(--fx-rise))}}
@keyframes fx-fade{from{opacity:0}}
@keyframes fx-mark{
  from{background:linear-gradient(var(--red-tint),var(--red-tint)) right/0% 100% no-repeat}
  to{background:linear-gradient(var(--red-tint),var(--red-tint)) right/100% 100% no-repeat}
}

/* S1 — انتقال ناعم بين الصفحات (المتصفحات الداعمة فقط)، والهيدر ثابت لا يرمش */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ease)}
}
.site-header{view-transition-name:site-header}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none;mix-blend-mode:normal}

/* S3 — لمسة ضغط على أجهزة اللمس (بدل hover العالق) */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .card:active,.feature:active,.a-feature:active,.u-item:active{transform:scale(.985)}
  .btn:active,.chip:active,.share-btn:active,.pager a:active,.more:active{transform:scale(.96)}
}
/* S4 — تكبير الصورة عند التركيز بلوحة المفاتيح يتبع نفس قاعدة تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .card:focus-visible .media > img,.card:focus-visible .media > .ph,.feature:focus-visible .media > img,.feature:focus-visible .media > .ph{transform:none}
}

/* L1 — نسخة ضبابية من الصورة (من Sanity) خلفها أثناء التحميل، ثم ظهور ناعم */
.fx-lqip::before{content:"";position:absolute;inset:0;background:var(--lqip) center/cover no-repeat;filter:blur(12px);transform:scale(1.08)}
.fx-lqip.is-done::before{visibility:hidden}
.fig-media.fx-lqip > img{position:relative}
.fx-fade{opacity:0;transition:opacity .6s var(--ease)}
.media > img.fx-fade{transition:opacity .6s var(--ease),transform 1s var(--ease)}
.fx-fade.is-loaded{opacity:1}

/* H1 — الصورة الرئيسية ظاهرة من أول لحظة (إصلاح LCP)، والنص يظهر بتتابع */
@media (prefers-reduced-motion:no-preference){
  .js .feature.reveal{opacity:1;transform:none;transition:none}
  /* الملخص (.lede) لا يتحرك: عرضه مقيّد بوحدة ch، وأي حركة عليه تجعل عرضه يتغير أحيانًا مع توقيت تحميل الخط */
  .js .feature-panel > :not(.lede){animation:fx-rise var(--fx-dur) var(--ease) backwards}
  .js .feature-panel > :nth-child(1){animation-delay:.08s}
  .js .feature-panel > :nth-child(2){animation-delay:.16s}
  .js .feature-panel > :nth-child(3){animation-delay:.24s}
  .js .feature-panel > :nth-child(4){animation-delay:.32s}
}

/* H3 — تظليل الجزء المُبرز من العنوان كقلم؛ بعد انتهاء الحركة يعود للون الأصلي نفسه */
@media (prefers-reduced-motion:no-preference){
  .js .feature h1 .mark{animation:fx-mark .9s var(--ease) .55s backwards}
}

/* P1 — شريط تقدم القراءة تحت الهيدر في صفحة المقال فقط */
body:has(.post) .site-header::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--red);
  transform:scaleX(var(--read,0));transform-origin:right;pointer-events:none}

/* P3 — صور وفيديو المقال: تظهر عند التمرير (عبر .reveal)، ثم التعليق */
@media (prefers-reduced-motion:no-preference){
  .js .prose > .fig.reveal .fig-cap{opacity:0;transition:opacity .6s var(--ease) .25s}
  .js .prose > .fig.reveal.is-in .fig-cap{opacity:1}
}

/* G1 — الخط الزمني لغزة يُرسم مع التمرير، والنقطة تظهر ثم تنبض مرة */
@media (prefers-reduced-motion:no-preference){
  .js .g-timeline .g-item::before{transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
  .js .g-timeline .g-item::after{transform:scale(0);transition:transform .45s var(--ease) .2s}
  .js .g-timeline .g-item.fx-seen::before,.js .g-timeline .g-item.fx-seen::after{transform:none}
  .js .g-timeline .g-item.fx-seen:not(.is-latest)::after{animation:ring 1.4s .35s 1}
}

/* G2 — التحديثات الأقدم تنزلق بتتابع بعد «عرض تحديثات أقدم» */
@media (prefers-reduced-motion:no-preference){
  .js .g-item.fx-in{animation:fx-rise .55s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
}

/* B1 — نقطة «عاجل» تنبض فقط إذا نُشرت المادة خلال آخر 6 ساعات */
.js .tag[data-t]:not(.is-live) .dot{animation:none}

/* M1 — قائمة الجوال: تعتيم خلفها، إيقاف تمرير الصفحة، وروابط بتتابع */
@media (max-width:960px){
  html.fx-menu-open{overflow:hidden}
  html.fx-menu-open body::after{content:"";position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.38)}
}
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  html.fx-menu-open body::after{animation:fx-fade .3s var(--ease) backwards}
  .nav.is-open li{animation:fx-rise .45s var(--ease) backwards}
  .nav.is-open > ul:first-child > li:nth-child(1){animation-delay:.08s}
  .nav.is-open > ul:first-child > li:nth-child(2){animation-delay:.13s}
  .nav.is-open > ul:first-child > li:nth-child(3){animation-delay:.18s}
  .nav.is-open > ul:first-child > li:nth-child(4){animation-delay:.23s}
  .nav.is-open .mobile-socials li{animation-delay:.28s}
}

/* M2 — حركات أقصر وأخف على الجوال */
@media (max-width:640px){
  :root{--fx-dur:.5s;--fx-rise:10px}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .js .reveal{transform:translateY(10px);transition-duration:.5s}
  .js .reveal.is-in{transform:none}
}
/* =========================================================
   15) الوضع الليلي — ضبط المكوّنات، زر التبديل، والانتقال الناعم
   الألوان الأساسية في 01-tokens.css. هنا فقط ما يحتاج ضبطًا
   على مستوى المكوّن. الصور لا يُطبَّق عليها أي فلتر.
   ========================================================= */

/* المساحات الحمراء الكبيرة التي تحمل نصًا أبيض تأخذ الأحمر الأعمق (--red-fill)؛
   الخطوط والنقاط والحلقة تبقى بالأحمر الأفتح المضبوط للتباين على الفحمي */
[data-theme="dark"] :is(.btn,.socials a,.menu-btn,.panel .box,.g-feature,.g-feature-body,.tag--exclusive,.skip,
  .pager a.pg[aria-current="page"],.video-play .pbtn,.g-feature .btn .arrow,.g-more .btn .arrow){--red:var(--red-fill)}

/* الهيدر والفوتر */
[data-theme="dark"] .site-header.is-scrolled{box-shadow:0 12px 30px -20px rgba(0,0,0,.75)}
[data-theme="dark"] .site-footer{background:var(--footer-bg);color:var(--footer-ink);box-shadow:inset 0 1px 0 var(--line)}
[data-theme="dark"] .f-about{color:rgba(237,231,224,.66)}
[data-theme="dark"] .f-links a{color:rgba(237,231,224,.72)}
@media (hover:hover){[data-theme="dark"] .f-links a:hover{color:var(--footer-ink)}}
[data-theme="dark"] .f-links a:focus-visible{color:var(--footer-ink)}
[data-theme="dark"] .f-bottom{border-top-color:rgba(237,231,224,.1);color:rgba(237,231,224,.52)}

/* تاريخ «أبرز تطور» على اللوحة الحمراء: وضوح 90% ليبلغ تباين WCAG AA (5:1) */
[data-theme="dark"] .panel .meta{color:rgba(255,255,255,.9)}

/* شارة «خاص»: نصها أبيض صافٍ في النهاري ← off-white هادئ على الأحمر الأعمق في الليلي */
[data-theme="dark"] .tag--exclusive{color:var(--ink)}

/* الحلقة والخط الزمني: حضور هادئ لا يلمع على الخلفية الداكنة */
[data-theme="dark"] .hero .ring,[data-theme="dark"] .a-card--text::after{border-color:rgba(234,81,89,.5)}
[data-theme="dark"] .g-item::before{background:rgba(234,81,89,.28)}

/* تعتيم قائمة الجوال أعمق قليلًا */
@media (max-width:960px){[data-theme="dark"].fx-menu-open body::after{background:rgba(0,0,0,.55)}}

/* ---------- زر التبديل: مفتاح صغير بنفس لغة الهيدر ---------- */
.theme-toggle{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:space-between;width:54px;height:28px;padding:0 7px;
  border:0;border-radius:var(--pill);background:transparent;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);
  transition:box-shadow .3s,color .3s}
.theme-toggle::after{content:"";position:absolute;inset:-8px -4px}                   /* مساحة لمس 44px */
.theme-toggle > svg{width:12px;height:12px;opacity:.55}
.theme-toggle .knob{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(0,0,0,.35);transition:translate .45s var(--ease),background .3s,color .3s}
.theme-toggle .knob svg{grid-area:1 / 1;width:13px;height:13px;transition:opacity .3s,rotate .45s var(--ease),scale .35s var(--ease)}
.theme-toggle .knob .i-moon{opacity:0;rotate:-90deg;scale:.5}
[data-theme="dark"] .theme-toggle .knob{translate:-26px 0}
[data-theme="dark"] .theme-toggle .knob .i-sun{opacity:0;rotate:90deg;scale:.5}
[data-theme="dark"] .theme-toggle .knob .i-moon{opacity:1;rotate:0deg;scale:1}
@media (hover:hover){.theme-toggle:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}}
.theme-toggle:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
@media (max-width:960px){
  .theme-toggle{margin-inline-start:auto}
  .theme-toggle ~ .menu-btn{margin-inline-start:0}
}

/* ---------- الانتقال بين الوضعين: تلاشٍ متقاطع ناعم (View Transitions)، وبديل بالانتقالات اللونية ---------- */
@keyframes pn-theme-out{to{opacity:0}}
@keyframes pn-theme-in{from{opacity:0}}
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease)}
html.theme-vt::view-transition-old(site-header){animation:pn-theme-out .45s var(--ease) both;mix-blend-mode:plus-lighter}
html.theme-vt::view-transition-new(site-header){animation:pn-theme-in .45s var(--ease) both;mix-blend-mode:plus-lighter}
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),fill .4s,stroke .4s!important}
@media (prefers-reduced-motion:reduce){.theme-toggle .knob,.theme-toggle .knob svg{transition:none}}
/* =========================================================
   16) لغة الحركة «الخط والحلقة والسهم» — V1…V23
   قواعد ثابتة:
   - كل حالة «بداية» مخفية داخل (prefers-reduced-motion: no-preference) ومع .js،
     فبدون JS أو مع تقليل الحركة يظهر كل عنصر في حالته النهائية.
   - الحركة بـtransform/opacity/clip-path فقط — لا تغيير في الأبعاد (لا CLS).
   - صورة الـHero وغلاف المقال وصورة «أبرز تطور» لا تُخفى أبدًا (LCP).
   - عند تشارك عنصر بين أكثر من تأثير تُجمع الانتقالات صراحة ولا تُستبدل.
   ========================================================= */
@property --pn-ring{syntax:"<angle>";inherits:false;initial-value:360deg}
@property --pn-arc{syntax:"<angle>";inherits:false;initial-value:140deg}
@keyframes pn-ring-draw{from{--pn-ring:0deg}}
@keyframes pn-arc-draw{from{--pn-arc:0deg}}
@keyframes pn-stamp{from{opacity:0;scale:1.35}}
@keyframes pn-rise{from{opacity:0;translate:0 14px}}
@keyframes pn-fade{from{opacity:0}}
@keyframes pn-pass{0%{translate:0}42%{translate:-170% 0;opacity:0}43%{translate:170% 0;opacity:0}100%{translate:0;opacity:1}}
@keyframes pn-pass-back{0%{translate:0}42%{translate:170% 0;opacity:0}43%{translate:-170% 0;opacity:0}100%{translate:0;opacity:1}}
@keyframes pn-pass-down{0%{translate:0}42%{translate:0 170%;opacity:0}43%{translate:0 -170%;opacity:0}100%{translate:0;opacity:1}}
@keyframes pn-sweep{0%{opacity:1;translate:0}100%{opacity:1;translate:-265%}}
@keyframes pn-live{from{background-position:130% 0}to{background-position:-30% 0}}

/* ---------- V1 — الحلقة الافتتاحية (الرئيسية) ---------- */
.hero .ring{-webkit-mask:conic-gradient(from 225deg,#000 var(--pn-ring),transparent 0);mask:conic-gradient(from 225deg,#000 var(--pn-ring),transparent 0)}
/* الجوال: الحلقة مخفية أصلًا — قوس على حافة اللوحة المنحنية بنفس الخط */
@media (max-width:640px){
  .feature-panel::after{display:block;content:"";position:absolute;top:0;left:0;width:72px;height:72px;background:none;pointer-events:none;
    border-top:1.5px solid var(--red);border-left:1.5px solid var(--red);border-top-left-radius:inherit;
    -webkit-mask:conic-gradient(from 250deg at 30px 30px,#000 var(--pn-arc),transparent 0);mask:conic-gradient(from 250deg at 30px 30px,#000 var(--pn-arc),transparent 0)}
}
@media (prefers-reduced-motion:no-preference){
  .js .hero .ring{animation:pn-ring-draw 1.2s cubic-bezier(.65,0,.35,1) .1s backwards}
  .js .feature-media .stamp{animation:pn-stamp .55s var(--ease) .95s backwards}
  .js.pn-intro-seen .hero .ring{animation-duration:.45s;animation-delay:0s}
  .js.pn-intro-seen .feature-media .stamp{animation-duration:.35s;animation-delay:.2s}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .js .feature-panel::after{animation:pn-arc-draw .9s cubic-bezier(.65,0,.35,1) .1s backwards}
  .js.pn-intro-seen .feature-panel::after{animation-duration:.4s;animation-delay:0s}
}

/* ---------- V2 — طبقات العمق عند مغادرة الـHero (مرتبطة بالتمرير) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero{view-timeline-name:--pn-hero}
    .js .hero .ring{animation:pn-ring-draw 1.2s cubic-bezier(.65,0,.35,1) .1s backwards,pn-depth-ring linear both;
      animation-timeline:auto,--pn-hero;animation-range:normal,exit 0% exit 100%}
    .js.pn-intro-seen .hero .ring{animation-duration:.45s,auto;animation-delay:0s,0s}
    .feature-media{animation:pn-depth-media linear both;animation-timeline:--pn-hero;animation-range:exit 0% exit 100%}
    .feature-panel{animation:pn-depth-panel linear both;animation-timeline:--pn-hero;animation-range:exit 0% exit 100%}
  }
}
@keyframes pn-depth-ring{to{translate:0 160px}}
@keyframes pn-depth-media{to{scale:.95;translate:0 var(--pn-dm,70px);opacity:.85}}
@keyframes pn-depth-panel{to{translate:0 var(--pn-dp,-40px)}}
@media (max-width:640px){.hero{--pn-dm:36px;--pn-dp:-18px}}

/* ---------- V3 — الحبر والقاعدة (عناوين الأقسام) ---------- */
.more .c{transition-property:background,color,transform,translate,scale;transition-duration:.3s,.3s,.4s,.35s,.5s;
  transition-timing-function:ease,ease,var(--ease),var(--ease),var(--ease);transition-delay:0s,0s,0s,0s,var(--pn-cd,0s)}
@media (prefers-reduced-motion:no-preference){
  .js :is(.section-head,.archive-bar){border-bottom-color:transparent}
  .js :is(.section-head,.archive-bar)::before{content:"";position:absolute;bottom:-1px;right:0;left:0;height:1px;background:var(--line);
    transform:scaleX(0);transform-origin:right;transition:transform 1s var(--ease) .55s}
  .js :is(.section-head,.archive-bar)::after{transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .js :is(.section-head,.archive-bar) h2{clip-path:inset(-15% 0 -15% 100%);transition:clip-path .9s var(--ease) .2s}
  .js .section-head .more,.js .archive-bar nav{opacity:0;translate:18px 0;transition:opacity .5s ease 1s,translate .7s var(--ease) 1s}
  .js .section-head .more .c{scale:0;--pn-cd:1.25s}
  .js .pn-drawn::before,.js .pn-drawn::after{transform:none}
  .js .pn-drawn h2{clip-path:inset(-15% 0 -15% 0)}
  .js .pn-drawn .more,.js .pn-drawn nav{opacity:1;translate:0}
  .js .pn-drawn .more .c{scale:1}
  /* بعد أول رسم: أي إعادة رسم (التصفية) تظهر مباشرة بلا حركة */
  .js .pn-static,.js .pn-static::before,.js .pn-static::after,.js .pn-static *{transition:none!important}
}

/* ---------- V4 — حقل التركيز (الفأرة ولوحة المفاتيح) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .card:not(.reveal),.js .card.pn-settled{transition:opacity .45s var(--ease),filter .45s var(--ease)}
  :is(.news,.a-grid,.related-grid):has(.card:focus-visible) .card:not(:focus-visible){opacity:.45;filter:saturate(.55)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :is(.news,.a-grid,.related-grid):has(.card:hover) .card:not(:hover){opacity:.45;filter:saturate(.55)}
}

/* ---------- V5 — السهم العابر + ميل نحو المؤشر (الميل بالـJS عبر translate) ---------- */
.btn .arrow,.go,.more .c,.post-end .back .c{overflow:hidden}
.btn .arrow{transition:transform .4s var(--ease),translate .35s var(--ease)}
.go,.post-end .back .c{transition:background .3s,color .3s,transform .4s var(--ease),translate .35s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover .arrow,.feature:hover .btn .arrow,.a-feature:hover .btn .arrow,.more:hover .c,.card:hover .go,.post-end .back:hover .c,.g-more .btn:hover .arrow{transform:none}
  .btn:hover .arrow svg,.feature:hover .btn .arrow svg,.a-feature:hover .btn .arrow svg,.more:hover .c svg,.card:hover .go svg{animation:pn-pass .6s var(--ease)}
  .post-end .back:hover .c svg{animation:pn-pass-back .6s var(--ease)}
  .g-more .btn:hover .arrow svg{animation:pn-pass-down .6s var(--ease)}
}
@media (prefers-reduced-motion:no-preference){
  .btn:focus-visible .arrow,.feature:focus-visible .btn .arrow,.a-feature:focus-visible .btn .arrow,.more:focus-visible .c,.card:focus-visible .go,.post-end .back:focus-visible .c,.g-more .btn:focus-visible .arrow{transform:none}
  .btn:focus-visible .arrow svg,.feature:focus-visible .btn .arrow svg,.a-feature:focus-visible .btn .arrow svg,.more:focus-visible .c svg,.card:focus-visible .go svg{animation:pn-pass .6s var(--ease)}
  .post-end .back:focus-visible .c svg{animation:pn-pass-back .6s var(--ease)}
  .g-more .btn:focus-visible .arrow svg{animation:pn-pass-down .6s var(--ease)}
}

/* ---------- V6 — فتحة العدسة (الصور غير الرئيسية فقط — .pn-ap يضيفه الـJS) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .pn-ap{transition:clip-path 1s var(--ease)}
  .js .pn-ap > img{transition:opacity .6s var(--ease),transform 1s var(--ease),scale 1.3s var(--ease)}
  .js .pn-ap:not(.is-open){clip-path:inset(9% round 44px)}
  .js .pn-ap:not(.is-open) > img{scale:1.3}
  .js .pn-ap.is-open{clip-path:inset(0 round 0px)}
}

/* ---------- V7 — نافذة العمق: الصورة تتحرك داخل إطارها مع التمرير ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    :is(.card .media,.fig-media,.g-img){view-timeline-name:--pn-frame}
    :is(.card .media,.fig-media,.g-img) > img{scale:1.12;animation:pn-window linear both;animation-timeline:--pn-frame;animation-range:cover 0% cover 100%}
  }
}
@keyframes pn-window{from{translate:0 var(--pn-w,-6%)}to{translate:0 calc(var(--pn-w,-6%) * -1)}}
@media (max-width:640px){:is(.card .media,.fig-media,.g-img){--pn-w:-4%}}

/* ---------- V8 — فصول القراءة على شريط التقدم (العلامات يضيفها الـJS) ---------- */
.pn-chapters{position:absolute;inset-inline:0;bottom:-1px;height:2px;pointer-events:none;z-index:1}
.pn-chapter{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--muted);
  translate:50% -50%;transition:background .3s,box-shadow .3s,scale .3s var(--ease)}
.pn-chapter.on{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent);scale:1.15}
.prose h2{position:relative}
.js .prose h2::before{content:"";position:absolute;inset-inline-start:-18px;top:.32em;width:4px;height:.9em;border-radius:2px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.js .prose h2.pn-on::before{transform:scaleY(1)}
@media (max-width:640px){.js .prose h2::before{inset-inline-start:-12px;width:3px}}

/* ---------- V9 — لحظة الاقتباس البارز ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .prose .pullquote{border-inline-start-color:transparent}
  .js .prose .pullquote::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-3px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease)}
  .js .prose .pullquote::before{opacity:0;translate:0 -26px;transition:opacity .3s ease .7s,translate .6s cubic-bezier(.34,1.56,.64,1) .7s}
  .js .prose .pullquote p{clip-path:inset(-10% 0 -10% 100%);transition:clip-path 1.3s var(--ease) .45s}
  .js .prose .pullquote figcaption{opacity:0;translate:0 8px;transition:opacity .6s ease 1.5s,translate .6s var(--ease) 1.5s}
  .js .prose .pullquote.is-on::after{transform:none}
  .js .prose .pullquote.is-on::before{opacity:1;translate:0}
  .js .prose .pullquote.is-on p{clip-path:inset(-10% 0 -10% 0)}
  .js .prose .pullquote.is-on figcaption{opacity:1;translate:0}
}

/* ---------- V10 — تجميع الخلاصة ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .summary{position:relative;border-inline-start-color:transparent}
  .js .summary::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-3px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
  .js .summary .summary-title::before{scale:0;transition:scale .45s cubic-bezier(.34,1.56,.64,1) .5s}
  .js .summary .summary-list li{opacity:0;translate:0 10px;transition:opacity .5s ease,translate .6s var(--ease)}
  .js .summary .summary-list li::before{scale:0;transition:scale .4s cubic-bezier(.34,1.56,.64,1)}
  .js .summary.is-on::after{transform:none}
  .js .summary.is-on .summary-title::before{scale:1;animation:ring 1.2s .95s 1}
  .js .summary.is-on .summary-list li,.js .summary.is-on .summary-list li::before{opacity:1;translate:0;scale:1}
  .js .summary .summary-list li:nth-child(1),.js .summary .summary-list li:nth-child(1)::before{transition-delay:.8s}
  .js .summary .summary-list li:nth-child(2),.js .summary .summary-list li:nth-child(2)::before{transition-delay:.95s}
  .js .summary .summary-list li:nth-child(3),.js .summary .summary-list li:nth-child(3)::before{transition-delay:1.1s}
  .js .summary .summary-list li:nth-child(4),.js .summary .summary-list li:nth-child(4)::before{transition-delay:1.25s}
  .js .summary .summary-list li:nth-child(n+5),.js .summary .summary-list li:nth-child(n+5)::before{transition-delay:1.4s}
}

/* ---------- V11 — توزيع بطاقات «اقرأ أيضًا» (يُجمع مع ظهورها الحالي .reveal) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .related-grid > .card{transition:opacity .7s var(--ease),transform .7s var(--ease),translate .9s var(--ease),rotate .9s var(--ease);transition-delay:var(--d,0s)}
  .js .related-grid:not(.is-dealt) > .card:nth-child(1){translate:-104% 26px;rotate:-2.2deg}
  .js .related-grid:not(.is-dealt) > .card:nth-child(2){translate:0 34px;rotate:1.4deg}
  .js .related-grid:not(.is-dealt) > .card:nth-child(3){translate:104% 26px;rotate:2.2deg}
  .js .card.pn-settled{transition:opacity .45s var(--ease),filter .45s var(--ease)}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .js .related-grid > .card{transition-duration:.5s,.5s,.7s,.7s}
  .js .related-grid:not(.is-dealt) > .card:nth-child(n){translate:0 24px;rotate:1.2deg}
}

/* ---------- V12 — حبر الروابط داخل نص المقال ---------- */
.prose :is(p,li) a{text-decoration-color:color-mix(in srgb,currentColor 28%,transparent);
  background:linear-gradient(currentColor,currentColor) no-repeat right 100% / 0% 1.5px;padding-bottom:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .5s var(--ease),text-decoration-color .25s}
@media (hover:hover){.prose :is(p,li) a:hover{background-size:100% 1.5px;text-decoration-color:transparent}}
.prose :is(p,li) a:focus-visible{background-size:100% 1.5px;text-decoration-color:transparent}
.prose :is(p,li) a:visited{text-decoration-color:color-mix(in srgb,currentColor 70%,transparent)}

/* ---------- V13 — الصورة تصبح الغلاف (انتقال حقيقي بين الصفحات — يضبط الاسم الـJS) ---------- */
::view-transition-group(pn-cover){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(pn-cover),::view-transition-new(pn-cover){height:100%;object-fit:cover;animation:none;mix-blend-mode:normal}

/* ---------- V14 — ومضة على خط الهيدر العلوي عند الوصول لصفحة جديدة ---------- */
.site-header::before{content:"";position:absolute;top:-3px;right:0;width:38%;height:3px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent)}
@media (prefers-reduced-motion:no-preference){.site-header.pn-sweep::before{animation:pn-sweep .95s var(--ease)}}

/* ---------- V15 — الشبكة المتحولة (التصفية/الترقيم عبر View Transitions في archive.js) ---------- */
html.pn-grid-vt::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}

/* ---------- V16 — مؤشر اللحظة على الخط الزمني لغزة ---------- */
.g-timeline{position:relative}
.pn-now{position:absolute;top:0;width:14px;height:14px;border-radius:50%;background:var(--red);z-index:2;pointer-events:none;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 18%,transparent);translate:50% var(--y,0);transition:translate .15s linear}
.js .g-timeline.pn-live .g-time{color:var(--muted);transition:color .35s}
.js .g-timeline.pn-live .g-item.passed .g-time{color:var(--ink)}
.js .g-timeline.pn-live .g-item.now .g-time,.js .g-timeline.pn-live .g-item.is-latest .g-time{color:var(--red)}

/* ---------- V17 — عناوين الأيام تثبت أثناء قراءة تحديثاتها ---------- */
.g-day-head{position:sticky;top:calc(var(--pn-hdr,66px) + env(safe-area-inset-top,0px));z-index:3;background:var(--bg);box-shadow:0 -10px 0 var(--bg)}
.g-day-head h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-inline-end:8px;vertical-align:middle}

/* ---------- V18 — «أبرز تطور» كنشرة إخبارية (الصورة ظاهرة دائمًا) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .g-feature .tag,.js .panel .box .tag{scale:1.35;opacity:0;transition:scale .45s cubic-bezier(.34,1.56,.64,1) 1s,opacity .2s ease 1s}
  .js .g-feature :is(h2,p,.g-links,.btn),.js .panel .box :is(h3,p,.foot){opacity:0;translate:0 14px;transition:opacity .5s ease,translate .7s var(--ease)}
  .js .g-feature h2,.js .panel .box h3{transition-delay:1.15s}
  .js .g-feature p,.js .panel .box p{transition-delay:1.25s}
  .js .g-feature .g-links,.js .panel .box .foot{transition-delay:1.35s}
  .js .g-feature .btn{transition-delay:1.45s}
  .js :is(.g-feature,.panel).is-on .tag{scale:1;opacity:1}
  .js .g-feature.is-on :is(h2,p,.g-links,.btn),.js .panel.is-on .box :is(h3,p,.foot){opacity:1;translate:0}
  .js .panel .box{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
  .js .panel.is-on .box{clip-path:inset(0 0 0 0)}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  /* الصورة (العمود الأيمن) ظاهرة؛ اللوحة الحمراء تنساب من حافتها */
  .js .g-feature:not(.g-feature--text){clip-path:inset(0 0 0 47.62% round var(--r-lg));transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
  .js .g-feature--text{clip-path:inset(0 0 0 100% round var(--r-lg));transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
  .js .g-feature.is-on{clip-path:inset(0 0 0 0 round var(--r-lg))}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .js .g-feature .g-feature-body{translate:0 60px;opacity:0;transition:translate .9s var(--ease) .15s,opacity .5s ease .15s}
  .js .g-feature.is-on .g-feature-body{translate:0;opacity:1}
}

/* ---------- V19 — حافة البث: للعاجل/أبرز تطور خلال أول 6 ساعات فقط (يضيفها الـJS) ---------- */
.g-feature-body{position:relative}
.pn-live-edge{position:absolute;top:0;right:0;left:var(--r-xl);height:2px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--red) 35%,var(--red) 65%,transparent) no-repeat;background-size:34% 100%}
:is(.g-feature,.panel) .pn-live-edge{left:0;background-image:linear-gradient(90deg,transparent,#fff 35%,#fff 65%,transparent)}
@media (prefers-reduced-motion:no-preference){.pn-live-edge{animation:pn-live 3.6s linear infinite}}
@media (prefers-reduced-motion:reduce){.pn-live-edge{background-size:100% 100%;opacity:.5}}

/* ---------- V20 — خيط الرحلة (الرئيسية، الحاسوب فقط — يرسمه الـJS) ---------- */
.pn-thread{position:absolute;width:2px;background:var(--red);transform:scaleY(var(--p,0));transform-origin:top;z-index:2;pointer-events:none;border-radius:2px}
#view-home.pn-threaded{position:relative}
.js #view-home.pn-threaded .section-head::before{content:"";position:absolute;bottom:-2px;left:auto;right:calc(var(--pn-turn,16px) * -1);width:var(--pn-turn,16px);height:3px;
  background:var(--red);border-radius:2px 0 0 2px;transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease)}
.js #view-home.pn-threaded .section-head::after{transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease) .2s}
.js #view-home.pn-threaded .section-head{border-bottom-color:var(--line)}
.js #view-home.pn-threaded .section-head.pn-thread-on::before,.js #view-home.pn-threaded .section-head.pn-thread-on::after{transform:scaleX(1)}

/* ---------- V21 — الحلقة تنغلق خلف الفوتر ---------- */
@property --pn-close{syntax:"<angle>";inherits:false;initial-value:360deg}
@keyframes pn-close{from{--pn-close:0deg}}
.site-footer{position:relative;overflow:hidden}
.site-footer > .wrap{position:relative;z-index:1}
.pn-footer-ring{position:absolute;width:min(62vw,720px);aspect-ratio:1;border:1.5px solid rgba(206,31,48,.6);border-radius:50%;left:-16%;bottom:-58%;pointer-events:none;
  -webkit-mask:conic-gradient(from 45deg,#000 var(--pn-close),transparent 0);mask:conic-gradient(from 45deg,#000 var(--pn-close),transparent 0)}
[data-theme="dark"] .pn-footer-ring{border-color:rgba(234,81,89,.42)}
@media (max-width:640px){.pn-footer-ring{width:130vw;left:-60%;bottom:-40%}}
@media (prefers-reduced-motion:no-preference){
  .js .site-footer:not(.is-on) .pn-footer-ring{--pn-close:0deg}
  .js .site-footer.is-on .pn-footer-ring{animation:pn-close 1.8s cubic-bezier(.65,0,.35,1) .5s backwards}
  .js .site-footer .f-bottom{border-top-color:transparent;position:relative}
  .js .site-footer .f-bottom::before{content:"";position:absolute;top:-1px;right:0;left:0;height:1px;background:rgba(255,255,255,.14);transform:scaleX(0);transform-origin:right;transition:transform 1.2s var(--ease) .3s}
  [data-theme="dark"] .js .site-footer .f-bottom::before{background:rgba(237,231,224,.1)}
  .js .site-footer .f-grid > *{opacity:0;translate:0 16px;transition:opacity .6s ease,translate .8s var(--ease)}
  .js .site-footer .f-grid .logo img{scale:1.15;transition:scale .7s var(--ease),height .35s var(--ease)}
  .js .site-footer.is-on .f-bottom::before{transform:none}
  .js .site-footer.is-on .f-grid > *{opacity:1;translate:0}
  .js .site-footer.is-on .f-grid .logo img{scale:1}
  .js .site-footer .f-grid > :nth-child(2){transition-delay:.15s}
  .js .site-footer .f-grid > :nth-child(3){transition-delay:.3s}
}

/* ---------- V22 — الصف المغناطيسي على الجوال (الصفوف الأفقية الموجودة) ---------- */
@media (max-width:640px){
  :is(.n-row,.related-grid){scroll-padding-inline:var(--gutter)}
  :is(.n-row,.related-grid) > .card{scroll-snap-align:center}
}
@supports (animation-timeline:view()){
  @media (max-width:640px) and (prefers-reduced-motion:no-preference){
    :is(.n-row,.related-grid) > .card{animation:pn-snap-focus linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
  }
}
@keyframes pn-snap-focus{0%{scale:.9;opacity:.5}45%,55%{scale:1;opacity:1}100%{scale:.9;opacity:.5}}

/* ---------- V23 — حلقة العودة للأعلى ---------- */
.pn-top{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:45;width:52px;height:52px;
  border:0;padding:0;border-radius:50%;background:var(--surface);color:var(--red);cursor:pointer;box-shadow:0 10px 26px -12px rgba(0,0,0,.45);
  opacity:0;scale:.8;visibility:hidden;transition:opacity .35s,scale .45s var(--ease),translate .25s var(--ease),visibility 0s .45s}
.pn-top.show{opacity:1;scale:1;visibility:visible;transition:opacity .35s,scale .45s var(--ease),translate .25s var(--ease),visibility 0s}
.pn-top > svg{position:absolute;inset:0;rotate:-90deg}
.pn-top .pn-track{fill:none;stroke:var(--line);stroke-width:2.5}
.pn-top .pn-prog{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:calc(138.2 * (1 - var(--p,0)))}
.pn-top .pn-arrow{position:absolute;inset:0;display:grid;place-items:center}
.pn-top .pn-arrow svg{width:18px;height:18px;rotate:90deg}
@media (hover:hover){.pn-top:hover{background:var(--red-fill);color:#fff}}
.pn-top:focus-visible{background:var(--red-fill);color:#fff}
html.fx-menu-open .pn-top{opacity:0;visibility:hidden}
@media (max-width:640px){.pn-top{width:46px;height:46px}}