/* Round 12: theme-safe image blending, project panels, architectural drafting footer, drag handle and RTL */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
html[lang="ar"] body:not(.admin-page){font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;line-height:1.8}
html[lang="ar"] body:not(.admin-page) h1,html[lang="ar"] body:not(.admin-page) h2,html[lang="ar"] body:not(.admin-page) h3{line-height:1.45;letter-spacing:0}
html[lang="ar"] body:not(.admin-page) .hero-content{text-align:right}
html[lang="ar"] body:not(.admin-page) .project-info{text-align:right}
html[lang="ar"] body:not(.admin-page) .contact-menu{text-align:right}
html[lang="ar"] body:not(.admin-page) .r11-header-logo{direction:ltr}
html[data-theme="dark"] body:not(.admin-page) #projectGrid .project,html[data-theme="dark"] body:not(.admin-page) #projectGrid .project-info,html[data-theme="dark"] body:not(.admin-page) #projectGrid .project-subline{background:#1d1e20!important;color:#e9e5dc!important}
html[data-theme="dark"] body:not(.admin-page) #projectGrid .project-info :is(h3,span,time){color:#e9e5dc!important}
html[data-theme="dark"] body:not(.admin-page) #projectGrid .project-info small{color:#c6a676!important}
html[data-theme="light"] body:not(.admin-page) #projectGrid .project,html[data-theme="light"] body:not(.admin-page) #projectGrid .project-info{background:#fafaf7!important;color:#333638!important}
/* The image is not baked with a white gradient. Its fade resolves against the active CSS theme. */
body:not(.admin-page) .hero{background:var(--r11-bg)!important;isolation:isolate}
body:not(.admin-page) .hero::after{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;opacity:1!important;background:linear-gradient(to bottom,var(--r11-bg) 0%,transparent 16%,transparent 73%,var(--r11-bg) 100%),linear-gradient(to right,var(--r11-bg) 0%,transparent 7%,transparent 93%,var(--r11-bg) 100%)!important}
body:not(.admin-page) .hero-content,body:not(.admin-page) .hero-controls{z-index:2!important}
body:not(.admin-page) .hero-slides{z-index:-1}
body:not(.admin-page) .hero::before{z-index:-1}
/* Entire compare region is draggable at its divider; no horizontal range control */
.compare{touch-action:pan-y;user-select:none}
.compare .r12-compare-divider{position:absolute;left:50%;top:0;bottom:0;z-index:8;width:36px;transform:translateX(-50%);cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center;outline-offset:4px}
.compare .r12-compare-divider::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:#fff;box-shadow:0 0 6px #0008}
.compare .r12-compare-grip{position:relative;width:40px;height:40px;border:2px solid white;border-radius:50%;display:grid;place-items:center;background:#222a;color:#fff;font-size:21px;letter-spacing:2px;box-shadow:0 3px 15px #0007;white-space:nowrap}
.compare::after{display:none!important}
#dCompare input[type="range"]{display:none!important}
/* footer drawing inherits theme color and background; no raster rectangle */
footer .r10-sketch,footer .r11-sketch{display:block!important;background:none!important;opacity:1!important;mask-image:none!important;position:relative!important;width:100vw!important;max-width:none!important;height:clamp(145px,28vw,360px)!important;margin:22px 0 0 calc(50% - 50vw)!important;overflow:hidden!important;pointer-events:none}
footer .r12-architecture{display:block;width:100%;height:100%;color:var(--r11-gold);opacity:.67}
footer .r12-architecture .r12-faint{opacity:.3}
html[data-theme="light"] footer .r12-architecture{opacity:.53}
html[data-theme="dark"] footer .r12-architecture{opacity:.78}
.r11-logo-preview{object-fit:contain;max-height:90px}
@media(max-width:700px){footer .r10-sketch,footer .r11-sketch{height:165px!important}body:not(.admin-page) .hero::after{background:linear-gradient(to bottom,var(--r11-bg),transparent 17%,transparent 75%,var(--r11-bg)),linear-gradient(to right,var(--r11-bg),transparent 5%,transparent 95%,var(--r11-bg))!important}}
.compare img:nth-of-type(2){clip-path:inset(0 0 0 var(--compare))!important}