@font-face{font-family:Mada;font-weight:500;src:url(/fonts/mada-arabic-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Mada;font-weight:700;src:url(/fonts/mada-arabic-700-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Mada;font-weight:900;src:url(/fonts/mada-arabic-900-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Aref Ruqaa';font-weight:700;src:url(/fonts/aref-ruqaa-arabic-700-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh';font-weight:400;src:url(/fonts/noto-naskh-arabic-arabic-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh';font-weight:700;src:url(/fonts/noto-naskh-arabic-arabic-700-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Mada;font-weight:500;src:url(/fonts/mada-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:Mada;font-weight:700;src:url(/fonts/mada-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:Mada;font-weight:900;src:url(/fonts/mada-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:'Aref Ruqaa';font-weight:700;src:url(/fonts/aref-ruqaa-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:'Noto Naskh';font-weight:400;src:url(/fonts/noto-naskh-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:'Noto Naskh';font-weight:700;src:url(/fonts/noto-naskh-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Mada,Tahoma,sans-serif;font-weight:500;overflow-x:hidden}
a{color:inherit}button,input{font:inherit}img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.wm{display:block;height:100%;width:auto;color:var(--ink);overflow:visible}.wm-dot{fill:var(--dot)}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(14px,3vw,36px);background:var(--bg);flex-wrap:wrap}
.brand{display:block;height:44px;flex:none}
.top-nav{display:flex;gap:7px;flex-wrap:wrap}
.pill{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:9px 15px;font-weight:700;font-size:15px;cursor:pointer;transition:transform .15s,background .15s}.pill:hover{transform:translateY(-2px);background:var(--dot);color:var(--ink)}
@media(max-width:560px){.top{padding:9px 12px}.brand{height:36px}.top-nav{width:100%;justify-content:space-between}.pill{flex:1 1 auto;padding:9px 8px;font-size:14px}.js-random{flex:2 1 auto}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 24px;border-radius:999px;border:3px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;font-size:18px;text-decoration:none;cursor:pointer;transition:transform .15s}.btn:hover{transform:translateY(-3px)}.btn-dot{background:var(--dot);border-color:var(--dot)}
/* hero: ink wipe */
.hero{padding:clamp(10px,2vw,24px) clamp(14px,3vw,36px) 28px}.hero-in{max-width:1200px;margin:0 auto}
.hero-kicker{margin:0 0 10px;font:900 clamp(26px,5vw,46px)/1.2 Mada;color:var(--ink)}
.ink{position:relative;border-radius:22px;overflow:hidden;min-height:clamp(290px,46vh,480px);background:var(--paper);display:flex}
.ink-under{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(22px,5vw,64px);text-decoration:none;color:var(--ink)}
.ink-line{font:700 clamp(28px,5.2vw,64px)/1.45 'Aref Ruqaa',serif;text-align:center}
.ink-cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .5s}.ink.done .ink-cv{opacity:0;pointer-events:none}
.hero-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.ink-empty{font-size:20px}
/* pile */
.sec-head{padding:30px clamp(14px,3vw,36px) 12px}.sec-head h2{margin:0;font:900 clamp(30px,6vw,64px)/1.15 Mada}.sec-head p{margin:6px 0 0;font-size:18px}
.pile{position:relative;height:clamp(460px,72vh,720px);overflow:hidden;background:var(--ink);user-select:none;-webkit-user-select:none}
.chip{position:absolute;left:0;top:0;max-width:min(78vw,520px);padding:13px 19px;border-radius:12px;font:700 clamp(16px,2.1vw,25px)/1.35 'Aref Ruqaa',serif;text-align:center;cursor:grab;touch-action:none;will-change:transform;text-decoration:none;display:block}.chip:active{cursor:grabbing}
.noscript-list{display:none}html:not(.js) .noscript-list{display:block;padding:20px}html:not(.js) .pile,html:not(.js) .board{display:none}
/* strips */
.strips{display:flex;flex-direction:column;overflow:hidden}.strips-home{height:clamp(520px,90vh,860px)}
.strip{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(16px,4vw,48px);text-decoration:none;overflow:hidden;transition:flex-grow .55s cubic-bezier(.7,0,.25,1)}.strip-name{font:900 clamp(18px,2.7vw,28px)/1.1 Mada;white-space:nowrap;transition:font-size .55s cubic-bezier(.7,0,.25,1)}.strip-n{font:900 clamp(15px,2vw,22px) Mada;opacity:.8}
.strip.on{flex-grow:7}.strip.on .strip-name{font-size:clamp(34px,8vw,108px)}
@media(max-width:560px){.strip.on .strip-name{white-space:normal}}
/* overlays */
.overlay{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:auto}.overlay[hidden]{display:none}.close{position:fixed;top:12px;left:12px;z-index:70;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:28px;line-height:1;cursor:pointer}
.strips-menu{min-height:100%;height:100vh;height:100dvh}.strips-menu .strip{padding-left:72px}
.overlay-search{padding:76px clamp(14px,4vw,48px) 30px}.search-form input{width:100%;font:900 clamp(26px,6vw,60px) Mada;background:transparent;color:var(--ink);border:0;border-bottom:5px solid var(--ink);padding:10px 0;outline:0}.results{margin-top:20px}.results p{font-size:20px}
.overlay-spin{background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}.overlay-spin[hidden]{display:none}.spin-word{font:700 clamp(24px,5vw,56px)/1.4 'Aref Ruqaa',serif;text-align:center}
#dive{position:fixed;inset:0;z-index:90;pointer-events:none;background:transparent;clip-path:circle(0 at var(--dx,50%) var(--dy,50%));transition:clip-path .65s cubic-bezier(.7,0,.25,1)}
html.dive-in #dive{background:var(--dive);clip-path:circle(150% at 50% 50%)}
html.dive-out #dive{clip-path:circle(0 at 50% 50%)}
/* section page */
.sec-hero{min-height:44vh;padding:clamp(28px,6vw,70px) clamp(16px,5vw,60px);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.sec-hero h1{margin:0;font:900 clamp(44px,10vw,132px)/1.05 Mada}.sec-hero p{font-size:20px;max-width:760px;margin:12px 0 0}.sec-count{position:absolute;top:18px;left:clamp(16px,4vw,50px);font:900 clamp(44px,9vw,100px) Mada;opacity:.28}
.rows{background:var(--paper);padding:10px 0}.empty{padding:40px 20px;font-size:20px;text-align:center}
.row-card{display:flex;gap:16px;padding:22px clamp(16px,5vw,60px);text-decoration:none;color:var(--ink);border-bottom:2px solid var(--bg);transition:background .2s,color .2s}.row-card:hover{background:var(--c);color:var(--ct)}
.row-mark{flex:none;width:18px;height:18px;margin-top:12px;border-radius:50%;background:var(--c);outline:2px solid var(--ink)}.row-body{display:block;min-width:0}.row-title{display:block;font:700 clamp(23px,3.5vw,40px)/1.45 'Aref Ruqaa',serif}.row-open{display:block;font:400 18px/1.7 'Noto Naskh',serif;margin-top:3px}
/* article */
.progress{position:fixed;top:0;right:0;width:6px;height:100%;z-index:40;background:transparent}.progress span{display:block;width:100%;height:0;background:var(--dot);border-radius:0 0 6px 6px}
.art{background:var(--paper)}.art-cover{background:var(--c);color:var(--ct);padding:clamp(30px,7vw,90px) clamp(18px,6vw,80px);background-size:cover;background-position:center;position:relative}.art-cover.has-img:before{content:"";position:absolute;inset:0;background:#0009}.art-cover>*{position:relative}
.art-sec{display:inline-block;padding:7px 14px;border:2px solid currentColor;border-radius:999px;font:700 16px Mada;text-decoration:none}.art-cover h1{margin:18px 0 12px;font:700 clamp(34px,6.4vw,80px)/1.4 'Aref Ruqaa',serif;max-width:1000px}.art-open{margin:0;font:700 clamp(19px,2.6vw,28px)/1.65 'Noto Naskh',serif;max-width:860px}
.art-tools{display:flex;gap:7px;justify-content:center;padding:18px 16px 0;flex-wrap:wrap}.tool{min-width:48px;min-height:44px;padding:6px 14px;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;font-weight:700;font-size:16px;cursor:pointer}
.art-body{font:400 calc(21px*var(--fs,1))/2 'Noto Naskh',serif;color:var(--text);max-width:760px;margin:0 auto;padding:18px 20px 30px}.art-body h2{font:900 clamp(26px,3.6vw,36px)/1.35 Mada;color:var(--ink);margin:36px 0 8px}.art-body p{margin:0 0 20px}.art-body li{margin-bottom:8px}.art-body a{color:var(--ink);font-weight:700}
.fn{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:25px;margin:0 3px;padding:0 4px;border-radius:50%;background:var(--dot);color:var(--ink)!important;font:900 15px/1 Mada!important;text-decoration:none;vertical-align:super;animation:fnp 2.8s ease-in-out infinite;cursor:pointer}@keyframes fnp{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.pop{position:absolute;z-index:45;width:min(88vw,380px);background:var(--ink);color:var(--bg);padding:13px 16px;border-radius:13px;font:500 16px/1.65 Mada;box-shadow:0 12px 26px #0005}.pop a{display:inline-block;margin-top:7px;color:var(--bg);font-weight:900}
.sources{max-width:760px;margin:0 auto;padding:6px 20px 42px}.sources h2{font:900 34px Mada;margin:0 0 14px}.sources ol{list-style:none;margin:0;padding:0}.sources li{display:flex;gap:11px;padding:12px;border-radius:10px;margin-bottom:6px;font:500 17px/1.6 Mada;transition:background .25s}.sources li:target,.sources li.flash{background:var(--bg)}.src-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:900}.src-url{display:block;font-size:14px;opacity:.75;text-align:right}
/* thread board */
.threads{background:var(--bg);padding:30px 0 0}.threads h2{margin:0;padding:0 clamp(14px,3vw,36px) 14px;font:900 clamp(28px,5vw,54px)/1.2 Mada}.board{position:relative;height:clamp(600px,84vh,720px);overflow:hidden;user-select:none;-webkit-user-select:none}.board svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;left:0;top:0;max-width:min(58vw,300px);padding:10px 14px;border-radius:15px;font:700 clamp(15px,1.8vw,19px)/1.4 'Aref Ruqaa',serif;text-align:center;text-decoration:none;cursor:grab;touch-action:none;will-change:transform;display:block}.node.center{max-width:min(66vw,360px);font-size:clamp(17px,2.2vw,24px);cursor:default;outline:4px solid var(--ink)}
/* static, message, footer */
.static{background:var(--paper);min-height:60vh;padding:clamp(24px,5vw,60px) 0}.static h1{font:900 clamp(38px,8vw,88px) Mada;margin:0 auto 10px;max-width:760px;padding:0 20px}
.msg{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;gap:18px}.msg h1{font:900 clamp(28px,5vw,54px)/1.4 Mada;margin:0}
.foot{background:var(--ink);color:var(--bg);padding:30px clamp(16px,4vw,48px)}.foot .wm{color:var(--bg)}.foot-sub{padding-bottom:28px;border-bottom:2px solid #fff3}.sub{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}.sub h2{margin:0;font:900 clamp(25px,4vw,42px)/1.2 Mada}.sub p{margin:5px 0 0;font-size:17px}.sub-row{display:flex;gap:7px;flex:1 1 320px;max-width:520px}.sub input[type=email]{flex:1;min-width:0;height:52px;padding:0 16px;border:0;border-radius:999px;background:var(--bg);color:var(--ink);text-align:left}.sub button{height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--dot);color:var(--ink);font-weight:900;cursor:pointer}.hp{position:absolute;right:-9999px;width:1px;height:1px}.sub-msg{width:100%;min-height:24px;font-weight:700}
.foot-row{padding-top:24px}.foot-brand{display:block;height:48px;width:max-content}.foot-row p{margin:10px 0;font-size:16px}.foot-row nav{display:flex;gap:18px;flex-wrap:wrap}.foot-row nav a{font-weight:700}.copy{opacity:.8;font-size:14px!important}
/* opening scene */
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv-go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:11px;padding:20px 32px;border-radius:999px;background:var(--cta);color:var(--ink);border:3px solid #fff;font:900 clamp(22px,4vw,30px) Mada;white-space:nowrap;cursor:pointer;animation:tvp 1.3s ease-in-out infinite}.tv-go svg{width:34px;height:34px}@keyframes tvp{0%,100%{box-shadow:0 0 0 0 #ffd23fbf}50%{box-shadow:0 0 0 22px #ffd23f00}}
.tv-skip,.tv-mute{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));padding:9px 16px;border-radius:999px;border:0;background:#fff2;color:#fff;font:700 16px Mada;cursor:pointer;backdrop-filter:blur(3px)}.tv-skip{left:18px}.tv-mute{right:18px}#stage.light .tv-skip,#stage.light .tv-mute{background:var(--ink);color:var(--bg)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}