@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Noto+Kufi+Arabic:wght@400;600;700&family=Noto+Naskh+Arabic:wght@400;600;700&display=swap');

:root{--alf-ink:#11110f;--alf-paper:#fdfdfb;--alf-line:#d8d8d1;--alf-red:#e32b22;--alf-blue:#1559da;--alf-yellow:#f2c500;--alf-muted:#686861;--alf-pad:clamp(18px,3.8vw,58px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.rtv-letterform-home{margin:0;background:var(--alf-paper);color:var(--alf-ink);font-family:"Helvetica Neue","IBM Plex Sans Arabic",sans-serif;font-size:16px;line-height:1.45}
.rtv-letterform-home button,.rtv-letterform-home input{font:inherit}
.rtv-letterform-home a{color:inherit}
.alf-skip{position:fixed;z-index:1000;left:18px;top:-80px;padding:12px 16px;background:var(--alf-ink);color:#fff!important;text-decoration:none}
.alf-skip:focus{top:18px}
.alf-topbar{height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--alf-pad);border-bottom:1px solid var(--alf-ink);background:rgba(253,253,251,.97);font-size:10px;font-weight:700;letter-spacing:.11em;position:relative;z-index:50}
.alf-brand{font-size:16px;letter-spacing:-.03em;text-decoration:none}
.alf-topbar>span{justify-self:center}
.alf-topbar button{justify-self:end;height:58px;padding:0 24px;border:0;border-left:1px solid var(--alf-ink);border-right:1px solid var(--alf-ink);background:transparent;font-size:10px;font-weight:700;letter-spacing:.1em;cursor:pointer}
.alf-topbar button:hover,.alf-topbar button:focus-visible{background:var(--alf-yellow)}
.alf-nav{position:fixed;z-index:45;right:0;top:58px;width:min(460px,100%);padding:28px var(--alf-pad);border-left:1px solid var(--alf-ink);border-bottom:1px solid var(--alf-ink);background:var(--alf-paper)}
.alf-nav[hidden]{display:none}
.alf-nav a{display:block;padding:15px 0;border-top:1px solid var(--alf-line);font-size:11px;font-weight:700;letter-spacing:.08em;text-decoration:none;transition:padding .2s,color .2s}
.alf-nav a:last-child{border-bottom:1px solid var(--alf-line)}
.alf-nav a:hover{padding-left:12px;color:var(--alf-red)}

.alf-hero{min-height:calc(100vh - 58px);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto auto;position:relative;overflow:hidden;padding:34px var(--alf-pad) 28px;border-bottom:1px solid var(--alf-ink)}
.alf-grid-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333% - 1px),rgba(17,17,15,.065) calc(8.333% - 1px),rgba(17,17,15,.065) 8.333%);pointer-events:none}
.alf-eyebrow{grid-column:1/7;position:relative;margin:0;font-size:10px;font-weight:700;letter-spacing:.13em}
.alf-hero h1{grid-column:1/10;align-self:center;position:relative;z-index:2;margin:3vh 0 0;font-size:clamp(58px,10.4vw,160px);font-weight:800;line-height:.73;letter-spacing:-.075em}
.alf-hero h1 span{display:block}
.alf-hero h1 span:nth-child(2){margin-left:8.333%}
.alf-hero h1 span:nth-child(3){margin-left:33.333%;color:var(--alf-red)}
.alf-arabic-title{grid-column:8/13;grid-row:2;align-self:end;justify-self:end;position:relative;z-index:3;margin:0 0 6vh;font-family:"Noto Kufi Arabic",sans-serif;font-size:clamp(24px,3.4vw,54px);font-weight:600}
.alf-hero-letter{grid-column:9/13;grid-row:1/4;align-self:center;justify-self:center;position:relative;z-index:1;font-family:"Noto Naskh Arabic",serif;font-size:clamp(240px,32vw,500px);line-height:.75;color:rgba(17,17,15,.075);transform:rotate(-5deg)}
.alf-intro{grid-column:1/11;display:grid;grid-template-columns:2fr 5fr;gap:8.333%;position:relative;z-index:2;padding-top:17px;border-top:1px solid var(--alf-ink)}
.alf-intro p{max-width:700px;margin:0;font-size:clamp(12px,1.15vw,16px)}
.alf-intro p:first-child{font-size:10px;font-weight:700;letter-spacing:.1em}
.alf-start{grid-column:1/4;display:flex;justify-content:space-between;align-self:end;position:relative;z-index:2;margin-top:28px;padding:13px 15px;border:1px solid var(--alf-ink);font-size:10px;font-weight:700;letter-spacing:.09em;text-decoration:none}
.alf-start:hover{background:var(--alf-ink);color:#fff}
.alf-dot,.alf-bar,.alf-square{position:absolute;z-index:3;display:block}
.alf-dot{width:42px;height:42px;right:30%;top:13%;border-radius:50%;background:var(--alf-blue)}
.alf-bar{width:18px;height:150px;right:8%;bottom:12%;background:var(--alf-yellow);transform:rotate(29deg)}
.alf-square{width:32px;height:32px;left:57%;bottom:25%;background:var(--alf-red)}

.alf-section{padding:clamp(62px,9vw,140px) var(--alf-pad);border-bottom:1px solid var(--alf-ink)}
.alf-section-head{display:grid;grid-template-columns:8.333% 50% 1fr;margin-bottom:clamp(42px,6vw,88px)}
.alf-section-head>span{font-size:12px;font-weight:800;color:var(--alf-red)}
.alf-section-head p{margin:0;font-size:12px}
.alf-section-head>div p{margin-bottom:10px;font-size:9px;font-weight:700;letter-spacing:.14em}
.alf-section-head h2{margin:0;font-size:clamp(37px,5.5vw,82px);line-height:.88;letter-spacing:-.06em}
.alf-section-head>p{align-self:end;max-width:520px}

.alf-alphabet{background:#f6f6f2}
.alf-alphabet-workbench{display:grid;grid-template-columns:1fr 2fr;border:1px solid var(--alf-ink)}
.alf-letter-stage{min-height:690px;position:relative;display:grid;grid-template-rows:auto 1fr auto;padding:20px;border-right:1px solid var(--alf-ink);background:var(--alf-yellow);overflow:hidden}
.alf-stage-count{font-size:10px;font-weight:700;letter-spacing:.1em}
.alf-letter-stage>b{align-self:center;text-align:center;font-family:"Noto Naskh Arabic",serif;font-size:clamp(240px,32vw,500px);font-weight:500;line-height:.7}
.alf-letter-stage>div{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:end;padding-top:13px;border-top:1px solid var(--alf-ink)}
.alf-letter-stage strong{font-size:18px}
.alf-letter-stage code,.alf-letter-stage div span{font-family:inherit;font-size:10px;letter-spacing:.08em}
.alf-letter-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.alf-letter{min-width:0;min-height:172px;position:relative;display:grid;grid-template-rows:1fr auto;padding:11px;border:0;border-right:1px solid var(--alf-ink);border-bottom:1px solid var(--alf-ink);background:var(--alf-paper);color:var(--alf-ink);text-align:left;text-decoration:none;cursor:pointer}
.alf-letter:nth-child(7n){border-right:0}
.alf-letter:nth-last-child(-n+7){border-bottom:0}
.alf-letter b{align-self:center;text-align:center;font-family:"Noto Naskh Arabic",serif;font-size:clamp(58px,6vw,90px);font-weight:500;line-height:1}
.alf-letter span{font-size:8px;font-weight:700;letter-spacing:.1em}
.alf-letter i{position:absolute;right:7px;top:7px;padding:4px 5px;background:var(--alf-red);color:#fff;font-style:normal;font-size:7px;font-weight:800;letter-spacing:.1em}
.alf-letter:hover,.alf-letter:focus-visible{background:var(--alf-blue);color:#fff;outline:none}
.alf-letter.is-live{background:var(--alf-ink);color:#fff}
.alf-letter.is-live:hover,.alf-letter.is-live:focus-visible{background:var(--alf-red)}
.alf-research-status{display:grid;grid-template-columns:18% 1fr auto;align-items:center;margin-top:28px;border:1px solid var(--alf-ink);background:var(--alf-paper)}
.alf-research-status[hidden]{display:none}
.alf-research-status>span{padding:15px;text-align:center;border-right:1px solid var(--alf-ink);font-family:"Noto Naskh Arabic",serif;font-size:88px}
.alf-research-status>div{padding:20px}
.alf-research-status strong{font-size:18px}
.alf-research-status p{max-width:680px;margin:6px 0 0;font-size:12px}
.alf-research-status button{align-self:stretch;padding:15px;border:0;border-left:1px solid var(--alf-ink);background:transparent;font-size:9px;font-weight:700;letter-spacing:.1em;cursor:pointer}
.alf-research-status button:hover{background:var(--alf-yellow)}

.alf-instrument-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--alf-ink);border-left:1px solid var(--alf-ink)}
.alf-instrument{min-height:340px;display:grid;grid-template-rows:auto 1fr auto auto;position:relative;padding:18px;border-right:1px solid var(--alf-ink);border-bottom:1px solid var(--alf-ink);text-decoration:none}
.alf-instrument>span{font-size:8px;font-weight:700;letter-spacing:.11em;color:var(--alf-muted)}
.alf-instrument i{width:18px;height:18px;align-self:center;border:4px solid var(--alf-line);border-radius:50%}
.alf-instrument h3{margin:0 0 10px;font-size:22px;line-height:1;letter-spacing:-.035em}
.alf-instrument p{max-width:330px;margin:0;font-size:12px;color:var(--alf-muted)}
.alf-featured{grid-column:span 2;grid-row:span 2;min-height:680px;background:var(--alf-ink);color:#fff;overflow:hidden}
.alf-featured>span{color:var(--alf-yellow)}
.alf-featured>b{align-self:center;justify-self:center;font-family:"Noto Naskh Arabic",serif;font-size:clamp(260px,34vw,530px);font-weight:500;line-height:.75;transition:transform .4s,color .4s}
.alf-featured h3{font-size:clamp(36px,5vw,72px)}
.alf-featured p{color:#bbb}
.alf-featured em{position:absolute;right:18px;bottom:18px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em}
.alf-featured:hover b{transform:scale(1.06) rotate(-5deg);color:var(--alf-yellow)}
.alf-instrument:not(.alf-featured):hover{background:#f0efe8}
.alf-instrument:not(.alf-featured):hover i{border-color:var(--alf-blue);background:var(--alf-blue)}

.alf-method{background:var(--alf-blue);color:#fff}
.alf-method .alf-section-head>span{color:var(--alf-yellow)}
.alf-method-flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #fff;border-left:1px solid #fff}
.alf-method-flow article{min-height:330px;padding:18px;border-right:1px solid #fff;border-bottom:1px solid #fff}
.alf-method-flow span{font-size:10px;color:var(--alf-yellow);font-weight:700}
.alf-method-flow h3{margin:120px 0 12px;font-size:16px}
.alf-method-flow p{margin:0;font-size:12px;color:#dfe7ff}
.alf-method blockquote{max-width:1050px;margin:clamp(55px,8vw,110px) 0 0 8.333%;padding:0;border:0;font-size:clamp(34px,5.5vw,82px);font-weight:700;line-height:.95;letter-spacing:-.055em}

.alf-source-layout{display:grid;grid-template-columns:1fr 2fr;border:1px solid var(--alf-ink)}
.alf-source-card{min-height:520px;display:flex;flex-direction:column;padding:22px;background:var(--alf-red);color:#fff}
.alf-source-card>span,.alf-source-card>p,.alf-source-card>a{font-size:9px;font-weight:700;letter-spacing:.1em}
.alf-source-card>strong{margin:auto 0;font-size:clamp(150px,21vw,330px);line-height:.7;letter-spacing:-.08em}
.alf-source-card>p{margin:0 0 30px}
.alf-source-card>a{padding:13px;border:1px solid #fff;text-align:center;text-decoration:none}
.alf-source-card>a:hover{background:#fff;color:var(--alf-red)}
.alf-source-layout dl{margin:0}
.alf-source-layout dl>div{display:grid;grid-template-columns:30% 1fr;min-height:130px;padding:25px;border-bottom:1px solid var(--alf-ink)}
.alf-source-layout dl>div:last-child{border-bottom:0}
.alf-source-layout dt{font-size:9px;font-weight:700;letter-spacing:.1em}
.alf-source-layout dd{max-width:650px;margin:0;font-size:14px}

.alf-footer{min-height:260px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;padding:60px var(--alf-pad) 30px;background:var(--alf-yellow);border-top:1px solid var(--alf-ink)}
.alf-footer>div{display:flex;flex-direction:column;gap:7px}
.alf-footer strong{font-size:26px;letter-spacing:-.04em}
.alf-footer span,.alf-footer p,.alf-footer a{font-size:9px;font-weight:700;letter-spacing:.1em}
.alf-footer p{margin:0;text-align:center}
.alf-footer a{text-align:right;text-decoration:none}

@media(max-width:1050px){
.alf-hero h1{grid-column:1/11}
.alf-arabic-title{grid-column:7/13}
.alf-section-head{grid-template-columns:10% 52% 1fr}
.alf-alphabet-workbench{grid-template-columns:1fr}
.alf-letter-stage{min-height:500px;border-right:0;border-bottom:1px solid var(--alf-ink)}
.alf-letter-grid{grid-template-columns:repeat(7,1fr)}
.alf-letter{min-height:145px}
.alf-instrument-grid{grid-template-columns:1fr 1fr}
.alf-featured{grid-column:span 2}
.alf-method-flow{grid-template-columns:1fr 1fr}
.alf-source-layout{grid-template-columns:1fr 1fr}
}
@media(max-width:690px){
.alf-topbar{grid-template-columns:1fr auto;padding-left:18px;padding-right:0}
.alf-topbar>span{display:none}
.alf-topbar button{padding:0 18px}
.alf-hero{min-height:810px;padding:25px 18px}
.alf-eyebrow{grid-column:1/13}
.alf-hero h1{grid-column:1/13;align-self:start;margin-top:70px;font-size:clamp(52px,18vw,86px)}
.alf-hero h1 span:nth-child(2){margin-left:0}
.alf-hero h1 span:nth-child(3){margin-left:25%}
.alf-arabic-title{grid-column:1/13;grid-row:3;align-self:start;justify-self:start;margin:5px 0 0;font-size:28px}
.alf-hero-letter{grid-column:7/13;grid-row:2/4;align-self:end;font-size:220px}
.alf-intro{grid-column:1/13;grid-template-columns:1fr;gap:12px}
.alf-start{grid-column:1/10}
.alf-dot{right:14%;top:10%;width:28px;height:28px}
.alf-bar{right:8%;bottom:8%;height:100px}
.alf-square{left:60%;bottom:20%;width:22px;height:22px}
.alf-section{padding:66px 18px}
.alf-section-head{grid-template-columns:34px 1fr}
.alf-section-head>p{grid-column:2;margin-top:22px}
.alf-section-head h2{font-size:41px}
.alf-letter-stage{min-height:390px}
.alf-letter-stage>b{font-size:250px}
.alf-letter-grid{grid-template-columns:repeat(4,1fr)}
.alf-letter{min-height:118px;border-bottom:1px solid var(--alf-ink)!important}
.alf-letter:nth-child(7n){border-right:1px solid var(--alf-ink)}
.alf-letter:nth-child(4n){border-right:0}
.alf-letter:nth-last-child(-n+4){border-bottom:0!important}
.alf-letter b{font-size:58px}
.alf-research-status{grid-template-columns:95px 1fr}
.alf-research-status>span{font-size:60px}
.alf-research-status button{grid-column:1/3;border-left:0;border-top:1px solid var(--alf-ink)}
.alf-instrument-grid{grid-template-columns:1fr}
.alf-featured{grid-column:span 1;min-height:560px}
.alf-featured>b{font-size:300px}
.alf-instrument{min-height:240px}
.alf-method-flow{grid-template-columns:1fr}
.alf-method-flow article{min-height:220px}
.alf-method-flow h3{margin-top:60px}
.alf-method blockquote{margin-left:0;font-size:38px}
.alf-source-layout{grid-template-columns:1fr}
.alf-source-card{min-height:460px}
.alf-source-layout dl>div{grid-template-columns:1fr;gap:14px}
.alf-footer{grid-template-columns:1fr;gap:34px;align-items:start}
.alf-footer p,.alf-footer a{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
