/* مسطور · T-151 · الكشيدة هي نظام الصفحة: لا حدود CSS ولا خطوط مرسومة، كل خط U+0640 ممدود من كلمة */
:root{
  --ink:#0B0B0B;--paper:#FFFFFF;--seal:#B3201F;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,3.4vw,56px);
  --h:100svh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:'Readex Pro',sans-serif;font-weight:400;overflow-x:clip;font-kerning:normal;text-rendering:geometricPrecision}
a{color:inherit}
bdi{font-family:'Manrope',sans-serif}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* السطر الثابت */
.tag{position:fixed;top:0;inset-inline-end:0;z-index:50;background:var(--paper);color:var(--ink);font-size:12.5px;line-height:1.6;padding:6px 12px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.tag:hover{text-decoration:underline}}

/* ------- الكلمة الممدودة ------- */
.mad{font-family:'Alexandria',sans-serif;font-weight:700;line-height:1.3;display:block;text-decoration:none;color:inherit}
.js .mad{position:relative;height:1.3em;white-space:nowrap}
.mad>span{position:absolute;top:0;inset-inline-start:0;display:block;transform-origin:50% .9195em;pointer-events:none}
.mad>.k{user-select:none;height:1.3em;overflow:clip}
.mad.v{font-size:clamp(20px,1.8vw,27px)}
.js .mad.v{position:absolute;top:0;inset-inline-start:0;transform-origin:100% 0}

/* ------- البطل ------- */
.hero .stage{padding:var(--pad)}
.hero h1{font-size:min(18vw,40vh)}
.tagline{font-size:clamp(19px,2.2vw,32px);line-height:1.6;margin-top:.6em}
.cue{font-size:14px;line-height:1.6;margin-top:1em}
.label{font-family:'Alexandria',sans-serif;font-weight:600;font-size:clamp(16px,1.4vw,20px);line-height:1.5;margin-block:clamp(40px,8vh,80px) 14px}

.js .hero{height:calc(var(--h)*3.6)}
.js .hero .stage{position:sticky;top:0;height:var(--h);overflow:clip;padding:0}
.js .hero h1{position:absolute;top:0;inset-inline:0}
.js .tagline,.js .cue{position:absolute;inset-inline:0;text-align:center;margin:0;padding-inline:var(--pad)}
.js .preamble{position:absolute;inset-inline:var(--pad);top:0}
.js .preamble .label{margin-block:0 clamp(10px,2vh,20px)}

/* ------- الفقرات ------- */
.just{text-align:justify;line-height:1.85;font-size:clamp(17px,1.55vw,23px)}
.just[data-size=lead]{font-size:clamp(23px,3.5vw,54px);line-height:1.7}
.just[data-size=big]{font-size:clamp(20px,3.5vw,54px);line-height:1.65}
@media (min-width:600px){.just[data-size=big]{font-size:clamp(20px,max(3.5vw,3.4vh),54px)}}
.just .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.just .l{display:block;white-space:nowrap}
.just .l.full{text-align:justify;text-align-last:justify}

/* ------- البنود ------- */
.bunud{padding-block:clamp(60px,12vh,120px) clamp(50px,10vh,100px)}
.bunud h2{font-size:min(17vw,30vh);margin-inline:var(--pad)}
.note{padding-inline:var(--pad);font-size:clamp(15px,1.25vw,19px);line-height:1.6;margin-block-end:clamp(2px,.6vh,8px)}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,36px);padding-inline:var(--pad);margin-block-start:calc(min(17vw,30vh)*-.2915)}
.col{position:relative;padding-inline-start:calc(clamp(20px,1.8vw,27px)*1.42);padding-block-end:6px;min-height:clamp(240px,40vh,420px)}
.num{font-size:13px;line-height:1.6;margin-block-end:8px;padding-block-start:calc(min(17vw,30vh)*.36)}
@media (max-width:1099px){.col:nth-child(n+3) .num{padding-block-start:0}}
@media (max-width:640px){.col:nth-child(n+2) .num{padding-block-start:0}}
.js .bunud.pin{padding:0;height:calc(var(--h)*2.3)}
.js .bunud.pin .stage{position:sticky;top:0;height:var(--h);overflow:clip;display:flex;flex-direction:column;justify-content:center}
@media (max-width:1099px){.cols{grid-template-columns:repeat(2,1fr);row-gap:40px}.col{min-height:clamp(190px,22vh,280px)}}
@media (max-width:640px){.cols{grid-template-columns:1fr;gap:34px}.col{min-height:0}}

/* ------- الميثاق: الحبر ------- */
.mastoor{background:var(--ink);color:var(--paper)}
.mastoor h2{font-size:min(18vw,32vh)}
.charter{padding:var(--pad);padding-block-start:clamp(44px,8vh,76px)}
.clauses{list-style:none;display:grid;gap:clamp(14px,2.6vh,28px)}
.clauses li{position:relative;padding-inline-start:clamp(28px,3vw,48px)}
.clauses .n{position:absolute;inset-inline-start:0;top:clamp(10px,1.3vw,22px);font-size:clamp(13px,1.15vw,17px);line-height:1}
.readout{display:none;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;font-size:clamp(13px,1vw,15px);line-height:1.6;margin-block-end:clamp(14px,3vh,28px)}
.readout .nums{white-space:nowrap}
.js .readout{display:flex}
.handle{display:none}
.js .mastoor{background:var(--paper);color:var(--ink);height:calc(var(--h)*5)}
.js .mastoor .stage{position:sticky;top:0;height:var(--h);overflow:clip;color:var(--ink)}
.js .mastoor h2{position:absolute;top:0;inset-inline:0;color:var(--ink)}
.js .mastoor .stage.ink{background:var(--ink)}
.js .mastoor .stage.ink h2{visibility:hidden}
.js .charter{position:absolute;inset:0;color:var(--paper);visibility:hidden}
.js .stage.ink .charter{visibility:visible}
.js .sheet{position:relative;width:100%}
.js .clauses{position:relative;z-index:1}
.js .clauses li{padding-inline-end:34px}
.js .handle{display:block;position:absolute;top:0;inset-inline-start:0;width:0;height:100%;cursor:ew-resize;z-index:2;touch-action:pan-y;outline-offset:8px}
.js .handle::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-26px;width:52px}
.js .handle .mad{color:var(--paper);pointer-events:none}

/* ------- الخطوات ------- */
.steps{padding-block:clamp(70px,14vh,150px) clamp(20px,5vh,60px);padding-inline:var(--pad);display:grid;gap:clamp(14px,3vh,40px)}
.row{position:relative}
.row h2{font-size:clamp(64px,13.2vw,216px)}
.on{font-size:clamp(17px,1.8vw,28px);line-height:1.6}
.js .row .on{opacity:0;transition:opacity .5s var(--ease)}
.js .row.done .on{opacity:1}
@media (min-width:900px){
  .js .row .on{position:absolute;bottom:calc(clamp(64px,13.2vw,216px)*.4695 + 6px);text-align:center;padding-inline:2vw}
}
@media (max-width:899px){.row .on{margin-block-start:-2px}.steps{gap:26px}}

/* ------- الختام ------- */
.close{overflow-x:clip;padding:clamp(60px,12vh,120px) var(--pad) clamp(28px,5vh,48px);min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end}
.end-note{font-size:clamp(18px,2vw,30px);line-height:1.6;margin-block-end:clamp(4px,1vh,12px)}
.sign{position:relative}
.cta{font-size:clamp(36px,10.4vw,150px)}
@media (min-width:700px){.cta{font-size:clamp(60px,8.4vw,150px)}}
.stamp{display:block;width:clamp(130px,17vw,250px);height:auto;color:var(--seal);margin-inline-start:auto;margin-block-start:-.5vw;transform:rotate(-9deg);mix-blend-mode:multiply}
.js .stamp{opacity:0;scale:1.7;transition:opacity .16s linear,scale .42s var(--ease)}
.js .stamp.down{opacity:1;scale:1}
.tag-end{display:block;margin-block-start:clamp(16px,3vh,28px);font-size:13px;line-height:1.6;text-decoration:none}
@media (hover:hover) and (pointer:fine){.tag-end:hover{text-decoration:underline}}

/* بلا حركة: الصفحة كاملة ومقروءة، والكلمات ممدودة في مواضعها الأخيرة */
@media (prefers-reduced-motion:reduce){
  .js .stamp{transition:none;scale:1}
  .js .row .on{transition:none}
}
.rm .hero{height:auto}
.rm .hero .stage{position:relative;height:auto;overflow:clip;padding-block:clamp(48px,10vh,100px) 0}
.rm .hero h1,.rm .tagline,.rm .preamble{position:relative;top:auto}
.rm .preamble{inset-inline:auto;margin-inline:var(--pad);margin-block-start:clamp(34px,6vh,60px)}
.rm .tagline{margin-block-start:10px}
.rm .cue{display:none}
.rm .mastoor{height:auto;background:var(--ink)}
.rm .mastoor .stage{position:relative;height:auto;overflow:visible;background:var(--ink)}
.rm .mastoor .stage h2{display:none}
.rm .charter{position:relative;inset:auto;visibility:visible}