/* NABAT. A chaptered editorial page: a fresco hero, painted covers eaten away by paper bodies, a fixed chapter rail. */

/* Fonts are served from this folder (OFL licences), not from Google: no third-party connection, and the files
   are preloaded from the page head so text is laid out once, in the right fonts. Subsets as Google serves them. */
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:500 800; font-display:swap; src:url(../fonts/inter-tight-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Pinyon Script'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/pinyon-script-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Noto Kufi Arabic'; font-style:normal; font-weight:500 700; font-display:swap; src:url(../fonts/noto-kufi-arabic-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face{ font-family:'Noto Kufi Arabic'; font-style:normal; font-weight:500 700; font-display:swap; src:url(../fonts/noto-kufi-arabic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Amiri'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/amiri-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face{ font-family:'Amiri'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/amiri-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Amiri'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/amiri-italic-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face{ font-family:'Amiri'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/amiri-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --ink:#0E0B08; --ink-2:#17120D;
  --paper:#EDE5D4; --paper-2:#E1D8C5; --card:#F6F1E7; --white:#F8F3EA;
  --text:#161210; --text-2:#3D362E; --grey:#716858; --rule:rgba(22,18,16,.14);
  --leaf:#1F8A68; --sprout:#B9D9A0; --pollen:#E9C46A; --rose:#A8604F;
  --sans:'Inter Tight', system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --script:'Pinyon Script', cursive;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --rail:288px;
  --gutter:clamp(24px, 4vw, 64px);
  --ease:cubic-bezier(.22,.74,.26,1);
}
html[lang="ar"]{ --sans:'Noto Kufi Arabic', system-ui, sans-serif; --serif:'Amiri', 'Noto Kufi Arabic', serif; --script:'Amiri', serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; overflow-x:clip; }
body{ margin:0; background:var(--ink); color:var(--white); font-family:var(--sans); font-weight:500; font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p,h1,h2,h3,h4,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--leaf); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--leaf); color:var(--white); }
.skip{ position:absolute; inset-inline-start:12px; top:-60px; z-index:100; padding:10px 14px; background:var(--leaf); color:var(--white); border-radius:8px; font-weight:600; }
.skip:focus{ top:12px; }
.sr{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mono{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400; }
:lang(ar) .mono{ font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:.82rem; font-weight:500; }

/* ---------- pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.1em; border-radius:999px; font-family:var(--sans); font-weight:600; font-size:.9rem; line-height:1.1; border:1px solid transparent; transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); white-space:nowrap; }
.pill:hover{ transform:translateY(-1px); }
.pill-line{ border-color:currentColor; }
.pill-line:hover{ background:var(--text); color:var(--paper); border-color:var(--text); }
.pill-solid{ background:var(--leaf); color:var(--white); }
.pill-solid:hover{ background:#19765A; }
.pill-lg{ padding:.9em 1.6em; font-size:1rem; }
.pill .arr{ font-size:.85em; }

/* ---------- top bar: the logo is the name ---------- */
.top{ position:fixed; top:0; inset-inline:0; height:56px; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-inline:var(--gutter); color:var(--white); transition:color .5s var(--ease); }
.top[data-theme="light"]{ color:var(--text); }
.top-brand{ display:flex; align-items:baseline; gap:.7rem; font-size:.92rem; }
.top-brand strong{ font-weight:800; letter-spacing:.08em; font-size:1.05rem; }
:lang(ar) .top-brand strong{ letter-spacing:0; }
.top-ed{ opacity:.6; font-weight:500; }
.top-chapters{ display:none; align-items:center; gap:.4em; font-weight:600; font-size:.9rem; padding:.45em .9em; border-radius:999px; border:1px solid currentColor; }
.top-chapters svg{ width:12px; height:8px; }
.top-right{ display:flex; align-items:center; gap:.9rem; }
.top-lang{ font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; padding:.4em .75em; border:1px solid currentColor; border-radius:999px; }
.top-lang[lang="ar"]{ font-family:var(--sans); letter-spacing:0; font-weight:600; }
.top .pill-solid{ background:var(--white); color:var(--ink); }
.top[data-theme="light"] .pill-solid{ background:var(--leaf); color:var(--white); }

/* ---------- the rail ---------- */
.rail{ position:fixed; top:0; inset-inline-start:0; width:var(--rail); height:100vh; height:100dvh; z-index:30; display:flex; flex-direction:column; justify-content:space-between; padding:72px 16px 18px; color:var(--white); transition:color .5s var(--ease), background-color .5s var(--ease); pointer-events:none; }
.rail > *{ pointer-events:auto; }
.rail[data-theme="dark"]{ text-shadow:0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.45); }
.rail[data-theme="light"]{ color:var(--text); background:rgba(20,18,16,.045); text-shadow:none; }
.rail-title{ display:flex; flex-direction:column; gap:.2rem; }
.rail-title strong{ font-family:var(--sans); font-weight:800; font-size:1.25rem; line-height:1; letter-spacing:.06em; }
.rail-title span{ font-family:var(--serif); font-style:italic; font-size:1rem; opacity:.75; }
:lang(ar) .rail-title strong{ letter-spacing:0; font-weight:700; font-size:1.35rem; }
:lang(ar) .rail-title span{ font-style:normal; }
.rail-bar{ position:absolute; top:72px; bottom:18px; inset-inline-start:5px; width:2px; background:rgba(128,120,110,.22); border-radius:2px; overflow:hidden; }
.rail-bar i{ position:absolute; inset:0; background:var(--pollen); transform-origin:top; transform:scaleY(var(--rp, 0)); }
.rail[data-theme="light"] .rail-bar i{ background:var(--leaf); }
.rail-list{ display:flex; flex-direction:column; gap:.1rem; margin-bottom:2rem; }
.rail-list a{ display:flex; align-items:baseline; gap:.45rem; font-weight:600; font-size:.98rem; line-height:1.25; letter-spacing:-.015em; opacity:.5; transition:opacity .4s var(--ease); padding:.2rem 0; min-height:24px; }
:lang(ar) .rail-list a{ letter-spacing:0; font-size:.95rem; }
.rail-list a:hover, .rail-list a.active{ opacity:1; }
.rail-name{ flex:none; }
.rail-dots{ flex:1; border-bottom:1px dotted currentColor; opacity:0; transform:scaleX(0); transform-origin:var(--to, left); transition:opacity .5s var(--ease), transform .6s var(--ease); margin-bottom:.3em; }
html[dir="rtl"] .rail-dots{ --to:right; }
.rail-list a.active .rail-dots{ opacity:.9; transform:scaleX(1); border-color:var(--leaf); }
.rail-list a.active .rail-num{ color:var(--leaf); }
.rail[data-theme="dark"] .rail-list a.active .rail-num{ color:var(--pollen); }
.rail[data-theme="dark"] .rail-list a.active .rail-dots{ border-color:var(--pollen); }
.rail-num{ font-family:var(--serif); font-size:.9rem; min-width:1.8em; text-align:end; }
:lang(ar) .rail-num{ font-family:var(--sans); font-size:.85rem; }
.rail-foot{ display:flex; flex-direction:column; gap:.1rem; font-size:.72rem; font-weight:500; opacity:.7; }
.rail-foot a{ display:inline-flex; align-items:center; min-height:24px; }
.rail-foot a:hover{ text-decoration:underline; }

/* ---------- covers: pinned, then eaten away by the paper body ---------- */
.chapter, .hero{ position:relative; z-index:1; }
.hero{ z-index:0; }
.cover{ position:sticky; top:0; height:100vh; height:100svh; background:var(--ink); color:var(--white); overflow:hidden; isolation:isolate; display:flex; align-items:flex-end; padding:14vh 0 12vh; }
.cover.gl{ background:var(--paper); }
.cover-art{ position:absolute; inset:0; z-index:0; transform:translateY(calc(var(--py, 0) * 1px)); will-change:transform; }
.cover-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:saturate(.82) contrast(1.06) brightness(.84); transform:scale(1.18); }
.cover.in-view .cover-art img{ animation:kenburns 18s var(--ease) forwards; }
@keyframes kenburns{ from{ transform:scale(1.18) } to{ transform:scale(1.08) } }
.cover-shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,10,8,.45) 0%, rgba(11,10,8,.05) 35%, rgba(11,10,8,.2) 60%, rgba(11,10,8,.92) 100%), linear-gradient(90deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,0) 40%); }
html[dir="rtl"] .cover-shade{ background:linear-gradient(180deg, rgba(11,10,8,.45) 0%, rgba(11,10,8,.05) 35%, rgba(11,10,8,.2) 60%, rgba(11,10,8,.92) 100%), linear-gradient(-90deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,0) 40%); }
/* while the canvas draws the painting (zoom, shade and the eating front together) the image and shade step aside */
.eat{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:none; pointer-events:none; }
.cover.gl .eat{ display:block; }
.cover.gl .cover-art, .cover.gl .cover-shade{ visibility:hidden; }
.cover .embers{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.cover-emblem{ position:absolute; inset-inline-end:4vw; top:50%; transform:translateY(-58%); pointer-events:none; }
.cover-numeral{ font-family:var(--serif); font-size:clamp(14rem, 36vw, 36rem); line-height:.8; color:rgba(247,245,238,.07); letter-spacing:-.04em; }
:lang(ar) .cover-numeral{ font-family:var(--sans); font-weight:700; letter-spacing:0; }
.cover-text{ position:relative; z-index:3; padding-inline:calc(var(--rail) + var(--gutter)) var(--gutter); width:100%; transform:translateY(calc(var(--co, 0) * -4vh)); opacity:clamp(0, 1 - var(--co, 0) * 3.2, 1); }
.cover-title .ch{ display:inline-block; --kk:clamp(0, var(--cp, 1) * 2.4 - var(--i, 0) * .14, 1); opacity:var(--kk); transform:translateY(calc((1 - var(--kk)) * .6em)) rotate(calc((1 - var(--kk)) * 2deg)); transform-origin:left bottom; }
html[dir="rtl"] .cover-title .ch{ transform-origin:right bottom; }
.cover-lead{ --kl:clamp(0, var(--cp, 1) * 2 - .9, 1); opacity:var(--kl); transform:translateY(calc((1 - var(--kl)) * 24px)); }
.cover-kicker{ --kq:clamp(0, var(--cp, 1) * 2 - .3, 1); opacity:calc(var(--kq) * .8); }
.cover-kicker{ display:flex; align-items:center; gap:.8rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,245,238,.75); margin-bottom:2vh; }
:lang(ar) .cover-kicker{ font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:.85rem; }
.cover-kn{ font-family:var(--serif); font-size:1rem; letter-spacing:0; text-transform:none; }
:lang(ar) .cover-kn{ font-family:var(--sans); }
.cover-sep{ width:34px; height:1px; background:var(--pollen); opacity:.9; }
.cover-title{ font-family:var(--sans); font-weight:800; font-size:clamp(4.6rem, 2rem + 14vw, 15rem); line-height:.86; letter-spacing:-.045em; color:var(--white); margin-inline-start:-.04em; text-wrap:balance; }
:lang(ar) .cover-title{ font-weight:700; letter-spacing:0; line-height:1.1; font-size:clamp(3.8rem, 1.6rem + 11vw, 11.5rem); margin-inline-start:0; }
.cover-lead{ margin-top:3vh; font-family:var(--serif); font-size:clamp(1.55rem, 1rem + 1.6vw, 2.6rem); line-height:1.15; max-width:34ch; color:var(--white); text-shadow:0 2px 20px rgba(0,0,0,.45); }
:lang(ar) .cover-lead{ line-height:1.5; }
.init{ font-family:var(--script); font-size:1.85em; line-height:.6; margin-inline-end:.03em; vertical-align:-.1em; font-weight:400; }
:lang(ar) .init{ font-family:inherit; font-size:1em; margin:0; vertical-align:baseline; }
/* the torn edge only where the eating canvas cannot run */
.tear{ position:absolute; top:1px; left:0; width:100%; height:clamp(22px, 3vw, 44px); transform:translateY(-100%); z-index:3; fill:var(--paper); pointer-events:none; display:none; }
.tear .tear-soft{ fill:var(--paper); opacity:.55; }
.no-gl .tear, .no-js .tear{ display:block; }

/* ---------- the hero: the fresco, its film, the name that lights up when the fingers touch ---------- */
.hero-cover .cover-art img{ filter:saturate(.92) contrast(1.04) brightness(.9); transform:scale(1.04); }
.hero-cover.in-view .cover-art img{ animation:none; }
.hero-film{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:saturate(.92) contrast(1.04) brightness(.9); }
.cover.gl .hero-film{ visibility:hidden; }
.hero-film.off{ display:none; }
.hero-brand{ font-size:clamp(5rem, 2rem + 16vw, 17rem); letter-spacing:-.03em; }
:lang(ar) .hero-brand{ font-size:clamp(4.2rem, 1.8rem + 12vw, 13rem); letter-spacing:0; }
.hero-line{ margin-top:2.2rem; color:rgba(247,245,238,.72); }
.hero-scroll{ position:absolute; z-index:3; bottom:22px; inset-inline-start:calc(var(--rail) + var(--gutter)); color:rgba(247,245,238,.6); }
.hero-scroll::after{ content:""; display:block; width:1px; height:28px; margin-top:8px; background:currentColor; animation:scrollcue 2.2s var(--ease) infinite; transform-origin:top; }
@keyframes scrollcue{ 0%{ transform:scaleY(0) } 50%{ transform:scaleY(1) } 100%{ transform:scaleY(0); transform-origin:bottom } }
/* until the touch: the words wait */
.hero:not(.lit) .cover-title .ch{ opacity:0; transform:translateY(.6em); }
.hero:not(.lit) .cover-lead, .hero:not(.lit) .cover-kicker, .hero:not(.lit) .hero-line, .hero:not(.lit) .hero-scroll{ opacity:0; }
.hero.lit .cover-title .ch{ animation:rise 1s var(--ease) both; animation-delay:calc(.15s + var(--i, 0) * .07s); }
.hero.lit .cover-kicker{ animation:fadeup 1s var(--ease) both .2s; }
.hero.lit .cover-lead{ animation:fadeup 1.2s var(--ease) both .9s; }
.hero.lit .hero-line{ animation:fadeup 1.2s var(--ease) both 1.3s; }
.hero.lit .hero-scroll{ animation:fadeup 1.2s var(--ease) both 1.7s; }
@keyframes rise{ from{ opacity:0; transform:translateY(.6em) } to{ opacity:1; transform:none } }
@keyframes fadeup{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.spark{ position:absolute; z-index:2; left:var(--sx); top:var(--sy); width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#fff; opacity:0; pointer-events:none; will-change:transform, opacity; box-shadow:0 0 24px 10px rgba(255,240,210,.95), 0 0 80px 36px rgba(255,214,150,.5), 0 0 160px 70px rgba(255,200,120,.2); }
.hero.lit .spark{ animation:spark 3s var(--ease) both; }
@keyframes spark{ 0%{ opacity:0; transform:scale(.2) } 18%{ opacity:1; transform:scale(1.6) } 45%{ opacity:.9; transform:scale(1) } 100%{ opacity:.45; transform:scale(.9) } }
.film-skip{ position:absolute; z-index:4; bottom:22px; inset-inline-end:var(--gutter); color:rgba(247,245,238,.72); padding:.55em 1em; border:1px solid rgba(247,245,238,.3); border-radius:999px; opacity:0; animation:fadeup 1s var(--ease) both 1.2s; }
.film-skip:hover{ color:var(--white); border-color:currentColor; }
.hero.lit .film-skip{ display:none; }
.no-js .hero-film, .no-js .film-skip{ display:none; }
.no-js .hero .cover-title .ch, .no-js .hero .cover-lead, .no-js .hero .cover-kicker, .no-js .hero .hero-line{ opacity:1; transform:none; }

/* ---------- "Trusted by": a paper screen with the logo strip ---------- */
.trust{ min-height:46vh; min-height:46svh; display:flex; flex-direction:column; justify-content:center; padding:9vh 0 8vh; }
.trust-label{ color:var(--grey); margin-bottom:2.6rem; }
.strip{ position:relative; overflow:hidden; margin-inline-start:var(--rail); }
.strip-track{ display:flex; align-items:center; gap:clamp(2.4rem, 5vw, 5rem); width:max-content; animation:strip 60s linear infinite; }
.strip-set{ display:flex; align-items:center; gap:clamp(2.4rem, 5vw, 5rem); }
.strip:hover .strip-track{ animation-play-state:paused; }
html[dir="rtl"] .strip-track{ animation-name:strip-rtl; }
@keyframes strip{ to{ transform:translateX(-50%) } }
@keyframes strip-rtl{ to{ transform:translateX(50%) } }
.logo{ flex:none; width:clamp(150px, 15vw, 220px); height:56px; display:grid; place-items:center; color:var(--text); opacity:.5; transition:opacity .4s var(--ease); }
.logo:hover{ opacity:.95; }
.logo svg, .logo img{ width:100%; height:100%; object-fit:contain; }

/* ---------- paper bodies ---------- */
.body{ position:relative; z-index:2; background:var(--paper); color:var(--text); padding:13vh 0 14vh; }
.no-gl .body, .no-js .body{ box-shadow:0 -30px 60px rgba(0,0,0,.35); }
.body::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.14 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.body-wrap{ position:relative; margin-inline-start:var(--rail); padding-inline:var(--gutter); max-width:calc(var(--rail) + 1240px); }
.body-chapter{ color:var(--grey); margin-bottom:3vh; }
.body-h{ font-family:var(--serif); font-weight:400; font-size:clamp(2.5rem, 1.2rem + 4.2vw, 4.6rem); line-height:1; letter-spacing:-.01em; color:var(--text); max-width:22ch; }
:lang(ar) .body-h{ line-height:1.35; letter-spacing:0; }
.body-h .init{ font-size:1.7em; line-height:.5; vertical-align:-.12em; }
.body-lead{ margin-top:3vh; font-family:var(--serif); font-size:clamp(1.25rem, 1rem + .7vw, 1.6rem); line-height:1.35; color:var(--text-2); max-width:58ch; }
.features{ display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem 3rem; margin-top:9vh; align-items:start; }
.features > .pill{ grid-column:1 / -1; justify-self:start; }
.dense .features{ margin-top:0; }
.feature-n{ color:var(--grey); margin-bottom:.8rem; }
.feature-h{ font-family:var(--sans); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; line-height:1.25; }
:lang(ar) .feature-h{ letter-spacing:0; font-size:1.15rem; }
.feature-p{ margin-top:.6rem; font-family:var(--serif); font-size:1.22rem; line-height:1.35; color:var(--text-2); }
:lang(ar) .feature-p{ line-height:1.6; font-size:1.2rem; }
.feature .pill{ margin-top:1.2rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.tags li{ font-size:.8rem; font-weight:500; padding:.3em .75em; border:1px solid var(--rule); border-radius:999px; color:var(--text-2); }
.cards{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.5rem; margin-top:9vh; align-items:stretch; }
.card{ position:relative; border-radius:8px; }
.card-img{ aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:var(--ink-2); transform:perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .5s var(--ease), box-shadow .5s var(--ease); position:relative; }
.card-wide:hover .card-img{ transition:transform .08s linear; box-shadow:0 40px 80px -30px rgba(20,18,16,.55); }
.card-img::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,240,220,.22), transparent 55%); opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.card-wide:hover .card-img::after{ opacity:1; }
.card-img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.2s var(--ease); }
.card-wide:hover .card-img img{ transform:scale(1.06); }
.body-h{ opacity:0; transform:translateY(34px) skewY(1.5deg); transform-origin:left top; transition:opacity 1s var(--ease), transform 1.2s var(--ease); }
.body-h .init{ display:inline-block; transform:scale(.6) translateY(.2em); transition:transform 1.2s var(--ease) .25s; }
.body-h.in{ opacity:1; transform:none; }
.body-h.in .init{ transform:none; }
html[dir="rtl"] .body-h{ transform-origin:right top; }
.card-wide figcaption{ display:flex; flex-direction:column; gap:.25rem; margin-top:1rem; }
.card-wide figcaption strong{ font-weight:600; font-size:1rem; }
.card-wide figcaption span{ font-family:var(--serif); font-size:1.1rem; color:var(--text-2); }
.card-measure{ background:var(--card); padding:2rem; display:flex; flex-direction:column; gap:1rem; box-shadow:inset 0 0 0 1px var(--rule); overflow:hidden; min-height:260px; }
.card-measure > *{ position:relative; }
.card-label{ color:var(--grey); }
.measure{ font-family:var(--serif); font-size:clamp(1.4rem, 1rem + 1vw, 1.9rem); line-height:1.2; color:var(--text); }
:lang(ar) .measure{ line-height:1.5; }
.dense{ margin-top:9vh; padding-top:3rem; border-top:1px solid var(--rule); }
.dense-h{ font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--grey); margin-bottom:1.6rem; }
.dense-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem 3rem; }
.dense-list li{ display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:.98rem; padding:.55rem 0; border-bottom:1px solid var(--rule); }
.dense-glyph{ width:18px; height:18px; color:var(--grey); flex:none; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--leaf); flex:none; }
.faq{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2.2rem 3rem; }
.faq dt{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }
:lang(ar) .faq dt{ letter-spacing:0; }
.faq dd{ margin-top:.5rem; font-family:var(--serif); font-size:1.12rem; line-height:1.4; color:var(--text-2); }
:lang(ar) .faq dd{ line-height:1.7; }

/* ---------- each chapter's own piece ---------- */
/* I · the curve draws as you read */
.curve{ width:100%; height:120px; margin-top:7vh; overflow:visible; }
.curve-base{ stroke:var(--rule); stroke-width:1; }
.curve-line{ fill:none; stroke:var(--leaf); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--vp, 0)); }
.curve-dots circle{ fill:var(--leaf); opacity:clamp(0, calc((var(--vp, 0) - var(--t)) * 7), 1); }
/* II · bars rise */
.bars{ display:flex; align-items:flex-end; gap:.8rem; height:140px; margin-top:8vh; padding-inline:.4rem; }
.bars i{ display:block; flex:1; max-width:64px; height:calc(var(--h) * 140px); background:var(--leaf); border-radius:4px 4px 0 0; transform-origin:bottom; transform:scaleY(0); transition:transform 1.1s var(--ease) var(--d); }
.bars i:nth-child(odd){ background:var(--rose); }
.bars.in i{ transform:scaleY(1); }
/* III · the brand card is a plate */
.card-plate .card-img{ padding:10px; background:#F3EBDD; outline:1px dashed rgba(22,18,16,.3); outline-offset:-16px; box-shadow:inset 0 0 0 1px var(--rule); }
.plate-stamp{ position:absolute; top:-14px; inset-inline-end:18px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid var(--text); display:grid; place-items:center; font-family:var(--serif); font-size:1.1rem; background:var(--paper); transform:rotate(-8deg); }
:lang(ar) .plate-stamp{ font-family:var(--sans); font-size:.95rem; }
.plate-seal{ position:absolute; bottom:70px; inset-inline-start:-10px; z-index:2; width:30px; height:30px; border-radius:50%; background:var(--rose); box-shadow:inset 0 0 0 5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.25); }
/* IV · the website card is glass */
.card-glass .card-img::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; background:linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 0/25% 100%, linear-gradient(0deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 0/100% 33.4%; }
/* V · the network lights up */
.network{ position:absolute; left:0; right:0; bottom:0; width:100%; height:60%; opacity:.5; }
.net-edges path{ fill:none; stroke:var(--leaf); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease) var(--d); }
.net-nodes circle{ fill:var(--leaf); transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .6s var(--ease) calc(var(--d) + .3s); }
.card-network.in .net-edges path{ stroke-dashoffset:0; }
.card-network.in .net-nodes circle{ transform:none; }
/* VI · honeycomb numbers */
.features-hex .feature-n{ display:inline-grid; place-items:center; width:38px; height:34px; background:var(--card); box-shadow:inset 0 0 0 1px var(--rule); clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); color:var(--text); font-size:.62rem; }
/* VII · target rings behind the number */
.rings{ position:absolute; inset-inline-end:-28%; top:-22%; width:92%; aspect-ratio:1; opacity:.2; pointer-events:none; }
.rings circle{ fill:none; stroke:var(--text); stroke-width:1; transform-box:fill-box; transform-origin:center; transform:scale(.3); opacity:0; transition:transform 1.4s var(--ease) var(--d), opacity 1s var(--ease) var(--d); }
.card-rings.in .rings circle{ transform:none; opacity:1; }
/* VIII · spotlights behind the features */
.features-spot .feature{ position:relative; }
.features-spot .feature::before{ content:""; position:absolute; inset:-18px -18px -10px; z-index:-1; border-radius:50%; background:radial-gradient(circle at 30% 20%, rgba(233,196,106,.22), transparent 62%); transform:scale(0); transition:transform 1.4s var(--ease) .2s; }
.features-spot .feature.in::before{ transform:scale(1); }
/* IX · the road to Riyadh */
.route{ position:absolute; inset-inline-end:-6%; bottom:-8%; width:76%; opacity:.9; pointer-events:none; }
.route-land{ fill:rgba(22,18,16,.06); stroke:rgba(22,18,16,.35); stroke-width:1.2; stroke-linejoin:round; }
.route-way{ fill:none; stroke:var(--leaf); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s var(--ease) .3s; }
.route-pin{ fill:var(--rose); stroke:var(--card); stroke-width:2; }
.route-pin-to{ fill:var(--leaf); transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .6s var(--ease) 2s; }
.card-route.in .route-way{ stroke-dashoffset:0; }
.card-route.in .route-pin-to{ transform:none; }
/* X · cohort tags */
.dense-tags li{ background:var(--card); padding:.6rem .9rem .6rem 1.3rem; border:0; clip-path:polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%); }
html[dir="rtl"] .dense-tags li{ padding:.6rem 1.3rem .6rem .9rem; clip-path:polygon(100% 50%, calc(100% - 12px) 0, 0 0, 0 100%, calc(100% - 12px) 100%); }
/* XII · the brief */
.form-title{ display:flex; align-items:center; gap:.6em; color:var(--grey); }
.form-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--leaf); }

/* the report sample card */
.card-report{ background:#FBF9F3; padding:2rem; box-shadow:0 30px 70px -40px rgba(20,18,16,.45), inset 0 0 0 1px var(--rule); transform:rotate(-1deg); }
.card-report .tag{ position:absolute; top:-12px; inset-inline-end:16px; background:var(--text); color:var(--paper); padding:.45em .9em; border-radius:999px; font-size:.66rem; }
.rp-head{ display:flex; justify-content:space-between; padding-bottom:1rem; border-bottom:1px solid var(--rule); color:var(--grey); }
.rp-rows{ display:flex; flex-direction:column; gap:1.2rem; margin-top:1.4rem; }
.rp-rows li{ display:grid; grid-template-columns:1fr 1.3fr; gap:1rem; align-items:center; font-weight:600; font-size:.95rem; }
.rp-bar{ height:9px; border-radius:999px; background:rgba(20,18,16,.08); overflow:hidden; }
.rp-bar i{ display:block; height:100%; width:calc(var(--w) * 100%); background:var(--leaf); transform:scaleX(0); transform-origin:var(--to, left); transition:transform 1.6s var(--ease); }
html[dir="rtl"] .rp-bar i{ --to:right; }
.card-report.in .rp-bar i{ transform:scaleX(1); }
.rp-rows li:nth-child(4) .rp-bar i{ background:var(--rose); }

/* ---------- start chapter ---------- */
.start-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.alt{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.form{ display:flex; flex-direction:column; gap:1rem; padding:2rem; background:var(--card); border-radius:10px; box-shadow:inset 0 0 0 1px var(--rule); }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label, .field legend{ font-size:.85rem; font-weight:600; color:var(--text-2); }
.field input, .field select, .field textarea{ font:inherit; color:var(--text); background:#FBF9F3; border:1px solid var(--rule); border-radius:8px; padding:.8em 1em; min-height:48px; width:100%; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--leaf); box-shadow:0 0 0 3px rgba(31,138,104,.2); }
.field.invalid input, .field.invalid select{ border-color:var(--rose); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236F6A5F' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-inline-end:2.6em; }
html[dir="rtl"] .field select{ background-position:left 1em center; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field-radio{ border:0; padding:0; margin:0; flex-direction:row; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.field-radio legend{ width:100%; margin-bottom:.4rem; }
.field-radio label{ display:inline-flex; align-items:center; gap:.5em; font-weight:500; }
.field-radio input{ accent-color:var(--leaf); width:18px; height:18px; }
.form-error{ color:var(--rose); }
.form .pill-lg{ align-self:flex-start; margin-top:.4rem; }
.form.sent .field, .form.sent .pill-lg, .form.sent .form-error, .form.sent .form-title{ display:none; }
.form-success{ display:flex; flex-direction:column; gap:1rem; }
.form-success[hidden], .form-error[hidden]{ display:none; }
.success-h{ font-family:var(--serif); font-size:1.6rem; line-height:1.2; }
.form-success .mono{ color:var(--grey); }
.foot{ margin-top:14vh; padding-top:2.4rem; border-top:1px solid var(--rule); color:var(--grey); }
.foot-wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.foot a:hover{ text-decoration:underline; }

/* ---------- doc pages ---------- */
.body-doc{ min-height:100vh; padding-top:calc(56px + 10vh); }
.doc-wrap{ max-width:calc(var(--rail) + 760px); }
.doc-h{ margin-top:2.6rem; }
.doc .pill{ margin-top:2rem; }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.reveal.in{ opacity:1; transform:none; }
.reveal.in.done{ --d:0s; }
body.paused *, body.paused *::before, body.paused *::after{ animation-play-state:paused!important; }

/* ---------- responsive ---------- */
@media (max-width:1200px){ :root{ --rail:240px; } }
@media (max-width:1060px){
  :root{ --rail:0px; }
  .top{ padding-inline:16px; }
  .top-chapters{ display:inline-flex; }
  .rail{ width:100%; background:rgba(11,10,8,.98); color:var(--white); padding:84px 24px 28px; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); z-index:35; }
  .rail[data-theme="light"]{ color:var(--white); background:rgba(11,10,8,.98); }
  .rail.open{ opacity:1; pointer-events:auto; }
  .rail-list a{ font-size:1.35rem; padding:.2rem 0; }
  .top.menu-open{ color:var(--white); } .top.menu-open .pill-solid{ background:var(--white); color:var(--ink); }
  /* phones: a soft fade behind the fixed bar, so body text passing under it stays readable */
  .top::before, .top::after{ content:''; position:absolute; inset:0 0 -26px; z-index:-1; pointer-events:none; transition:opacity .5s var(--ease); }
  .top::before{ background:linear-gradient(to bottom, rgba(14,11,8,.92) 0%, rgba(14,11,8,.6) 55%, rgba(14,11,8,0) 100%); }
  .top::after{ background:linear-gradient(to bottom, rgba(237,229,212,.94) 0%, rgba(237,229,212,.62) 55%, rgba(237,229,212,0) 100%); opacity:0; }
  .top[data-theme="light"]::before{ opacity:0; } .top[data-theme="light"]::after{ opacity:1; }
  .top.menu-open::before, .top.menu-open::after{ opacity:0; }
  .film-skip{ bottom:72px; }
  .hero-scroll{ inset-inline-start:var(--gutter); }
  .cover-text{ padding-inline:var(--gutter); }
  /* phones: covers stay pinned so the paper eats them the same way; only the parallax layer is dropped */
  /* Chapters below the fold are not laid out until they come near: the first layout covers the hero and the first
     chapter only. 2800px is the measured phone height of a typical chapter; auto remembers the real one afterwards. */
  .chapter{ content-visibility:auto; contain-intrinsic-size:auto 2800px; }
  .cover-art{ transform:none; will-change:auto; }
  .cover.in-view .cover-art img{ animation:none; transform:scale(1.06); }
  .cover-emblem{ inset-inline-end:-4vw; top:38%; }
  .trust{ min-height:44vh; min-height:44svh; }
  .features, .features-3, .cards, .dense-list, .faq, .start-grid{ grid-template-columns:1fr; }
  .card-report{ transform:none; }
  .curve{ height:90px; }
  .bars{ height:110px; }
}
@media (max-width:640px){
  .top-ed{ display:none; }
  .top-right .pill-solid{ display:none; }
  .cover{ padding-bottom:10vh; }
  .cover-title{ font-size:clamp(3.4rem, 18vw, 6rem); }
  .hero-brand{ font-size:clamp(4rem, 22vw, 7rem); }
  .form{ padding:1.4rem; }
  .field-row{ grid-template-columns:1fr; }
  .logo{ width:140px; height:48px; }
}
@media (pointer:coarse){ .pill, .rail-list a, .top-lang{ min-height:44px; display:inline-flex; align-items:center; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none!important; transition:none!important; transition-delay:0s!important; }
  .reveal{ opacity:1!important; transform:none!important; }
  .hero-film, .film-skip, .spark{ display:none!important; }
  .hero .cover-title .ch, .hero .cover-lead, .hero .cover-kicker, .hero .hero-line, .hero .hero-scroll{ opacity:1!important; transform:none!important; }
  .cover-text, .cover-title .ch, .cover-lead, .cover-kicker{ transform:none!important; opacity:1!important; }
  .cover-art, .cover-art img{ transform:scale(1.02)!important; }
  .cover.gl{ background:var(--ink); }
  .cover.gl .cover-art, .cover.gl .cover-shade{ visibility:visible!important; }
  .eat, .embers{ display:none!important; }
  .tear{ display:block; }
  .body-h, .body-h .init{ opacity:1!important; transform:none!important; }
  .card-report .rp-bar i{ transform:scaleX(1)!important; }
  .curve-line, .net-edges path, .route-way{ stroke-dashoffset:0!important; }
  .curve-dots circle{ opacity:1!important; }
  .bars i, .rings circle, .net-nodes circle, .route-pin-to{ transform:none!important; opacity:1!important; }
  html{ scroll-behavior:auto; }
}