/* طَلّ · قالب T-151
   الترتيب في العمق بلا سياقات تكديس على الآباء:
   الورق ← الحروف الخلفية .bk (1) ← قماش القطرة (2) ← الحروف الأمامية .fr والنصوص (3) ← سطر القالب (4) */
:root{
  --paper:#F5F3EE;
  --ink:#0B0B0B;
  --honey:#D98A0B;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:'Readex Pro','Manrope',sans-serif;font-weight:400;overflow-x:clip;background:var(--paper)}
a{color:inherit}
bdi{font-family:'Manrope',sans-serif}

#gl{position:fixed;inset-block-start:0;inset-inline-start:0;width:100vw;height:100lvh;z-index:2;pointer-events:none;display:none}
.gl #gl{display:block}

.cred{position:fixed;inset-block-end:12px;inset-inline-end:12px;z-index:4;font-size:13px;line-height:1.6;padding:4px 10px;background:var(--paper);color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cred:focus-visible,.hint:focus-visible,.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.dsp{font-family:'Alexandria','Readex Pro',sans-serif;font-weight:700;line-height:1.3;color:var(--ink)}
.bk{position:relative;z-index:1}
.fr{position:relative;z-index:3}
.ln2{display:inline-block}

.lab,.txt,.steps,.lead,.hint{position:relative;z-index:3}
.lab{font-size:clamp(16px,1.5vw,20px);line-height:1.6;font-weight:500;padding-inline:var(--pad)}
.txt,.steps{font-size:clamp(19px,2.2vw,30px);line-height:1.7;font-weight:400}

/* ── البداية ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(8px,3svh,32px) clamp(40px,7svh,72px);padding-inline:var(--pad)}
.hero h1{font-size:min(46vw,50svh);line-height:1.56;text-align:start;padding-block-start:.08em}
@media (max-aspect-ratio:1/1){.hero h1{margin-block-start:9svh}}
.hero-foot{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.lead{font-size:clamp(20px,2.6vw,36px);line-height:1.5;font-weight:500}
.hint{font-size:clamp(16px,1.4vw,19px);line-height:1.6;text-underline-offset:5px;text-decoration-thickness:1px}

/* ── الفصول ── */
.ch{position:relative;padding-block:clamp(56px,10svh,110px)}
.ch h2{margin-block-start:clamp(4px,1svh,12px)}

.ch-where{min-height:150svh}
.ch-where h2{font-size:min(23vw,36svh);padding-inline:var(--pad)}
.ch-where .ln2{display:block;text-align:end}
.ch-where .txt{max-width:22em;margin-block-start:clamp(48px,18svh,180px);margin-inline-start:auto;margin-inline-end:var(--pad);padding-inline-start:var(--pad)}

.ch-how{min-height:170svh}
.ch-how h2{font-size:min(33vw,46svh);padding-inline:var(--pad);line-height:1.3}
.ch-how .ln2{display:block;text-align:end}
.steps{list-style:none;margin-block-start:clamp(60px,20svh,200px);padding-inline:var(--pad);display:grid;gap:clamp(20px,5svh,44px)}
.steps li{max-width:20em}
.steps li:nth-child(2){margin-inline-start:min(8vw,300px)}
.steps li:nth-child(3){margin-inline-start:min(16vw,600px)}

/* الجرة تثبت والتمرير يملؤها ويميلها. sticky سياق تكديس خاص، فكلمتها تحت القماش والملاحظة خارجها فوقه */
.ch-jar{position:relative;height:265svh}
.stage{position:sticky;inset-block-start:0;height:100svh;overflow:clip;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(12px,2svh,24px)}
.stage .lab{position:absolute;inset-block-start:clamp(12px,3svh,32px);inset-inline-start:0}
.stage h2{font-size:min(34vw,36svh);text-align:center;line-height:1.3}
.stage .ln2{display:block}
.jar-slot{--jr:min(26vw,21svh);position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:50% -48%;width:calc(var(--jr)*2);height:calc(var(--jr)*2.9)}
.note-pin{position:sticky;inset-block-start:0;height:1px;margin-block-start:-100svh;margin-block-end:calc(100svh - 1px);z-index:3}
.note{position:absolute;inset-block-start:clamp(52px,9svh,80px);inset-inline-start:0;max-width:11.5em;padding-inline-start:var(--pad);font-size:clamp(17px,1.7vw,24px);line-height:1.6}

.ch-end{min-height:100svh;display:flex;flex-direction:column;padding-block:clamp(16px,4svh,48px) 0}
.ch-end h2{font-size:min(19vw,24svh);padding-inline:var(--pad);margin-block:auto 0}
/* خلفية الزر تحت القماش واسمه فوقه، فتتدلى القطرة أمام الحبر ولا تغطي الكلام */
.cta{display:block;position:relative;margin-block-start:clamp(44px,9svh,96px);padding-block:calc(clamp(20px,3svh,40px) + var(--drop,0px)) clamp(52px,7svh,72px);padding-inline:var(--pad);text-align:end;font-family:'Alexandria','Readex Pro',sans-serif;font-size:clamp(26px,4.6vw,66px);line-height:1.3;font-weight:700;color:#FFFFFF;text-decoration:none}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);transition:background-color .16s var(--ease)}
.cta span{position:relative;z-index:3;transition:color .16s var(--ease)}
@media (hover:hover) and (pointer:fine){.cta:hover::before{background:var(--honey)}.cta:hover span{color:var(--ink)}}
.cta:active::before{background:var(--honey)}
.cta:active span{color:var(--ink)}

/* ── بديل مقصود بلا WebGL وبلا JS: قطرة مسطحة بالضرب فوق الحرف ── */
.still{position:absolute;z-index:2;fill:var(--honey);mix-blend-mode:multiply;pointer-events:none;overflow:visible}
.js .still{display:none}
.js.nogl .still{display:block}
.still-a{width:clamp(90px,17vw,230px);inset-block-start:56svh;inset-inline-start:40vw}
.still-b{width:clamp(70px,12vw,170px);inset-block-start:calc(clamp(56px,10svh,110px) + 22svh);inset-inline-start:40vw}
.still-c{width:clamp(70px,12vw,170px);inset-block-start:calc(clamp(56px,10svh,110px) + 34svh);inset-inline-start:26vw}
.still-jar{position:static;width:100%;height:100%;mix-blend-mode:normal;fill:none}
.still-jar .jf{fill:var(--honey);mix-blend-mode:multiply}
.still-jar .jl{fill:none;stroke:var(--ink);stroke-width:2.5}
.js.nogl .still-jar{display:block}