/* A single signature travels through the real project introductions. */
:root{--work-index:64px;--work-signature:64px;--work-top:128px}
#name-canvas.signature-canvas{position:fixed;z-index:6;pointer-events:none;display:block;transition:none}
.letter-flight-guide{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:none;overflow:hidden}
.motion-paused .letter-flight-guide{display:none!important}
.name-story.signature-integrated:not(.is-static){height:330svh}
.signature-integrated .name-pin{min-height:100svh}
.unicorn-version .signature-integrated .name-stage{inset:128px 0 216px}
.signature-integrated .name-mast{top:105px}
.work-signature{position:sticky;top:var(--work-index);height:var(--work-signature);z-index:7;background:linear-gradient(110deg,#1b2328,#293239 55%,#1b2328);color:#f5f5f3;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #465158}
.work-signature-fallback{font-size:30px;font-weight:800;letter-spacing:-.045em}
#work-pause{position:absolute;right:var(--pad);top:0;height:100%;display:flex;align-items:center;gap:8px;font-size:12px;color:inherit;padding:0 2px}
#work-pause .icon{width:13px;height:13px}
.project-letters-ready:not(.motion-paused) .film-letter-fallback,.project-letters-ready:not(.motion-paused) .work-signature-fallback{visibility:hidden}
.film-index{height:var(--work-index)}
.film-index a{font-size:14px}
.film-scroll{height:220svh;scroll-margin-top:var(--work-top)}
.film-project,.film-study{scroll-margin-top:var(--work-top)}
.film-pin{top:var(--work-top);height:calc(100svh - var(--work-top));min-height:0}
.film-letter-slot{position:absolute;left:var(--pad);right:var(--pad);top:16px;height:clamp(90px,15svh,145px);z-index:2;display:flex;align-items:center;pointer-events:none}
.film-letter-fallback{font-size:clamp(40px,7.2vw,108px);font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.film-project[data-film-id=majlis] .film-letter-fallback{font-size:clamp(32px,6.2vw,94px)}
.film-project[data-layout=reverse] .film-letter-slot{justify-content:flex-end}
.film-heading,.film-project[data-layout=reverse] .film-heading{top:clamp(126px,19svh,181px);width:30%}
.film-heading h3,html[dir=rtl] .film-heading h3{font-size:clamp(23px,2.4vw,35px);line-height:1.3;letter-spacing:-.035em}
.film-heading h3>span{display:inline}
.film-heading p{font-size:14px;line-height:1.65;margin-top:12px;max-width:34ch}
.film-visual,.film-project[data-layout=reverse] .film-visual{top:clamp(130px,19svh,184px);bottom:62px;will-change:transform;overflow:visible}
.film-visual{left:36%;right:1%}
.film-aperture{position:absolute;inset:0;display:block}
.is-film-static .film-aperture{clip-path:none!important}
.film-visual:focus-visible .film-aperture{clip-path:none!important}
.film-project[data-layout=reverse] .film-visual{left:1%;right:36%}
.film-caption{bottom:12%;width:30%}
.film-statement{font-size:clamp(24px,2.15vw,34px)}
.film-proof{font-size:14px;line-height:1.7;margin-top:14px}
.film-read{font-size:14px;margin-top:21px}
.film-foot{font-size:12px}
.film-project.is-film-static .film-scroll{height:calc(100svh - var(--work-top))}
.is-film-static .film-pin{position:relative;top:0}
@media(max-width:1000px) and (min-width:601px){
 .film-index{gap:24px;justify-content:flex-start}
 .film-index a{font-size:13px}
 .film-heading p,.film-proof{font-size:13px}
 .film-statement{font-size:25px}
 .film-heading,.film-caption{width:33%}
}
@media(max-width:600px){
 :root{--work-index:54px;--work-signature:58px;--work-top:112px}
 .name-story.signature-integrated:not(.is-static){height:300svh}
 .unicorn-version .signature-integrated .name-stage{inset:132px 0 226px}
 .signature-integrated .name-mast{top:104px}
 #work-pause{right:14px;font-size:11px;gap:5px}
 #work-pause .icon{width:11px;height:11px}
 .work-signature-fallback{font-size:25px;transform:translateX(-48px)}
 .film-index a{font-size:13px}
 .film-scroll{height:210svh}
 .film-letter-slot{top:12px;height:70px}
 .film-project[data-layout=reverse] .film-letter-slot{justify-content:flex-start}
 .film-letter-fallback{font-size:clamp(29px,8.2vw,46px)}
 .film-project[data-film-id=majlis] .film-letter-fallback{font-size:clamp(25px,7.5vw,41px)}
 .film-heading,.film-project[data-layout=reverse] .film-heading{top:96px;left:var(--pad);right:var(--pad);width:auto;max-width:none}
 .film-heading h3,html[dir=rtl] .film-heading h3{font-size:23px;line-height:1.35;max-width:none}
 .film-heading p,html[dir=rtl] .film-heading p{font-size:12px;line-height:1.6;margin-top:7px;max-width:36ch}
 .film-visual,.film-project[data-layout=reverse] .film-visual,html[dir=rtl] .film-visual,html[dir=rtl] .film-project[data-layout=reverse] .film-visual{top:190px;bottom:210px;left:0;right:0}
 .film-caption,.film-project[data-layout=reverse] .film-caption{bottom:49px;left:var(--pad);right:var(--pad);width:auto}
 .film-statement,html[dir=rtl] .film-statement{font-size:23px;line-height:1.3;max-width:32ch}
 .film-proof{font-size:12px;line-height:1.6;margin-top:10px;max-width:34ch}
 .film-read{font-size:13px;margin-top:13px;padding-bottom:7px}
 .film-foot{font-size:11px;bottom:16px}
}
@media(max-height:680px){
 .unicorn-version .signature-integrated .name-stage{inset:112px 0 211px}
 .signature-integrated .name-mast{top:90px;font-size:9px}
}
@media(max-height:640px) and (min-width:601px){
 .film-letter-slot{top:8px;height:68px}
 .film-letter-fallback{font-size:48px}
 .film-heading,.film-project[data-layout=reverse] .film-heading{top:88px}
 .film-heading h3,html[dir=rtl] .film-heading h3{font-size:22px}
 .film-heading p{font-size:12px;margin-top:7px}
 .film-visual,.film-project[data-layout=reverse] .film-visual{top:82px;bottom:35px;left:40%;right:0}
 .film-project[data-layout=reverse] .film-visual{left:0;right:40%}
 .film-caption{bottom:38px;width:34%}
 .film-statement{font-size:20px;line-height:1.25}
 .film-proof{font-size:12px;margin-top:8px}
 .film-read{font-size:12px;margin-top:10px;padding-bottom:5px}
 .film-foot{bottom:10px;font-size:10px}
}
@media(max-height:560px) and (min-width:601px){
 .film-heading p{display:none}
 .film-heading,.film-project[data-layout=reverse] .film-heading{top:82px}
 .film-caption{bottom:32px}
 .film-statement{font-size:18px}
 .film-proof{font-size:11px;line-height:1.4}
}
/* Short phone windows keep the complete film and text in normal document flow. */
@media(max-width:600px) and (max-height:639px){
 .film-scroll,.film-project.is-film-static .film-scroll{height:auto}
 .film-pin,.is-film-static .film-pin{position:relative;top:0;height:690px;min-height:690px}
 .project-letters-ready:not(.motion-paused) .film-letter-fallback{visibility:visible}
}
@media(prefers-reduced-motion:reduce){
 html:not(.motion-opted-in) .signature-integrated{height:100svh}
 html:not(.motion-opted-in) .film-letter-fallback,html:not(.motion-opted-in) .work-signature-fallback{visibility:visible}
}