/* ==========================================================================
   مدونة قريض — Qareed Blog
   الخطوط: Lyon Arabic Display (العناوين) · PingAR+LT (النصوص)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:"Lyon Arabic Display";src:url("../fonts/lyon-arabic-display-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url("../fonts/lyon-arabic-display-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url("../fonts/lyon-arabic-display-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url("../fonts/lyon-arabic-display-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url("../fonts/lyon-arabic-display-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:"PingAR";src:url("../fonts/ping-ar-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"PingAR";src:url("../fonts/ping-ar-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PingAR";src:url("../fonts/ping-ar-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PingAR";src:url("../fonts/ping-ar-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PingAR";src:url("../fonts/ping-ar-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* درجات الورق — من الأفتح إلى الأغمق */
  --paper-100:#FBF9F3;
  --paper-2:#F8F5EB;
  --paper:#F4EFE6;
  --paper-300:#EDE5D6;
  --sand:#F4E9CE;
  --sand-600:#E2CFA6;

  /* درجات البرتقالي */
  --orange-100:#FBE3D8;
  --orange-200:#F7C6B0;
  --orange-300:#F2946E;
  --orange:#EC5D29;
  --orange-700:#C4441A;
  --orange-900:#8E2E0E;

  /* درجات العنابي */
  --burgundy-500:#7A1C3E;
  --burgundy-700:#55102A;
  --burgundy:#380516;

  --ink:#0B0906;
  --ink-70:rgba(11,9,6,.70);
  --ink-55:rgba(11,9,6,.55);
  --ink-40:rgba(11,9,6,.40);
  --line:rgba(11,9,6,.14);
  --line-soft:rgba(11,9,6,.08);
  --black:#000;
  --footer:#241E19;   /* أفتح من الأسود بدرجة — بنّي داكن من عائلة الهوية */

  --display:"Lyon Arabic Display",Georgia,serif;
  --text:"PingAR","IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,sans-serif;

  --wrap:1240px;
  --gutter:32px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;
  background:var(--paper-2);        /* أفتح درجة من الشريط العلوي ليظهر الفصل */
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:0;                       /* هوية قريض: بلا تباعد حروف */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums;       /* أرقام غربية 0123456789 */
}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:0}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  margin:0;
  line-height:1.32;
  font-feature-settings:"salt" 1;         /* البدائل الأنيقة في Lyon */
  text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0;padding:0}
/* ── التحديد: لون العلامة كاملًا، ولا يتجاوز النص ── */
::selection{background:var(--orange);color:var(--paper-2)}
::-moz-selection{background:var(--orange);color:var(--paper-2)}

/* حين تعمل الطبقة المرسومة يدويًا (main.js) نُخفي تظليل المتصفّح ونُبقي لون النص */
.has-selfx ::selection{background:transparent;color:var(--paper-2)}
.has-selfx ::-moz-selection{background:transparent;color:var(--paper-2)}
body{position:relative}
.selfx{position:absolute;top:0;left:0;width:0;height:0;direction:ltr;
  pointer-events:none;z-index:0}
.selfx i{position:absolute;display:block;background:var(--orange)}
/* المحتوى فوق طبقة التظليل */
.site-header,main,.site-footer,.progress{position:relative;z-index:1}

/* الصناديق والوسائط لا تُظلَّل إطلاقًا — لا بمنع التحديد وحده (سفاري يتجاهله عند
   الرسم) بل بجعل لون تظليلها شفافًا أيضًا */
.site-header,.site-footer,.progress,.post-by__mark,.tag,.kicker,
.endmark,.rule__label,.ad,.player,.progbox,.share,
.related,.tabs,.grid-end,.grid-done,.newsletter,
figcaption,blockquote cite,.verse cite,.player__note,.form__note,
.author__role,.author__bio,
.post-body figure,.post-cover,.card__media,.hero__media,img,video,svg{
  -webkit-user-select:none;user-select:none;
}
.site-header ::selection,.site-header::selection,
.site-footer ::selection,.site-footer::selection,
.ad ::selection,.ad::selection,
.player ::selection,.player::selection,
.progbox ::selection,.progbox::selection,
.share ::selection,.share::selection,
.related ::selection,.related::selection,
.newsletter ::selection,.newsletter::selection,
.tabs ::selection,.tabs::selection,
.post-body figure ::selection,.post-body figure::selection,
.post-cover ::selection,.post-cover::selection,
.card__media ::selection,.hero__media ::selection,
figcaption::selection,cite::selection,
.tag::selection,.kicker::selection,.endmark::selection,
.rule__label::selection,.grid-done::selection,
.author__role::selection,.author__bio::selection,
img::selection,video::selection,svg::selection{
  background:transparent;color:inherit;
}
/* اسم الكاتب يبقى ضمن ما يُنسخ */
.post-by__a a{-webkit-user-select:text;user-select:text}

/* التظليل يقف عند آخر حرف:
   العناوين والقوائم تنكمش على نصّها، والفقرات تفقد صندوقها فتصير تدفّقًا متصلًا
   (سفاري يمدّ آخر سطرٍ إلى حافة الصندوق، فحين يغيب الصندوق يغيب الامتداد). */
.post-body>h2,.post-body>h3,.post-body>ul,.post-body>ol,
.post-head__title,.post-head__dek{
  width:fit-content;max-width:100%;
}
.post-body>p:not([class]),.post-body>p.lead{display:inline}
.post-body>p:not([class])::after,.post-body>p.lead::after{
  content:"\A\A";white-space:pre;line-height:.44;
}
/* الفقرة السطريّة لا تقبل هامشًا علويًّا، فالكتلة التي قبلها هي التي تُبعِدها */
.post-body>h2,.post-body>h3{margin-bottom:14px}

/* تظليل النص (mark) — من شريط التنسيق في اللوحة */
.post-body mark{background:var(--sand);color:inherit;padding:.06em .18em;border-radius:2px}
.post-body>ul,.post-body>ol,.post-body>blockquote,
.post-body>.note,.post-body>.box,.post-body>.bar,.post-body>.verse{margin-bottom:20px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:760px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,230,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
/* عند النزول يزداد ثباتًا ويظهر خطّ رفيع يفصله عن النص */
.site-header.is-stuck{
  background:rgba(244,239,230,.97);
  box-shadow:0 1px 0 var(--line-soft);
}
.site-header__inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* الشعار على اليمين (أول عنصر في اتجاه RTL) */
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand__mark{width:74px;height:auto;color:var(--ink);transition:color .25s var(--ease)}
.brand:hover .brand__mark{color:var(--orange)}
.brand__label{
  font-family:var(--text);font-weight:500;font-size:13px;
  color:var(--ink-55);padding-inline-start:14px;line-height:1;
  border-inline-start:1px solid var(--line);   /* خط رمادي خفيف يفصله عن الشعار */
}

/* زر النشرة البريدية — بدل تسجيل الدخول */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--text);font-weight:500;font-size:14px;line-height:1;
  padding:14px 24px;border:1px solid transparent;border-radius:0;   /* زوايا حادة */
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--orange);color:var(--paper-2)}
.btn--primary:hover{background:var(--ink);color:var(--paper-2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.btn--light{background:var(--orange);color:var(--paper-2)}
.btn--light:hover{background:var(--paper-2);color:var(--burgundy)}
.btn__arrow{width:14px;height:14px;flex:none}
.btn--subscribe .btn__short{display:none}
@media (max-width:560px){
  .btn--subscribe .btn__long{display:none}
  .btn--subscribe .btn__short{display:inline}
  .btn--subscribe{padding:12px 18px}
}

/* ---------- Masthead ---------- */
.masthead{padding-block:72px 12px}
.masthead__title{font-size:clamp(30px,4.4vw,46px);font-weight:400}
.masthead__dek{
  margin-top:16px;max-width:56ch;
  font-weight:300;font-size:clamp(15px,1.5vw,17px);line-height:2;color:var(--ink-70);
}

/* ---------- Plane: مستوى أفتح يفصل المحتوى ---------- */
.plane{background:transparent}

/* ---------- Kicker ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-weight:500;font-size:12px;line-height:1;color:var(--orange);
}
.kicker::before{
  content:"";width:9px;height:9px;background:var(--orange);
  transform:skewX(-12deg);flex:none;            /* موتيف الصندوق المائل */
}

/* ---------- Hero (أحدث مقال) ---------- */
.hero{padding:44px 0 84px}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero__media{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.hero__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hero:hover .hero__media img{transform:scale(1.03)}
.hero__title{margin-top:22px;font-size:clamp(32px,4.6vw,58px);font-weight:400;line-height:1.24}
.hero a:hover .hero__title{color:var(--orange-700)}
.hero__dek{
  margin-top:22px;max-width:52ch;
  font-weight:300;font-size:clamp(16px,1.6vw,18px);line-height:2.05;color:var(--ink-70);
}
.hero__more{
  margin-top:30px;display:inline-flex;align-items:center;gap:10px;
  font-weight:500;font-size:14px;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:6px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hero a:hover .hero__more{color:var(--orange);border-color:var(--orange)}

/* ---------- وسم البرنامج ---------- */
.tag{
  display:inline-flex;align-items:center;
  font-family:var(--text);font-weight:500;font-size:12px;line-height:1;
  color:var(--orange-700);background:var(--orange-100);
  padding:7px 13px;white-space:nowrap;
}
.card__tag{align-self:flex-start;margin-top:18px}
.hero__tag{margin-top:14px}

/* صندوق «هذا المقال ضمن» أسفل المقال */
.progbox{
  margin-top:40px;padding:26px 28px;background:var(--sand);
  border-inline-start:3px solid var(--orange);
}
.progbox__label{font-family:var(--text);font-weight:400;font-size:13px;color:var(--ink-55)}
.progbox__name{
  margin-top:6px;font-family:var(--display);font-weight:500;
  font-size:clamp(21px,2.4vw,26px);line-height:1.3;font-feature-settings:"salt" 1;
}
.progbox__desc{
  margin-top:10px;font-family:var(--text);font-weight:300;font-size:15px;
  line-height:1.95;color:var(--ink-70);max-width:62ch;
}

/* ---------- Meta ---------- */
.meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-family:var(--text);font-weight:400;font-size:13px;color:var(--ink-55);line-height:1.6;
}
.meta span+span::before{content:"·";margin-inline-end:8px;color:var(--ink-40)}
.byline__a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .2s var(--ease),border-color .2s var(--ease)}
.byline__a:hover{color:var(--orange-700);border-bottom-color:var(--orange-700)}
.meta--hero{margin-top:20px}

/* ---------- صفحة الكاتب ---------- */
.author-head{padding-block:72px 8px;max-width:760px}
.author-head__mark{
  width:74px;height:74px;margin-bottom:24px;
  background:var(--ink);color:var(--paper-2);display:grid;place-items:center;
  transform:skewX(-12deg);
  font-family:var(--display);font-weight:500;font-size:30px;line-height:1;
  font-feature-settings:"salt" 1;
}
.author-head__mark span{transform:skewX(12deg)}
.author-head__mark--img{transform:none;background:var(--sand);overflow:hidden}
.author-head__mark--img img{width:100%;height:100%;object-fit:cover;display:block}
.author-head__name{margin-top:14px;font-size:clamp(30px,4.2vw,46px);font-weight:400}
.author-head__bio{
  margin-top:16px;max-width:56ch;
  font-weight:300;font-size:clamp(15px,1.5vw,17px);line-height:2;color:var(--ink-70);
}
.author-head__count{
  margin-top:22px;font-family:var(--text);font-weight:500;font-size:13px;color:var(--orange-700);
}
@media (max-width:760px){.author-head{padding-block:44px 4px}}

/* ---------- Section rule ---------- */
.rule{display:flex;align-items:center;gap:22px;margin:76px 0 46px}
.rule::before,.rule::after{content:"";flex:1}
.rule__label{
  font-family:var(--text);font-weight:500;font-size:13px;color:var(--ink-55);
  line-height:1;white-space:nowrap;
}

/* ---------- التصنيف ---------- */
.rule--tabs{margin:0;padding-block:34px 40px}
.tabs{display:flex;gap:4px;background:var(--paper-300);padding:4px}
.tab{
  font-family:var(--text);font-weight:500;font-size:14px;line-height:1;
  padding:12px 22px;border:0;border-radius:0;background:transparent;color:var(--ink-55);
  cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.tab:hover{color:var(--orange-700)}
.tab.is-active{background:var(--ink);color:var(--paper-2)}

/* ---------- Grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px 40px}
.card{display:flex;flex-direction:column}
.card__media{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/3;margin:0}
.card__rank{
  position:absolute;inset-block-start:0;inset-inline-start:0;z-index:2;
  min-width:46px;height:40px;display:none;place-items:center;
  background:var(--orange);color:var(--paper-2);
  font-family:var(--display);font-weight:500;font-size:19px;line-height:1;
  padding:0 12px;transform:skewX(-12deg) translateX(6px);
  font-feature-settings:"salt" 1;
}
body.is-sorted-reads .card__rank{display:grid}
.card__reads{display:none;color:var(--orange-700);font-weight:500}
body.is-sorted-reads .card__reads{display:inline}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__title{
  margin-top:14px;font-size:clamp(20px,2.1vw,25px);font-weight:400;line-height:1.42;
  transition:color .25s var(--ease);
}
.card:hover .card__title{color:var(--orange-700)}
.card__dek{
  margin-top:12px;font-weight:300;font-size:15px;line-height:1.95;color:var(--ink-70);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card .meta{margin-top:16px}
.card[hidden]{display:none}

/* ---------- نهاية الشبكة ---------- */
.grid-end{height:1px;margin-top:64px}
.grid-done{
  margin-top:64px;text-align:center;
  font-family:var(--text);font-weight:400;font-size:13px;color:var(--ink-40);
}

/* ---------- مساحة إعلانية ---------- */
.rule--tight{margin:0}
.rule--tight .rule__label{
  font-size:12px;font-weight:400;color:var(--ink-40);
  background:var(--sand);padding:7px 16px;
}
.ad{margin:66px 0;display:block}
.ad__slot{margin-top:20px;display:grid;place-items:center}
.ad__slot>img,.ad__slot>iframe,.ad__slot>ins{max-width:100%;height:auto}
.ad__slot--empty{
  min-height:120px;background:var(--sand);
  border:1px dashed var(--sand-600);padding:18px;
}

/* نصّ يكتبه المحرّر داخل الفاصل — بديل الإعلان */
.ad__text{
  margin:20px auto 0;max-width:58ch;text-align:center;
  font-family:var(--text);font-weight:300;font-size:17px;line-height:2;color:var(--ink-70);
}
.ad__img{
  width:100%;max-width:420px;height:auto;display:block;margin:0 auto 18px;background:var(--sand);
}
.ad__text a.ad__cta{
  display:inline-block;margin-top:16px;padding:11px 22px;
  font-family:var(--text);font-weight:500;font-size:13px;line-height:1;
  background:var(--orange);color:var(--paper-2);border-bottom:0;
  white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.ad__text a.ad__cta:hover{background:var(--ink);color:var(--paper-2);border-bottom:0}
.ad__text a{
  color:var(--orange);font-weight:400;
  border-bottom:1px solid rgba(236,93,41,.45);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.ad__text a:hover{color:var(--orange-700);border-bottom-color:var(--orange-700)}
@media (max-width:620px){.ad__text{font-size:16px;text-align:start}}
@media (max-width:620px){
  .form__field,.form__field--name{flex:1 1 100%}
  .form .btn{width:100%}
}

/* الإعلان الافتراضي — لوحة ألوان مستقلة حتى يُقرأ إعلانًا لا محتوى قريض */
.promo{
  --promo-bg:#12332B; --promo-ink:#F2EFE4; --promo-gold:#C9A227;
  display:flex;align-items:center;gap:26px;width:100%;
  background:var(--promo-bg);color:var(--promo-ink);
  padding:26px 30px;
  transition:transform .35s var(--ease);
}
.promo:hover{transform:translateY(-2px)}
.promo__mark{
  flex:none;width:56px;height:56px;display:grid;place-items:center;
  background:var(--promo-gold);color:var(--promo-bg);
  transform:skewX(-12deg);
  font-family:var(--display);font-weight:700;font-size:26px;line-height:1;
  font-feature-settings:"salt" 1;
}
.promo__mark span{transform:skewX(12deg)}
.promo__body{display:block;min-width:0}
.promo__brand{
  display:block;font-family:var(--text);font-weight:500;font-size:12px;line-height:1;
  color:var(--promo-gold);
}
.promo__title{
  display:block;margin-top:9px;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,25px);
  line-height:1.3;color:var(--promo-ink);font-feature-settings:"salt" 1;
}
.promo__text{
  display:block;margin-top:7px;font-family:var(--text);font-weight:300;font-size:14px;line-height:1.8;
  color:rgba(242,239,228,.70);max-width:46ch;
}
.promo__cta{
  display:inline-block;flex:none;margin-inline-start:auto;
  font-family:var(--text);font-weight:500;font-size:13px;line-height:1;
  padding:13px 22px;border:1px solid var(--promo-gold);color:var(--promo-gold);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.promo:hover .promo__cta{background:var(--promo-gold);color:var(--promo-bg)}
@media (max-width:620px){
  .promo{flex-wrap:wrap;gap:18px;padding:22px}
  .promo__cta{margin-inline-start:0;width:100%;text-align:center;padding:13px 0}
}

/* ---------- اقرأ أيضًا: قائمة رأسية، عنصر تحت عنصر ---------- */
.related{padding-bottom:clamp(70px,8vw,120px)}
.related__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:76px 0 26px;
}
.related__title{
  font-size:clamp(21px,2.4vw,26px);font-weight:500;line-height:1.35;
}
.related__more{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--text);font-weight:500;font-size:13.5px;color:var(--ink-55);
  transition:color .25s var(--ease);
}
.related__more svg{width:13px;height:13px}
.related__more:hover{color:var(--orange-700)}
.related__list{display:flex;flex-direction:column;gap:10px}
.rel-item{
  display:flex;align-items:center;gap:22px;padding:14px 0;
}
.rel-item__media{
  flex:none;width:124px;height:92px;margin:0;overflow:hidden;background:var(--sand);
}
.rel-item__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.rel-item:hover .rel-item__media img{transform:scale(1.06)}
.rel-item__body{min-width:0}
.rel-item__title{
  margin-top:9px;font-size:clamp(18px,2vw,22px);font-weight:400;line-height:1.45;
  transition:color .25s var(--ease);
}
.rel-item:hover .rel-item__title{color:var(--orange-700)}
.rel-item .meta{margin-top:8px}
@media (max-width:560px){
  .rel-item{gap:16px}
  .rel-item__media{width:92px;height:72px}
  .rel-item__title{font-size:17px;margin-top:7px}
}

/* ---------- Newsletter ---------- */
.newsletter{margin-top:88px;padding-bottom:clamp(56px,7vw,96px)}
.newsletter__box{
  background:var(--burgundy);color:var(--paper-2);
  padding:clamp(34px,4.4vw,56px) clamp(26px,3.4vw,48px);
}
.newsletter .kicker{color:var(--orange)}
.newsletter__title{margin-top:20px;font-size:clamp(30px,4vw,50px);font-weight:400;color:var(--paper-2)}
.newsletter__dek{
  margin-top:20px;max-width:48ch;font-weight:300;font-size:clamp(15px,1.5vw,17px);
  line-height:2;color:rgba(248,245,235,.72);
}
.form{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center}
.form__field{
  flex:1 1 200px;min-width:0;background:transparent;color:var(--paper-2);
  border:1px solid rgba(248,245,235,.28);border-radius:0;
  padding:15px 18px;font-size:15px;font-weight:300;transition:border-color .25s var(--ease);
}
.form__field::placeholder{color:rgba(248,245,235,.42)}
.form__field:focus{outline:none;border-color:var(--orange)}
.form__field--name{flex:0 1 170px}
.form__note{margin-top:18px;font-size:13px;font-weight:300;color:rgba(248,245,235,.55)}
.form__done{margin-top:18px;font-size:14px;font-weight:500;color:var(--orange)}
.newsletter.is-flash{animation:flash 1.1s var(--ease)}
@keyframes flash{0%,100%{background:var(--burgundy)}35%{background:#4a0a1f}}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer);color:var(--paper-2);padding:34px 0 28px}
.site-footer__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px 40px;flex-wrap:wrap;
}
.site-footer__tag{
  font-family:var(--display);font-weight:300;font-size:clamp(16px,1.7vw,19px);
  color:rgba(248,245,235,.82);font-feature-settings:"salt" 1;
}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-links a{font-size:14px;font-weight:300;color:rgba(248,245,235,.68);transition:color .25s var(--ease)}
.footer-links a:hover{color:var(--orange-300)}
.site-footer__bottom{
  display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;
  padding-top:14px;font-size:12.5px;font-weight:300;color:rgba(248,245,235,.45);
}

/* ==========================================================================
   صفحة المقال
   ========================================================================== */
.progress{position:fixed;top:var(--header-h);inset-inline:0;height:2px;z-index:60;pointer-events:none}
.progress__bar{height:100%;width:0;background:var(--orange);transform-origin:right center}

.post-head{padding-block:64px 44px;text-align:center}
.post-head__title{
  margin-top:22px;font-size:clamp(32px,5vw,62px);font-weight:400;line-height:1.22;
  max-width:18ch;margin-inline:auto;
}
.post-head__dek{
  margin:26px auto 0;max-width:60ch;font-weight:300;
  font-size:clamp(16px,1.7vw,19px);line-height:2.05;color:var(--ink-70);
}
.post-head .meta{justify-content:center;margin-top:28px}

/* سطر الكُتّاب أعلى المقال */
.post-by{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 20px;margin-top:30px;
}
.post-by__a{display:inline-flex;align-items:center;gap:10px}
.post-by__mark{
  width:34px;height:34px;flex:none;background:var(--ink);color:var(--paper-2);
  display:grid;place-items:center;transform:skewX(-12deg);
  font-family:var(--display);font-weight:500;font-size:15px;line-height:1;
  font-feature-settings:"salt" 1;
}
.post-by__mark span{transform:skewX(12deg)}
.post-by__mark--img{transform:none;background:var(--sand);overflow:hidden}
.post-by__mark--img img{width:100%;height:100%;object-fit:cover;display:block}
.post-by__a a,.post-by__a>span:last-child{
  font-family:var(--text);font-weight:500;font-size:15px;line-height:1.5;color:var(--ink);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.post-by__a a:hover{color:var(--orange-700);border-bottom-color:var(--orange-700)}
.post-by__meta{
  font-family:var(--text);font-weight:400;font-size:13px;color:var(--ink-55);
  padding-inline-start:20px;border-inline-start:1px solid var(--line);
}
@media (max-width:760px){
  .post-by{justify-content:flex-start;gap:10px 16px}
  .post-by__meta{padding-inline-start:0;border-inline-start:0;flex-basis:100%}
}

.post-cover{margin:0 0 8px}
.post-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sand)}
.post-cover--full img{aspect-ratio:auto;height:auto;object-fit:contain}
figcaption{
  margin-top:14px;font-size:13px;font-weight:300;line-height:1.8;color:var(--ink-55);
}

.post-body{padding-block:46px 24px;font-size:18px;line-height:2.15;color:var(--ink)}
.post-body>*+*{margin-top:18px}
.post-body p{font-weight:400}
.post-body .lead{font-size:21px;line-height:1.85;font-weight:300;color:var(--ink)}
.post-body h2{
  margin-top:38px;font-size:clamp(25px,3vw,34px);font-weight:500;
  display:flex;align-items:baseline;gap:14px;
}
.post-body h2::before{
  content:"";width:12px;height:12px;background:var(--orange);
  transform:skewX(-12deg);flex:none;align-self:center;
}
.post-body h3{margin-top:28px;font-size:clamp(20px,2.3vw,25px);font-weight:500;color:var(--ink)}
.post-body p a,.post-body li a,.post-body blockquote a,.post-body figcaption a,.post-body .verse a{
  color:var(--orange);border-bottom:1px solid rgba(236,93,41,.45);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.post-body p a:hover,.post-body li a:hover,.post-body blockquote a:hover,
.post-body figcaption a:hover,.post-body .verse a:hover{
  color:var(--orange-700);border-bottom-color:var(--orange-700);
}
.post-body strong{font-weight:700}
.post-body ul,.post-body ol{padding-inline-start:4px;list-style:none;counter-reset:n}
.post-body li{position:relative;padding-inline-start:26px;margin-top:14px}
.post-body ul li::before{
  content:"";position:absolute;inset-inline-start:0;top:14px;
  width:8px;height:8px;background:var(--orange);transform:skewX(-12deg);
}
.post-body ol li{counter-increment:n}
.post-body ol li::before{
  content:counter(n);position:absolute;inset-inline-start:0;top:0;
  font-family:var(--text);font-weight:500;font-size:14px;color:var(--orange);
}
.post-body blockquote{
  margin:44px 0;
  font-family:var(--display);font-weight:300;font-size:clamp(21px,2.5vw,27px);line-height:1.72;
  font-feature-settings:"salt" 1;
}
.post-body blockquote cite{
  display:block;margin-top:16px;font-family:var(--text);font-style:normal;
  font-weight:400;font-size:14px;color:var(--ink-55);
}
/* ---------- مشغّل الاستماع ---------- */
.player{
  margin:46px 0;display:flex;align-items:stretch;
  background:var(--ink);color:var(--paper-2);overflow:hidden;
}
.player__body{
  flex:1;min-width:0;padding:24px 28px;
  display:flex;flex-direction:column;justify-content:center;
}
/* الصورة مربّعة بعرض يساوي ارتفاع المشغّل، فتظهر كاملة بلا اقتطاع جانبي */
.player{min-height:212px}
.player__art{flex:none;align-self:stretch;width:212px;background:var(--sand)}
.player__art img{width:100%;height:100%;object-fit:cover;display:block}

.player__kicker{
  display:flex;align-items:center;gap:9px;
  font-family:var(--text);font-weight:500;font-size:12px;line-height:1;color:var(--orange);
}
.player__kicker::before{
  content:"";width:9px;height:9px;background:var(--orange);transform:skewX(-12deg);flex:none;
}
.player__title{
  margin-top:10px;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2.1vw,23px);line-height:1.35;color:var(--paper-2);
  font-feature-settings:"salt" 1;
}
.player__row{display:flex;align-items:center;gap:16px;margin-top:20px}

.player__btn{
  flex:none;width:46px;height:46px;padding:0;border:0;border-radius:0;cursor:pointer;
  background:var(--orange);color:var(--ink);display:grid;place-items:center;
  transform:skewX(-12deg);transition:background .25s var(--ease);
}
.player__btn:hover{background:var(--orange-300)}
.player__btn svg{width:14px;height:14px;transform:skewX(12deg)}
.player__btn .i-pause{display:none}
.player.is-playing .player__btn .i-play{display:none}
.player.is-playing .player__btn .i-pause{display:block}

.player__wave{
  flex:1;min-width:0;height:46px;display:flex;align-items:center;gap:2px;cursor:pointer;
}
.player__bar{
  flex:1 1 0;min-width:1px;min-height:3px;height:40%;
  background:rgba(248,245,235,.26);
  transition:background .1s linear;
}
.player__bar.is-on{background:var(--orange)}
.player__wave:hover .player__bar{background:rgba(248,245,235,.36)}
.player__wave:hover .player__bar.is-on{background:var(--orange-300)}

.player__time{
  flex:none;font-family:var(--text);font-weight:400;font-size:13px;
  color:rgba(248,245,235,.58);font-variant-numeric:tabular-nums;
  direction:ltr;                       /* الوقت يُقرأ يسارًا: الحالي / الإجمالي */
}
.player__native{display:none;width:100%}
.player__note{
  margin-top:14px;font-family:var(--text);font-weight:300;font-size:13px;
  color:rgba(248,245,235,.5);
}

@media (max-width:620px){
  .player{flex-direction:column-reverse}
  .player__art{width:150px;height:150px;align-self:flex-start;margin:22px 22px 0}
  .player__body{padding:22px}
  .player__row{gap:12px}
  /* 88 قضيبًا أضيق من أن تسع شاشة الجوال — نُبقي نصفها */
  .player__wave{gap:1px}
  .player__bar:nth-child(2n){display:none}
}

/* أوزان النص ونوعه ولونه */
.post-body strong{font-weight:700}
.post-body .w-medium{font-weight:500}
.post-body .w-light{font-weight:300}
.post-body .f-display{font-family:var(--display);font-feature-settings:"salt" 1}
.post-body .f-text{font-family:var(--text)}
.post-body .c-orange{color:var(--orange-700)}
.post-body .c-burg{color:var(--burgundy)}
.post-body .c-muted{color:var(--ink-55)}

/* فقرة بخط جانبي برتقالي */
.post-body .bar{
  padding-inline-start:20px;border-inline-start:3px solid var(--orange);
}
/* فقرة بخلفية مميّزة */
.post-body .box{
  background:var(--sand);padding:22px 24px;
}

/* فاصل: خط رمادي رفيع بعرض عمود النص كاملًا */
.post-body .sep{
  border:0;height:0;width:100%;margin:52px 0;
  border-top:1px solid var(--line);
}

/* فيديو */
.post-body figure video{
  width:100%;height:auto;display:block;background:var(--ink);
}

/* شعر: بيتٌ في صدرٍ وعجُز */
.post-body .verse{
  margin:26px 0;font-family:var(--display);font-weight:300;
  font-size:clamp(18px,2.1vw,23px);line-height:1.95;
  font-feature-settings:"salt" 1;color:var(--ink);
}
.post-body .verse b{
  display:grid;grid-template-columns:1fr 1fr;gap:0 34px;
  font-weight:inherit;justify-items:center;text-align:center;
}
.post-body .verse b+b{margin-top:12px}
.post-body .verse cite{
  display:block;margin-top:16px;text-align:center;font-family:var(--text);
  font-style:normal;font-weight:400;font-size:13px;color:var(--ink-55);
}
@media (max-width:620px){
  .post-body .verse b{grid-template-columns:1fr;gap:2px}
  .post-body .verse b+b{margin-top:16px}
}

.pull{
  margin:60px 0;padding:18px 0;text-align:center;
  font-family:var(--display);font-weight:400;font-size:clamp(23px,3vw,32px);line-height:1.6;
  font-feature-settings:"salt" 1;color:var(--ink);
}
.note{
  background:var(--sand);padding:28px 30px;
  font-size:16px;font-weight:300;line-height:2;color:var(--ink-70);
  border-inline-start:3px solid var(--orange);
}
.note strong{color:var(--ink);font-weight:500}
.post-body figure{margin:48px 0}
/* الصورة بنسبتها الطبيعية — بلا قص. العرض يملأ الهوامش تمامًا. */
.post-body figure img{width:100%;height:auto;display:block;background:var(--sand)}
/* عرضان أوسع يخرجان عن عمود القراءة ويظلّان داخل هوامش الصفحة */
.post-body .figure--wide{
  --fw:min(calc(var(--measure,760px) + 180px), calc(100vw - var(--gutter)*2));
  width:var(--fw);margin-inline:calc((100% - var(--fw)) / 2);
}
.post-body .figure--full{
  --fw:min(calc(var(--wrap) - var(--gutter)*2), calc(100vw - var(--gutter)*2));
  width:var(--fw);margin-inline:calc((100% - var(--fw)) / 2);
}
@media (max-width:900px){
  .post-body .figure--wide,.post-body .figure--full{width:100%;margin-inline:0}
}
.endmark{
  display:block;width:12px;height:12px;background:var(--orange);
  transform:skewX(-12deg);margin:56px auto 0;
}

.post-foot{padding:52px 0 0;margin-top:56px}
.post-foot>:first-child{margin-top:0}
.author{display:flex;gap:20px;align-items:flex-start}
.author+.author{margin-top:26px}
/* اسم الكاتب رابط، لكن بلون الحبر حتى لا يزدحم الصندوق بالبرتقالي */
.post-body .author__name a,.author__name a{
  color:var(--ink);border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.post-body .author__name a:hover,.author__name a:hover{
  color:var(--orange-700);border-bottom-color:var(--orange-700);
}
.author__mark{
  width:58px;height:58px;flex:none;background:var(--ink);color:var(--paper-2);
  display:grid;place-items:center;transform:skewX(-12deg);
  font-family:var(--display);font-weight:500;font-size:24px;line-height:1;
  font-feature-settings:"salt" 1;
}
.author__mark span{transform:skewX(12deg)}
.author__mark--img{transform:none;background:var(--sand);overflow:hidden}
.author__mark--img img{width:100%;height:100%;object-fit:cover;display:block}
.author__role{
  margin-top:4px;font-family:var(--text);font-weight:500;font-size:12px;color:var(--orange-700);
}
.author__name{font-family:var(--display);font-weight:500;font-size:20px;font-feature-settings:"salt" 1}
.author__bio{margin-top:8px;font-size:15px;font-weight:300;line-height:1.95;color:var(--ink-70);max-width:60ch}

.share{display:flex;align-items:center;gap:14px;margin-top:40px;flex-wrap:wrap}
.share__label{font-size:13px;font-weight:500;color:var(--ink-55)}
.share__btn{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.share__btn:hover{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.share__btn svg{width:17px;height:17px}
.share__msg{font-size:13px;font-weight:500;color:var(--orange)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr);gap:52px 32px}
  .hero__grid{gap:40px}
}
@media (max-width:760px){
  :root{--gutter:22px;--header-h:66px}
  .rule--tabs::before,.rule--tabs::after{display:none}
  .rule--tabs{padding-block:26px 32px}
  .tabs{width:100%}
  .tab{flex:1;padding:12px 10px;font-size:13px}
  .ad{margin:48px 0}
  .hero{padding:32px 0 60px}
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .hero__media{aspect-ratio:4/3}
  .masthead{padding-block:48px 6px}
  .rule{margin:56px 0 36px}
  .post-head{padding-block:44px 32px;text-align:start}
  .post-head__title{max-width:none;margin-inline:0}
  .post-head__dek{margin-inline:0}
  .post-head .meta{justify-content:flex-start}
  .post-body{font-size:17px;line-height:1.88}
  .post-body .lead{font-size:19px}
  .brand__label{display:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:44px}
  .brand__mark{width:62px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

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