html[lang=ar]{scroll-padding-top:120px}
html[lang=ar] body{font-family:Tahoma,Arial,sans-serif;line-height:1.95}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .brand-name,html[lang=ar] .feature-list a{font-family:Tahoma,Arial,sans-serif;font-weight:500;letter-spacing:0;line-height:1.6}
html[lang=ar] h1{font-size:clamp(2.3rem,4.5vw,4.3rem)}
html[lang=ar] h2{font-size:clamp(1.7rem,3.1vw,2.6rem)}
html[lang=ar] h3{font-size:1.45rem}
html[lang=ar] .eyebrow,html[lang=ar] .topline,html[lang=ar] .brand-name small,html[lang=ar] .art-caption,html[lang=ar] .principles-band .wrap,html[lang=ar] .num,html[lang=ar] .reader-meta,html[lang=ar] .toc-title,html[lang=ar] .footer h3{letter-spacing:0;text-transform:none}
html[lang=ar] .brand-name{font-size:1.4rem;white-space:normal;line-height:1.45}
html[lang=ar] .brand-name small{font-family:Tahoma,Arial,sans-serif;font-size:.65rem;line-height:1.8;margin-top:5px}
html[lang=ar] .brand{min-width:0}
html[lang=ar] .header .brand{flex:1 1 auto}
html[lang=ar] .mark{flex-shrink:0}
html[lang=ar] .main-nav a{font-size:.8rem}
html[lang=ar] .hero h1{line-height:1.65;letter-spacing:0;max-width:640px}
html[lang=ar] .hero h1 em{font-style:normal}
html[lang=ar] .hero-art{padding:18px 32px 5px 5px}
html[lang=ar] .hero .intro{line-height:1.95}
html[lang=ar] .principles-band b{margin-right:0;margin-left:12px}
html[lang=ar] .pillar{padding:32px 0 27px 32px;min-width:0}
html[lang=ar] .pillar+.pillar{border-left:0;border-right:1px solid #cfcfc3;padding-right:32px}
html[lang=ar] .pillar .num{display:block;margin:0 0 18px}
html[lang=ar] .pillar h3{margin:0 0 16px}
html[lang=ar] .pillar p{line-height:1.95}
html[lang=ar] .question-link>div{min-width:0}
html[lang=ar] .question-link h3{font-size:1.25rem;line-height:1.8}
html[lang=ar] .question-link p{font-size:.9rem;line-height:1.9}
html[lang=ar] .sample-arabic,html[lang=ar] .arabic{font-family:'Traditional Arabic','Noto Naskh Arabic','Times New Roman',serif}
html[lang=ar] .sample-arabic{font-size:2.6rem;line-height:2.3}
html[lang=ar] .dark .button{background:#f7f3eb;color:#172e40;border-color:#f7f3eb}
html[lang=ar] .notice,html[lang=ar] .article .answer-box{border-left:0;border-right:3px solid #9c603e}
html[lang=ar] .article p{line-height:2.1}
html[lang=ar] .article h2{font-size:1.65rem;line-height:1.8}
html[lang=ar] .article h3{font-size:1.35rem}
html[lang=ar] .source-note{font-size:.82rem;line-height:1.95}
html[lang=ar] .toc a{font-size:.82rem;line-height:1.9}
html[lang=ar] .sources{font-size:.9rem;line-height:2}
html[lang=ar] ul,html[lang=ar] ol{padding-inline-start:1.6em;padding-inline-end:0}
html[lang=ar] .surah-card h2{font:600 1.05rem/1.8 Tahoma,Arial,sans-serif}
html[lang=ar] .surah-card p{font-size:.78rem}
html[lang=ar] .surah-card .number{font-family:Arial,sans-serif}
html[lang=ar] .reader-tools button,html[lang=ar] .reader-tools a{font-size:.83rem;min-height:42px}
html[lang=ar] .verse-id{font-family:Tahoma,Arial,sans-serif;font-size:.8rem}
html[lang=ar] .verse p{overflow-wrap:break-word}
html[lang=ar] #verse-number{width:95px}
html[lang=ar] #verse-status{display:block}
html[lang=ar] .reader-top select{max-width:100%}
html[lang=ar] .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr}
html[lang=ar] .footer h3{font-family:Tahoma,Arial,sans-serif;font-size:.88rem;font-weight:bold}
html[lang=ar] .footer a{font-size:.82rem;line-height:1.9}
html[lang=ar] .footer p{font-size:.83rem;line-height:1.95}
html[lang=ar] .footer-bottom{font-size:.75rem}
html[lang=ar] .backtop{right:auto;left:22px}
html[lang=ar] input,html[lang=ar] select,html[lang=ar] textarea,html[lang=ar] button{font-family:Tahoma,Arial,sans-serif}
html[lang=ar] .step p{font-size:.9rem}
@media(max-width:1050px){html[lang=ar] .hero-art{padding-right:5px}html[lang=ar] .footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){html[lang=ar] .menu-toggle{display:block;flex-shrink:0}html[lang=ar] .main-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:20px;background:#f7f3eb;border-bottom:1px solid #ccc;box-shadow:0 10px 15px #172e4010;gap:0;flex-direction:column;align-items:stretch}html[lang=ar] .main-nav.open{display:flex}html[lang=ar] .main-nav a{font-size:.9rem;padding:12px 6px;border-bottom:1px solid #ddd}}
@media(max-width:760px){
html[lang=ar] .hero h1,html[lang=ar] .page-head h1{font-size:clamp(2rem,8vw,3rem);line-height:1.7}
html[lang=ar] .brand-name{font-size:1.15rem}html[lang=ar] .brand-name small{font-size:.56rem}
html[lang=ar] .header-inner{gap:14px}html[lang=ar] .menu-toggle{flex-shrink:0;font-size:.8rem}
html[lang=ar] .hero-art{padding:0}html[lang=ar] .hero-art img{object-fit:contain}
html[lang=ar] .pillar+.pillar{border-right:0}html[lang=ar] .pillar .num{margin-bottom:12px}
html[lang=ar] .principles-band b{margin:0}html[lang=ar] .principles-band .wrap{font-size:.73rem}
html[lang=ar] .question-link{grid-template-columns:28px minmax(0,1fr) 20px}
html[lang=ar] .article h2{font-size:1.5rem}html[lang=ar] .article aside{position:static}
html[lang=ar] .reader-top select{min-width:0}html[lang=ar] .reader-top form{margin-top:16px}
html[lang=ar] .footer-grid{gap:28px 20px}html[lang=ar] .backtop{left:12px}
html[lang=ar] .art-caption{font-size:.7rem}html[lang=ar] .page-head .lead{line-height:2}
html[lang=ar] .topline .wrap>span:first-child{font-size:11px}
}
@media(max-width:390px){html[lang=ar] .footer-grid{grid-template-columns:1fr}html[lang=ar] .brand-name{font-size:1.05rem}}
@media print{html[lang=ar] .article{font-size:12pt}html[lang=ar] .arabic{font-size:22pt}html[lang=ar] .translation-note{font-size:10pt}}