/* رف ذهب — «فكرة في كل شاشة»: كلمة تملأ الشاشة، وصورة تتسع حتى تصير الشاشة كلها، ومساحات لونية كاملة من الطوب والنخل.
   الشعار وحده بألوان المصمم (ذهبي، والاسم أسود، و™ رمادي). مشاهد التمرير لا تعمل إلا مع .motion (جافاسكربت ودون تقليل الحركة)، وبدونها تُعرض الصفحة ثابتة كاملة. */
@font-face{font-family:"Thmanyah Serif Display";src:url(fonts/thmanyahserifdisplay-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Serif Text";src:url(fonts/thmanyahseriftext-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Serif Text";src:url(fonts/thmanyahseriftext-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --logo-ink:#000000;--gold:#CFA052;--grey:#A6A6A6;
  --paper:#F8F3E8;--cream:#FBF7EF;--soft:#F0E8D6;--ink:#1F3A31;--mute:#5C6157;--dim:#7D8074;--line:#E0D5BF;
  --brick:#8E4A2E;--palm:#24493E;--on:rgba(251,247,239,.32);
  --d:"Thmanyah Serif Display",serif;--s:"Thmanyah Serif Text",serif;
  /* سلّم الأحجام: كل درجة نحو ضعف ونصف التي قبلها، فلا قفزة من عنوان ضخم إلى نص دقيق */
  --fs-sm:15px;--fs-b:clamp(18.5px,.1vw + 18.1px,19.5px);--fs-l:clamp(18px,.48vw + 16.1px,23px);
  --fs-h3:clamp(24px,1.15vw + 19.5px,36px);--fs-h2:clamp(40px,4.2vw + 23.6px,84px);--fs-d:clamp(42px,6vw + 18.6px,105px);
  --g:clamp(18px,5vw,72px);--bar:clamp(6px,.6vw,9px);--sec:clamp(88px,16vh,180px);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font:400 var(--fs-b)/1.95 var(--s);overflow-x:hidden}
b,strong{font-weight:500}
p{text-wrap:pretty}
body.menu-open{overflow:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1440px,100%);margin-inline:auto;padding-inline:var(--g)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
main:focus{outline:none}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:30;background:var(--ink);color:var(--cream);padding:12px 18px;font:500 15px/1 var(--s);text-decoration:none}
.skip:focus{top:12px}
.lk{width:100%;height:auto;overflow:visible}.lk .g{fill:var(--gold)}.lk .t{fill:var(--logo-ink)}.lk .m{fill:var(--grey)}

/* الأزرار والروابط */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;background:var(--gold);color:var(--ink);font:400 17.5px/1 var(--s);text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:#D8AE66}
.btn::after{content:"";width:20px;height:var(--bar);background:var(--brick);transition:width .25s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{width:34px}
.btn.line{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.btn.line::after{display:none}
.btn.line:hover{background:rgba(207,160,82,.16)}
.link{display:inline-block;min-width:32px;font:500 16px/1.4 var(--s);text-decoration:none;border-bottom:2px solid var(--gold);padding-block:8px 5px}
.link:hover{border-color:currentColor}
.k{font:400 clamp(19px,.55vw + 17px,25px)/1.6 var(--d);display:flex;gap:12px;align-items:center}
.k::before{content:"";flex:none;width:40px;height:var(--bar);background:var(--gold)}
.h2{font:400 var(--fs-h2)/1.4 var(--d);max-width:18ch;text-wrap:balance}
.lede{font-size:var(--fs-l);max-width:44ch;line-height:2}
.src{font:400 14px/1.8 var(--s);color:var(--mute);margin-top:28px;max-width:80ch}
.sec{padding-block:var(--sec)}
.split{display:grid;grid-template-columns:minmax(150px,.28fr) 1fr;gap:20px 56px;align-items:start}
.split>.k{padding-top:.6em}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.missing{font:500 14px/1.4 var(--s);color:var(--brick);border:1px dashed var(--brick);padding:2px 8px}
.review-note{font:500 14px/1.7 var(--s);color:var(--brick);border:1px dashed var(--brick);padding:12px 16px;margin-bottom:24px}

/* المساحات اللونية الكاملة */
.field{padding-block:var(--sec)}
.palm{background:var(--palm);color:var(--cream)}
.brick{background:var(--brick);color:var(--cream)}
.palm .k,.brick .k{color:var(--cream)}
.palm .src,.brick .src{color:var(--cream);opacity:.9}
.field .lede{opacity:.92}

/* الظهور عند الوصول */
.motion .rise{opacity:0;transform:translateY(44px);transition:opacity .9s,transform 1.1s var(--ease)}
.motion .rise.in{opacity:1;transform:none}

/* الرأس: يبتعد عند النزول، ويعود عند الصعود */
header{position:sticky;top:0;z-index:20;background:var(--paper);transition:transform .45s var(--ease)}
header.away{transform:translateY(-100%)}
header:focus-within{transform:none}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:block;width:clamp(112px,9vw,130px);padding-block:8px}
nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
nav ul{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none;align-items:center}
nav ul a{display:block;min-width:32px;text-align:center;font:400 clamp(18px,.3vw + 16.8px,21px)/1 var(--d);text-decoration:none;padding:12px 0}
nav ul a:hover,nav ul a[aria-current]{box-shadow:inset 0 -2px var(--gold)}
nav .btn{min-height:46px;padding:0 20px;font-size:16px}
.menu-btn{display:none;min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--ink);font:500 15px/1 var(--s);cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:inline-block}
  nav{display:none}
  nav.open{display:flex;flex-direction:column;align-items:stretch;gap:28px;position:fixed;inset:76px 0 0;background:var(--paper);padding:32px var(--g);overflow:auto}
  nav.open ul{flex-direction:column;align-items:stretch;gap:0}
  nav.open ul a{font:400 30px/1.5 var(--d);text-align:start;padding:18px 0;border-bottom:1px solid var(--line)}
  nav.open .btn{justify-content:center;min-height:56px}
}

/* مشهد: يلتصق بالشاشة ما دام قسمه يمرّ */
.stick{position:relative}
.motion .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* ١ · العبارة */
.s1 .stick{min-height:calc(100svh - 76px);display:grid;grid-template-rows:1fr auto;justify-items:center;text-align:center;gap:clamp(24px,4vh,40px);padding:56px var(--g) clamp(28px,7vh,72px)}
.motion .s1{height:220vh;margin-top:-76px}
.motion .s1 .stick{min-height:0;padding-top:76px}
.phrase{display:grid;justify-items:center;align-self:center}
.motion .phrase{transform:translateY(calc(var(--p,0)*-14vh)) scale(calc(1 - var(--p,0)*.3))}
.phrase .pre,.phrase .post{font:400 clamp(26px,2.6vw + 15px,56px)/1.45 var(--d)}
.phrase .post{margin-top:.25em}
.phrase .big{font:400 clamp(88px,min(21vw,23vh),320px)/1.4 var(--d);color:var(--brick);position:relative;padding-bottom:.06em;line-height:1.25}
.phrase .big::after{content:"";position:absolute;inset-inline:6%;bottom:0;height:clamp(9px,1.1vw,18px);background:var(--gold)}
.s1 .foot{display:grid;justify-items:center;gap:18px}
.s1 .foot .lede{max-width:40ch;font-size:var(--fs-b)}
@media (prefers-reduced-motion:no-preference){
  .js .phrase>span{animation:up 1s var(--ease) both}
  .js .phrase .big{animation-name:lift}.js .phrase .post{animation-delay:.24s}
  .js .phrase .big::after{animation:draw .9s var(--ease) .45s both;transform-origin:right}
  .js .s1 .foot{animation:fade .8s .5s both}
}
@keyframes up{from{opacity:0;transform:translateY(40px)}}
@keyframes lift{from{transform:translateY(40px)}}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes fade{from{opacity:0}}

/* ٢ · المتنبي: الصورة تتسع حتى تصير الشاشة، ثم تتوالى أرقامه */
.s2{background:var(--paper)}
.s2 .stick{display:grid}
.s2 .frame{position:relative;aspect-ratio:3/2;max-height:88svh;width:100%}
.s2 img,.grow img{object-position:30% 50%}
.s2 img{width:100%;height:100%;object-fit:cover}
.s2 .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,43,51,.82),rgba(21,43,51,.12) 62%)}
.s2 .over{position:absolute;inset:auto var(--g) clamp(32px,10vh,110px);color:var(--cream);display:grid;gap:12px;justify-items:start}
.s2 .tag{font:500 var(--fs-sm)/1.6 var(--s)}
.s2 h2{font:400 var(--fs-d)/1.4 var(--d);max-width:15ch;text-wrap:balance}
.s2 .more{display:flex;gap:8px 28px;flex-wrap:wrap;font:500 16px/1 var(--s);margin-top:8px}
.s2 .more a{color:var(--cream)}
.motion .s2{height:440vh}
.motion .s2 .frame{position:absolute;inset:0;aspect-ratio:auto;max-height:none;clip-path:inset(calc((1 - var(--a,0))*20vh) calc((1 - var(--a,0))*22vw) round calc((1 - var(--a,0))*20px))}
.motion .s2 img{transform:scale(calc(1.18 - var(--a,0)*.18 + var(--t,0)*.12)) translateX(calc(var(--t,0)*-5%))}
.motion .s2 .shade{opacity:var(--b,0)}
.motion .s2 .over{opacity:calc(var(--b,0) - var(--c,0)*1.6 + var(--e,0)*1.6);transform:translateY(calc((1 - var(--b,0))*28px))}
.motion .s2 .over a{visibility:hidden}
.motion .s2.ready .over a{visibility:visible}
.s2 .sub{max-width:46ch;font-size:var(--fs-b);opacity:.92}
.tally{list-style:none;display:flex;flex-wrap:wrap;gap:8px clamp(20px,3vw,44px);margin-block:6px 2px}
.tally li{display:grid}
.tally b{font:400 clamp(28px,2vw + 14px,48px)/1.4 var(--d);color:var(--gold)}
.tally span{font:500 var(--fs-sm)/1.5 var(--s)}
/* خريطة الرحلة: من بيانات «خريطة الرحلة» في موقع المتنبي */
.atlas{position:relative}
.map{display:block;width:100%;height:auto;--fs:11}
.map text{font:500 calc(var(--fs) * 1px)/1 var(--s);text-anchor:middle;paint-order:stroke;stroke-width:3px;stroke-linejoin:round}
.map .region{font-size:calc(var(--fs) * .95px);letter-spacing:0}
.map .sea,.map .isle{stroke-width:.8}
.map .river{fill:none;stroke-width:.8}
.map .way-all{fill:none;stroke-width:1.2;stroke-dasharray:3 4}
.map .way{fill:none;stroke-width:calc(var(--fs) * .26px);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.map .spot circle{stroke-width:1.4}
.map .spot text{font-weight:500}
.map .here{display:none}
.palm-map .land{fill:var(--palm)}
.palm-map .sea{fill:#1C3B33;stroke:rgba(251,247,239,.22)}
.palm-map .isle{fill:var(--palm);stroke:rgba(251,247,239,.22)}
.palm-map .river{stroke:rgba(251,247,239,.2)}
.palm-map .region{fill:rgba(251,247,239,.5);stroke:none}
.palm-map .way-all{stroke:rgba(251,247,239,.3)}
.palm-map .way{stroke:var(--gold)}
.palm-map .spot circle{fill:var(--palm);stroke:var(--cream)}
.palm-map .spot text{fill:var(--cream);stroke:var(--palm)}
.palm-map .spot.on circle{fill:var(--gold);stroke:var(--gold)}
.palm-map .here{fill:var(--cream);stroke:var(--gold);stroke-width:3}
.paper-map .land{fill:var(--cream)}
.paper-map .sea{fill:#E6DDC9;stroke:#B9AE98}
.paper-map .isle{fill:var(--cream);stroke:#B9AE98}
.paper-map .river{stroke:#C9BFA9}
.paper-map .region{fill:var(--dim);stroke:none}
.paper-map .way-all{stroke:#B9AE98}
.paper-map .way{stroke:var(--brick)}
.paper-map .spot circle{fill:var(--cream);stroke:var(--ink)}
.paper-map .spot text{fill:var(--ink);stroke:var(--cream)}
.paper-map .spot.on circle{fill:var(--brick);stroke:var(--brick)}
/* الرئيسية بلا حركة: الخريطة كاملة بالمسار كله */
.s2 .atlas{width:min(1440px,100%);margin:clamp(40px,7vh,80px) auto 0;padding-inline:var(--g)}
.s2 .now{display:none}
.motion .s2 .atlas{position:absolute;inset:0;margin:0;padding:0;width:auto;background:var(--palm);opacity:var(--m,0);visibility:hidden}
.motion .s2.mapping .atlas{visibility:visible}
.motion .s2 .map{width:100%;height:100%}
.motion .s2 .map .way{stroke-dashoffset:var(--off,1)}
.motion .s2 .map .spot text{opacity:0;transition:opacity .4s}
.motion .s2 .map .spot.on text{opacity:.55}
.motion .s2 .map .spot.cur text{opacity:1}
.motion .s2 .map .spot.cur circle{fill:var(--cream);stroke:var(--gold);stroke-width:3}
.motion .s2 .map .here{display:block}
.motion .s2 .now{display:block;position:absolute;bottom:calc(clamp(20px,5vh,48px) + 40px);inset-inline:var(--g);font:500 var(--fs-sm)/1.6 var(--s);color:var(--cream);opacity:.9}
/* البطاقة فوق الخريطة: في جانبها على المكتب، وأسفلها على الهاتف */
.motion .s2.mapping .trip{place-items:center start;padding:0 var(--g) 120px}
.motion .s2.mapping .trip li{width:min(520px,100%);text-align:start;padding:clamp(20px,3vw,36px);background:rgba(28,59,51,.86);box-shadow:0 0 0 1px rgba(251,247,239,.12)}
.motion .s2.mapping .trip .when{justify-content:flex-start}
.motion .s2.mapping .trip h3{font-size:var(--fs-h2)}
.motion .s2.mapping .trip .bayt{font-size:clamp(19px,.9vw + 15px,28px);margin:20px 0 0;max-width:none}
@media (max-width:760px){
  .motion .s2.mapping .trip{place-items:end center;padding:0 var(--g) 130px}
  .motion .s2.mapping .trip li{padding:18px 20px}
  .motion .s2.mapping .trip h3{font-size:var(--fs-h3)}
  .motion .s2.mapping .trip .bayt{font-size:18px;margin-top:12px;padding-top:12px}
  .motion .s2 .now{bottom:calc(clamp(20px,5vh,48px) + 22px);font-size:13px}
}
/* الرحلة: بلا حركة قائمة من ستّ مراحل، ومع الحركة تتوالى مرحلةً مرحلة فوق اللوحة */
.when{font:500 var(--fs-sm)/1.7 var(--s);display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:space-between}
.when span{opacity:.8}
.where{font:500 var(--fs-sm)/1.7 var(--s);opacity:.8}
.bayt{margin-top:18px;font:400 clamp(19px,.8vw + 15px,26px)/2 var(--d)}
.bayt p{text-wrap:balance}
.trip{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(24px,4vw,64px);padding:clamp(48px,8vh,96px) var(--g) 0;width:min(1440px,100%);margin-inline:auto}
.trip li{border-top:var(--bar) solid var(--gold);padding-top:20px}
.trip h3{font:400 var(--fs-h3)/1.45 var(--d);margin-block:8px 4px}
@media (max-width:900px){.trip{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trip{grid-template-columns:1fr}}
.s2 .rail{display:none}
[data-w]{--w:1}
.motion .s2 .frame::after{content:"";position:absolute;inset:0;background:rgba(21,43,51,.64);opacity:0;transition:opacity .6s}
.motion .s2.tripping .frame::after{opacity:1}
.motion .trip{position:absolute;inset:0;display:grid;place-items:center;grid-template-columns:1fr;padding:0 var(--g) 72px;width:auto;color:var(--cream);pointer-events:none}
.motion .trip li{grid-area:1/1;width:min(1040px,100%);border:0;padding:0;text-align:center;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .8s var(--ease)}
.motion .trip li.on{opacity:1;transform:none}
.motion .trip .when{justify-content:center;font-size:var(--fs-b);color:var(--gold)}
.motion .trip .when span{color:var(--cream)}
.motion .trip h3{font-size:var(--fs-d);line-height:1.45;margin-block:10px 6px}
.motion .trip .where{font-size:var(--fs-b)}
.motion .trip .bayt{font-size:var(--fs-h3);margin:clamp(20px,5vh,48px) auto 0;padding-top:clamp(18px,3vh,28px);border-top:var(--bar) solid var(--gold);max-width:max-content}
.motion .s2 .rail{display:flex;gap:4px;position:absolute;bottom:clamp(20px,5vh,48px);inset-inline:var(--g);opacity:0;transition:opacity .5s}
.motion .s2.tripping .rail{opacity:1}
.s2 .rail i{flex:var(--w) 1 0;min-width:22px;border-top:var(--bar) solid rgba(251,247,239,.28);padding-top:8px;font:500 13px/1.4 var(--s);color:rgba(251,247,239,.72);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .4s,color .4s}
.s2 .rail i.past{border-top-color:rgba(207,160,82,.5)}
.s2 .rail i.on{border-top-color:var(--gold);color:var(--cream)}
@media (max-width:560px){.s2 .rail b{display:none}}

/* ٣ و٤ · خطّا العمل */
.lines-head{display:grid;gap:clamp(20px,4vh,40px);margin-bottom:clamp(48px,9vh,110px)}
.lines-head .lede{max-width:52ch}
.ideas{list-style:none;border-top:1px solid var(--on)}
.ideas li{display:grid;grid-template-columns:3.2em 1fr auto;gap:10px 32px;align-items:baseline;padding-block:clamp(22px,4vh,40px);border-bottom:1px solid var(--on)}
.ideas .n{font:500 var(--fs-sm)/1 var(--s)}
.ideas b{font:400 var(--fs-h2)/1.4 var(--d)}
.ideas em{font:500 14px/1.4 var(--s);font-style:normal;border:1px solid rgba(251,247,239,.7);padding:7px 12px;white-space:nowrap}
.ideas p{grid-column:2/-1;max-width:54ch}
.ideas .next b{color:var(--gold)}
@media (max-width:640px){.ideas li{grid-template-columns:2.4em 1fr}.ideas em{grid-column:2;justify-self:start}}
.sits{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,6vw,96px)}
.sits li{padding-block:clamp(22px,4vh,36px);border-top:1px solid var(--on);display:grid;grid-template-columns:2.4em 1fr;gap:4px 12px}
.sits .n{font:500 var(--fs-sm)/2.6 var(--s)}
.sits b{font:400 var(--fs-h3)/1.5 var(--d)}
.sits span:not(.n){grid-column:2;font:400 var(--fs-b)/1.85 var(--s);opacity:.92}
.field .after{margin-top:clamp(36px,6vh,64px)}
.field .link{color:var(--cream)}
@media (max-width:760px){.sits{grid-template-columns:1fr}}

/* ٥ · جملة تُضاء كلمةً كلمة مع التمرير */
.say{font:400 var(--fs-d)/1.4 var(--d);max-width:21ch;text-wrap:balance}
.say em{font-style:normal;color:var(--brick)}
.motion .say .w{color:var(--dim);transition:color .35s}
.motion .say .w.lit{color:var(--ink)}
.motion .say em .w.lit{color:var(--brick)}
.palm .say,.palm .say em{color:var(--cream)}
.motion .palm .say .w{color:rgba(251,247,239,.5)}
.motion .palm .say .w.lit{color:var(--cream)}
.manifest{display:grid;gap:clamp(28px,5vh,48px);justify-items:start}
.manifest p:not(.say){max-width:46ch;color:var(--mute)}

/* ٦ · الطلب */
.start{background:var(--brick);color:var(--cream)}
.start .wrap{padding-block:var(--sec)}
.start h2{font:400 clamp(48px,6vw + 22px,124px)/1.4 var(--d);max-width:10ch}
.start h2 span{box-shadow:inset 0 calc(var(--bar)*-1.6) 0 var(--gold)}
.start .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px clamp(32px,6vw,110px);margin-top:clamp(40px,8vh,96px)}
.start-text>p{max-width:40ch;font-size:var(--fs-l);line-height:1.85}
.notes{list-style:none;margin-top:32px;display:grid;gap:14px;font:400 16px/1.85 var(--s);max-width:46ch}
.notes li{display:grid;grid-template-columns:auto 1fr;gap:12px}
.notes li::before{content:"";width:14px;height:var(--bar);background:var(--gold);margin-top:.75em}
.start a:not(.btn){text-decoration-color:var(--gold);text-underline-offset:4px}
.soon{margin-top:28px;font-size:var(--fs-l);border-top:var(--bar) solid var(--gold);padding-top:20px;max-width:40ch}
.direct{margin-top:28px;font:500 16px/2 var(--s)}
.card{background:var(--cream);color:var(--ink);padding:clamp(24px,3.4vw,52px);align-self:start}
.f{display:grid;gap:6px;margin-bottom:22px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
label,legend{font:500 16px/1.5 var(--s)}
.opt,.hint{font:400 14px/1.7 var(--s);color:var(--mute)}
input[type=text],textarea{width:100%;min-height:50px;padding:10px 14px;background:#FFFDF8;border:1px solid #B9AE98;border-radius:0;font:400 17px/1.7 var(--s)}
textarea{min-height:132px;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:0;border-color:var(--ink)}
[aria-invalid=true]{border-color:var(--brick)!important}
.err{font:500 14px/1.6 var(--s);color:var(--brick)}
.err:empty{display:none}
fieldset{border:0;margin-bottom:22px}
legend{margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border:1px solid #B9AE98;font:500 15px/1.4 var(--s);background:#FFFDF8;transition:background .15s,border-color .15s}
.chips input:checked+span{background:var(--palm);border-color:var(--palm);color:var(--cream)}
.chips input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.send{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:8px}
.send .hint{flex-basis:100%}
.card .btn.line{color:var(--ink)}
.done h3{font:400 var(--fs-h3)/1.45 var(--d);margin-bottom:10px}
.done h3:focus{outline:none}
.done textarea{margin-block:18px;font:400 15px/1.8 var(--s)}
.done .row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.start .grid{grid-template-columns:1fr}}

/* خاتمة الصفحات الداخلية */
.end{min-height:86vh;display:grid;align-content:center;justify-items:center;gap:36px;text-align:center;padding:var(--sec) var(--g)}
.end h2{font:400 var(--fs-d)/1.4 var(--d);max-width:16ch;text-wrap:balance}
.end h2 em{font-style:normal;color:var(--brick)}
.end p{max-width:44ch;color:var(--mute)}

/* افتتاحية الصفحات الداخلية */
.opening{min-height:calc(88svh - 76px);display:grid;align-content:end;gap:clamp(24px,4vh,40px);padding-block:clamp(56px,10vh,120px) clamp(48px,9vh,110px)}
.crumb{font:500 var(--fs-sm)/1.6 var(--s);color:var(--mute)}
.crumb a{text-decoration-color:var(--gold);text-underline-offset:4px}
.opening h1{font:400 clamp(42px,5.4vw + 22px,118px)/1.4 var(--d);max-width:16ch;text-wrap:balance}
.opening h1 em{font-style:normal;color:var(--brick)}
.opening .lede{color:var(--mute)}
.opening .acts{display:flex;gap:16px;flex-wrap:wrap}
.opening.short{min-height:0}
.opening.short h1{font-size:var(--fs-d)}

/* عنّا */
.founder .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.founder .who{display:grid;gap:18px;align-content:start}
.founder h2{font:400 var(--fs-h2)/1.4 var(--d)}
.founder .role{font:400 var(--fs-l)/1.8 var(--d);color:var(--brick)}
.founder .bio{max-width:52ch;font-size:var(--fs-l);line-height:2}
.founder figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.founder .ph-slot{aspect-ratio:4/5;display:grid;place-items:center;border:1px dashed var(--brick);text-align:center;padding:16px}
@media (max-width:760px){.founder .wrap{grid-template-columns:1fr}.founder figure,.founder .ph-slot{max-width:320px}}
.prose{display:grid;gap:18px;max-width:62ch}
.prose h3{font:400 clamp(21px,.6vw + 18px,26px)/1.5 var(--d);margin-top:14px}
.cols{font-size:var(--fs-l);line-height:1.85;display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(28px,5vw,80px);margin-top:clamp(36px,6vh,64px);max-width:1100px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.belief .say{margin-top:clamp(56px,10vh,120px)}

.method .wrap>.k{margin-bottom:20px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:56px clamp(28px,6vw,96px);margin-top:clamp(40px,7vh,80px)}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(18px,3vw,44px);align-items:start}
.steps .n{font:400 clamp(72px,8vw,150px)/1.4 var(--d);color:var(--gold)}
.steps h3{font:400 var(--fs-h3)/1.45 var(--d);margin-bottom:14px}
.steps p{max-width:42ch;opacity:.92}
.steps .out{margin-top:18px;font:500 16px/1.75 var(--s);border-top:var(--bar) solid var(--gold);padding-top:14px;opacity:1}
.steps .out span{display:block;opacity:.75;font-size:var(--fs-sm)}
.method .note{margin-top:clamp(40px,7vh,72px);max-width:70ch;opacity:.92}
.meter{display:none}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.motion .method{padding-bottom:0}
.motion .steps-scene{height:420vh}
.motion .steps-scene .stick{display:grid;align-content:center;padding-inline:var(--g)}
.motion .steps{display:grid;grid-template-columns:1fr;margin:0;width:min(1440px,100%);margin-inline:auto}
.motion .steps li{grid-area:1/1;opacity:0;transform:translateY(48px);transition:opacity .55s,transform .8s var(--ease)}
.motion .steps li.on{opacity:1;transform:none}
.motion .steps .n{font-size:clamp(130px,17vw,290px);line-height:1.05}
.motion .steps h3{font-size:var(--fs-h2);line-height:1.4}
.motion .steps p{font-size:var(--fs-l);line-height:1.85}
.motion .meter{display:flex;gap:6px;position:absolute;bottom:clamp(28px,7vh,64px);inset-inline:var(--g);max-width:min(1440px,100%);margin-inline:auto}
.motion .meter i{flex:1;height:var(--bar);background:var(--on)}
.motion .meter i.on{background:var(--gold)}
.motion .method .note{padding-bottom:var(--sec);margin-top:0}

.plist{list-style:none;counter-reset:p;border-top:1px solid var(--line);margin-top:clamp(40px,7vh,80px)}
.plist li{counter-increment:p;display:grid;grid-template-columns:clamp(56px,7vw,120px) minmax(0,1.1fr) minmax(0,1fr);gap:8px clamp(20px,4vw,64px);align-items:baseline;padding-block:clamp(20px,3.4vh,34px);border-bottom:1px solid var(--line)}
.plist li::before{content:counter(p,arabic-indic);font:400 clamp(28px,2.4vw,42px)/1.4 var(--d);color:var(--brick)}
.plist li:nth-child(even)::before{color:var(--palm)}
.plist h3{font:400 var(--fs-h3)/1.45 var(--d)}
.plist p{color:var(--mute);max-width:44ch}
@media (max-width:760px){.plist li{grid-template-columns:2.4em 1fr}.plist p{grid-column:2}}
.weigh{list-style:none;margin-top:clamp(28px,5vh,48px);border-top:1px solid var(--on)}
.weigh li{font:400 clamp(20px,1.1vw + 16px,32px)/1.6 var(--d);padding-block:clamp(16px,2.6vh,26px);border-bottom:1px solid var(--on);display:grid;grid-template-columns:auto 1fr;gap:18px}
.weigh li::before{content:"";width:18px;height:var(--bar);background:var(--gold);margin-top:.65em}
.choose .lede{margin-top:clamp(28px,5vh,48px);max-width:60ch}

/* المتنبي */
.grow .stick{padding-inline:var(--g)}
.grow .frame{position:relative;aspect-ratio:21/9;width:min(1440px,100%);margin-inline:auto;overflow:hidden}
.grow img{width:100%;height:100%;object-fit:cover}
.motion .grow{height:200vh}
.motion .grow .stick{padding:0}
.motion .grow .frame{position:absolute;inset:0;width:auto;aspect-ratio:auto;clip-path:inset(calc((1 - var(--a,0))*18vh) calc((1 - var(--a,0))*var(--side,5vw)) round calc((1 - var(--a,0))*16px))}
.motion .grow img{transform:scale(calc(1.14 - var(--a,0)*.14))}
.ask{font:400 var(--fs-d)/1.45 var(--d);max-width:19ch;text-wrap:balance}
.ask cite,.rule cite{display:block;margin-top:20px;font:500 var(--fs-sm)/1.6 var(--s);font-style:normal;color:var(--mute)}
.rule{margin-top:clamp(56px,10vh,120px);font:400 var(--fs-l)/1.95 var(--d);max-width:56ch;border-top:var(--bar) solid var(--gold);padding-top:28px}
.nums{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,7vh,72px) clamp(24px,4vw,64px);margin-top:clamp(48px,9vh,100px)}
.nums b{display:block;font:400 clamp(58px,6.6vw,124px)/1.4 var(--d);font-variant-numeric:tabular-nums}
.nums span{display:block;margin-top:12px;font:500 var(--fs-b)/1.6 var(--s);border-top:var(--bar) solid var(--gold);padding-top:12px;max-width:16ch}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,1fr)}}
.lessons{list-style:none;counter-reset:l;margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--on)}
.lessons li{counter-increment:l;display:grid;grid-template-columns:clamp(64px,9vw,150px) minmax(0,1.2fr) minmax(0,1fr);gap:8px clamp(20px,4vw,64px);align-items:baseline;padding-block:clamp(24px,4vh,44px);border-bottom:1px solid var(--on)}
.lessons li::before{content:counter(l,arabic-indic);font:400 clamp(44px,4.6vw,84px)/1.4 var(--d);color:var(--gold)}
.lessons h3{font:400 var(--fs-h3)/1.45 var(--d)}
@media (max-width:760px){.lessons li{grid-template-columns:2.4em 1fr}.lessons p{grid-column:2}}

/* القصة: ستّ مراحل، وشريط جانبي بقدر مدة كل مرحلة */
.after-ask{margin-top:clamp(32px,6vh,56px);color:var(--mute);max-width:52ch}
.nums.tally4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.nums.tally4{grid-template-columns:repeat(2,1fr)}}
.nums.small b{font-size:clamp(44px,4.2vw,78px)}
.soft .rule{margin-top:clamp(48px,8vh,96px)}
.story{padding-block:var(--sec)}
.book{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(32px,5vw,80px);margin-top:clamp(48px,9vh,100px);align-items:start}
.side{position:sticky;top:24px;height:calc(100svh - 48px);display:grid;grid-template-rows:1fr auto;gap:14px}
.side .atlas{min-height:0;border:1px solid var(--line);background:var(--cream)}
.side .map{width:100%;height:100%}
.motion .side .map .way{transition:stroke-dashoffset 1.1s var(--ease)}
.side .map .spot{transition:opacity .4s}
.js .side .map .spot:not(.show){opacity:.45}
.js .side .map .spot:not(.show) text{opacity:0}
.story .rail{display:flex;gap:4px}
.story .rail a{flex:var(--w) 1 0;min-width:30px;display:grid;gap:2px;padding-top:8px;border-top:var(--bar) solid var(--line);text-decoration:none;overflow:hidden}
.story .rail b{font:400 14px/1.4 var(--d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story .rail span{font:500 12px/1.4 var(--s);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story .rail a:hover b{color:var(--brick)}
.story .rail a[aria-current=true]{border-top-color:var(--brick)}
.story .rail a[aria-current=true] b{color:var(--brick)}
@media (max-width:960px){
  .book{grid-template-columns:1fr}
  .side{order:-1;top:0;z-index:5;height:auto;grid-template-rows:auto;background:var(--paper);padding-block:8px;margin-inline:calc(var(--g) * -1);padding-inline:var(--g)}
  .side .atlas{height:34svh}
  .story .rail{display:none}
}
.ch{display:grid;grid-template-columns:minmax(0,1fr);gap:24px clamp(28px,5vw,80px);padding-block:clamp(56px,12vh,140px);border-top:1px solid var(--line);scroll-margin-top:24px}
.ch:first-child{border-top:0;padding-top:0}
.ch header{grid-column:1/-1}
.ch .when{justify-content:flex-start;font-size:var(--fs-b);color:var(--brick)}
.ch .when span{color:var(--ink);opacity:1}
.ch h3{font:400 var(--fs-d)/1.4 var(--d);margin-block:6px 8px}
.ch .where{color:var(--mute);opacity:1}
.ch .tale{font-size:var(--fs-l);line-height:1.95;max-width:46ch}
.ch .refs{font:400 14px/1.8 var(--s);color:var(--mute)}
.ch .verse{border-top:var(--bar) solid var(--gold);padding-top:24px}
.ch .verse .bayt{margin:0;font-size:clamp(22px,1.2vw + 17px,34px)}
.ch figcaption{margin-top:14px;font:400 14px/1.8 var(--s);color:var(--mute)}
@media (max-width:960px){.book{grid-template-columns:1fr}.story .rail{position:static;grid-template-columns:1fr 1fr;column-gap:24px}}
.stops{border-top:1px solid var(--line);padding-top:14px}
.stops summary{cursor:pointer;font:500 16px/1.6 var(--s);color:var(--brick);min-height:32px;display:flex;align-items:center}
.stops ol{list-style:none;display:grid;gap:22px;margin-top:18px}
.stops li{display:grid;gap:6px;padding-inline-start:18px;border-inline-start:var(--bar) solid var(--line)}
.stop-h{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.stop-h b{font:400 19px/1.5 var(--d)}
.stop-h span{font:500 var(--fs-sm)/1.6 var(--s);color:var(--mute)}
.stops .road{margin-top:18px;font-size:16px}
.stops .refs{font:400 14px/1.8 var(--s);color:var(--mute)}

/* القانونية */
.facts{display:grid;grid-template-columns:auto 1fr;gap:0 32px;margin-top:32px;border-top:var(--bar) solid var(--gold);max-width:780px}
.facts dt,.facts dd{padding-block:15px;border-bottom:1px solid var(--line)}
.facts dt{font:500 var(--fs-sm)/1.6 var(--s);color:var(--mute)}
.facts dd{font:500 17px/1.6 var(--s)}
.soft{background:var(--soft)}
#privacy .src{margin-top:12px}
#privacy .prose{margin-top:28px;max-width:68ch}
.legal-h{font:400 var(--fs-h2)/1.4 var(--d);max-width:18ch}

/* التذييل */
footer{padding-block:72px 44px;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:auto 1fr;gap:32px 64px;align-items:end}
footer .lk{width:clamp(190px,18vw,250px)}
.fl{justify-self:end;text-align:end;font:400 14px/1.9 var(--s);color:var(--mute)}
.fl ul{display:flex;gap:4px 24px;list-style:none;justify-content:flex-end;flex-wrap:wrap;margin-bottom:10px;font:500 16px/1.6 var(--s);color:var(--ink)}
.fl ul a{display:inline-block;padding-block:6px;text-decoration:none}
.fl a:hover{box-shadow:inset 0 -2px var(--gold)}
.fl p a{display:inline-block;padding-block:2px;text-decoration-color:var(--gold);text-underline-offset:4px}
@media (max-width:720px){footer .wrap{grid-template-columns:1fr}.fl{justify-self:start;text-align:start}.fl ul{justify-content:flex-start}}

/* 404 */
.nf{min-height:100vh;display:grid;align-content:center;padding-block:64px}
.nf .wrap{display:grid;gap:28px;justify-items:start}
.nf .brand{width:140px}
.nf h1{font:400 var(--fs-d)/1.4 var(--d);margin-top:24px;max-width:14ch}
.nf p{color:var(--mute);max-width:44ch}
.belief p.say{font-size:var(--fs-h2);max-width:26ch}
@media (max-width:860px){.motion .steps li{grid-template-columns:1fr;gap:8px}.motion .steps .n{font-size:clamp(96px,26vw,160px)}}